在线答卷系统的前端设计与数据库系统的设计与实现

简介: 如果要你实现一个在线的答题系统,你能想到它该具有哪些功能?当我接到这样一个需求的时候,脑海中立马能想到的就是它有录入题库的功能,创建试卷后可以从题库选择试题,并且可以针对试题进行分数的设置和排序。试卷发布后,用户通过指定的链接进入到试卷页面进行答题,答题完提交后,试卷由指定人进行评分。另外可能需要一个页面记录自己的答卷记录。

如果要你实现一个在线的答题系统,你能想到它该具有哪些功能?当我接到这样一个需求的时候,脑海中立马能想到的就是它有录入题库的功能,创建试卷后可以从题库选择试题,并且可以针对试题进行分数的设置和排序。试卷发布后,用户通过指定的链接进入到试卷页面进行答题,答题完提交后,试卷由指定人进行评分。另外可能需要一个页面记录自己的答卷记录。初步设想罗列基本功能后,然后我们针对每个功能进行细化:


1) 题库管理

试题列表,可以根据试题类型或者问题描述进行筛选,列表中展示了试题的信息,包括试题类型、题目描述、答案、选择题的话选项列表、答案解析、额外的附件等。


2)试卷管理

试卷列表,展示试卷的相关信息:试卷名称、总分、及格分、考试最大时长、阅卷人、试题数量和发布状态切换按钮等,操作列提供编辑、编辑试题、考试统计按钮。


3)试卷试题编辑

进入到试卷的信息界面,侧边栏除了展示试卷的基本信息,根据题型显示题号的信息,点击题号可快速定位到改试题,试题列表区域根据题型显示所有的试题,在题型栏有添加试题和从题库选择的按钮,在试题信息栏有给题目排序和设置分数按钮。


4)在线答题

答题人通过特定携带有试卷信息的链接,进入到试卷的答题界面,左侧为题号的按钮进行切换试题,右侧为题目的信息和答案提交区域,和题目上下切换按钮,在左侧的上方有试题答题时间的倒计时框,时间倒数完成会有强制提交的信息弹出。


5)评分功能

由试卷的指定人可看到提交的答卷信息,客观题可直接通过答案对比给出得分,主观题需要由阅卷人评定分数,最后计算出总得分。


6)考试记录

显示答卷人所有的答卷记录,如果该人也是阅卷人可以查看自己相关的阅卷记录。

为什么要进行这样的功能细化?细化后我们可以根据罗列的详细功能进行数据库和表的字段设计。为了能较准确地设计出每个表的字段,一定要把功能清单列的尽可能地详细。


数据表设计图

通过一点一滴的查漏补缺,最终我们设计出与答卷系统相关的六张表,分别为试卷表、试题表、试卷和试题关联组成表、选择题选项表、试卷答题记录表、考试记录表

CREATE TABLE `sys_exam_paper` (
`id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
`training_id` INT DEFAULT NULL COMMENT '所属课程id',
`paper_name` varchar(8) DEFAULT NULL COMMENT '试卷类型(A,B,C)',
`marking_account` varchar(11) DEFAULT NULL COMMENT '阅卷人账户',
`total_score` DOUBLE DEFAULT NULL COMMENT '试卷分数',
`passing_score` DOUBLE DEFAULT NULL COMMENT '及格分数',
`exam_duration` DOUBLE DEFAULT NULL COMMENT '考试时间',
`state` TINYINT DEFAULT NULL COMMENT '试卷状态',
`created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
`modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
 PRIMARY KEY (`id`) USING BTREE
) COMMENT = '试卷表' ROW_FORMAT = COMPACT;
CREATE TABLE `sys_exam_paper_question` (
`id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
`question_type` TINYINT DEFAULT NULL COMMENT '题目类型',
`question_title` TEXT DEFAULT NULL COMMENT '题干',
`document_location` VARCHAR(256) DEFAULT NULL COMMENT '题目附件',
`answer` TEXT DEFAULT NULL COMMENT '题目答案',
`analysis` TEXT DEFAULT NULL COMMENT '题目解析',
`created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
`modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
 PRIMARY KEY (`id`) USING BTREE
) COMMENT = '试题表' ROW_FORMAT = COMPACT;
CREATE TABLE `sys_exam_composition` (
`id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
`paper_id` INT DEFAULT NULL COMMENT '试卷编号',
`question_id` INT DEFAULT NULL COMMENT '题目编号',
`question_order` INT DEFAULT NULL COMMENT '题目编号',
`score` DOUBLE DEFAULT NULL COMMENT '题目分值',
`created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
`modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
PRIMARY KEY (`id`) USING BTREE
) COMMENT = '试卷和试题关联组成表' ROW_FORMAT = COMPACT;
CREATE TABLE `sys_exam_question_choice`  (
`id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
`question_id` INT DEFAULT NULL COMMENT '所属题目id',
`choice_name` VARCHAR(8) DEFAULT NULL COMMENT '选项(A,B,C...)',
`choice_title` TEXT DEFAULT NULL COMMENT '选项描述',
`created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
`modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
 PRIMARY KEY (`id`) USING BTREE
) COMMENT = '选择题选项表' ROW_FORMAT = COMPACT;
CREATE TABLE `sys_exam_answer_sheet`  (
 `id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
 `record_id` INT DEFAULT NULL COMMENT '考试记录编号',
 `question_id` INT DEFAULT NULL COMMENT '题目编号',
 `appendix_location` VARCHAR(256) DEFAULT NULL COMMENT '答题附件',
 `answer` TEXT DEFAULT NULL COMMENT '用户答案',
 `score` DOUBLE DEFAULT NULL COMMENT '用户得分',
 `created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
 `modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
 PRIMARY KEY (`id`) USING BTREE
) COMMENT = '试卷答题记录表' ROW_FORMAT = COMPACT;
CREATE TABLE `sys_exam_record`  (
 `id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
 `employee_account` VARCHAR(11) DEFAULT NULL COMMENT '考试用户账户',
 `duration` DOUBLE DEFAULT NULL COMMENT '考试时长',
 `paper_id` INT DEFAULT NULL COMMENT '考试试卷id',
 `score` DOUBLE DEFAULT NULL COMMENT '该试卷得分',
 `created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
 `modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
  PRIMARY KEY (`id`) USING BTREE
) COMMENT = '考试记录表' ROW_FORMAT = COMPACT;

ET@~HX48PHE4))`10`O7[OP.png

完成了数据表的设计和功能清单之后,我们可以开始构思系统的界面了。作为前端程序员,我们直接选择一款成熟的UI框架,免去了原型的设计稿,就可以直接选用合适的组件进行页面的实现,这个过程就跟画师差不多,是一个根据自己的想象,用画笔(而程序员用的是代码)勾勒出实物的原型的过程。

下面是选用 Element UI 进行搭建的系统前端页面

题库管理界面

R8FD4)]JUH%NO9YD)B]N97C.png

试题创建和编辑界面

M4P]S6NNY7ZSO}~V)_B6O0S.png

试卷管理界面



网络异常,图片无法展示
|

AEV7~H)2%UVT0{[M(RTB%1U.png

试卷试题编辑界面

A[[)FNBTZPI5IE}DXVL$F82.png

考试统计界面

{Y(UX5(VKZUJ8CA4V7OLBSB.png

在线考试界面

BT5[_XBN[6$L69NMST9VTEO.png

答卷详情页面

$(%%D0CNCLT{4M{SUT8S$1X.png

接下来有了前端页面和设计好的数据库表,就可以进行后端接口的定义和实现了,这里省去后端接口的具体实现 ......


总结 :软件的设计是一项复杂的工程,牵涉到方方面面,作为程序员如何从零到一实现一个系统的设计到落地。技术作为自己的看家本领,可能是最次要到,前期的产品逻辑和功能点是最考验我们的,这是考验一个程序员功力的时候。一个好的程序员往产品方面转的时候,需要刻意地去锻炼这方面的能力。


目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
60 3
|
14天前
|
JavaScript Java 关系型数据库
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
本文介绍了一个基于Spring Boot和Vue.js实现的在线考试系统。随着在线教育的发展,在线考试系统的重要性日益凸显。该系统不仅能提高教学效率,减轻教师负担,还为学生提供了灵活便捷的考试方式。技术栈包括Spring Boot、Vue.js、Element-UI等,支持多种角色登录,具备考试管理、题库管理、成绩查询等功能。系统采用前后端分离架构,具备高性能和扩展性,未来可进一步优化并引入AI技术提升智能化水平。
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
|
16天前
|
Java 关系型数据库 MySQL
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
本文介绍了一款基于Spring Boot和JSP技术的房屋租赁系统,旨在通过自动化和信息化手段提升房屋管理效率,优化租户体验。系统采用JDK 1.8、Maven 3.6、MySQL 8.0、JSP、Layui和Spring Boot 2.0等技术栈,实现了高效的房源管理和便捷的租户服务。通过该系统,房东可以轻松管理房源,租户可以快速找到合适的住所,双方都能享受数字化带来的便利。未来,系统将持续优化升级,提供更多完善的服务。
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
|
8天前
|
关系型数据库 Unix MySQL
MySQL是一种关系型数据库管理系统
MySQL是一种关系型数据库管理系统
22 2
|
9天前
|
存储 NoSQL 前端开发
前端轻量级数据库mongodb
【10月更文挑战第2天】MongoDB 是一个基于分布式文件存储的开源数据库系统,不属于前端轻量级数据库,而是后端数据库。它使用 BSON 格式存储数据,支持复杂的数据结构,适用于内容管理系统、物联网等领域。MongoDB 通过动态模式和面向对象的数据存储方式,提供了灵活的数据模型。在 Web 应用中,它通常作为后端存储,通过 API 与前端交互,实现高效的数据管理和实时更新。
|
21天前
|
移动开发 缓存 前端开发
构建高效的前端路由系统:从原理到实践
在现代Web开发中,前端路由系统已成为构建单页面应用(SPA)不可或缺的核心技术之一。不同于传统服务器渲染的多页面应用,SPA通过前端路由技术实现了页面的局部刷新与无缝导航,极大地提升了用户体验。本文将深入剖析前端路由的工作原理,包括Hash模式与History模式的实现差异,并通过实战演示如何在Vue.js框架中构建一个高效、可维护的前端路由系统。我们还将探讨如何优化路由加载性能,确保应用在不同网络环境下的流畅运行。本文不仅适合前端开发者深入了解前端路由的奥秘,也为后端转前端或初学者提供了从零到一的实战指南。
|
21天前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
2月前
|
前端开发 数据库 虚拟化
太6了!用Python快速开发数据库入库系统
太6了!用Python快速开发数据库入库系统
|
2月前
|
缓存 NoSQL 数据库
Web服务器与数据库优化:提升系统性能的最佳实践
【8月更文第28天】在现代的Web应用中,Web服务器与后端数据库之间的交互是至关重要的部分。优化这些组件及其相互作用可以显著提高系统的响应速度、吞吐量和可扩展性。本文将探讨几种常见的优化策略,并提供一些具体的代码示例。
73 1
|
2月前
|
JavaScript Java 关系型数据库
毕设项目&课程设计&毕设项目:基于springboot+vue实现的前后端分离的选课管理系统(含教程&源码&数据库数据)
本文介绍了一个基于Spring Boot和Vue.js技术栈的高校选课管理系统的设计与实现。该系统采用前后端分离架构,旨在提高选课效率、优化资源分配及提升用户体验。技术栈包括:后端Spring Boot 2.0、前端Vue 2.0、数据库MySQL 8.0、开发环境JDK 1.8和Maven 3.6等。系统功能覆盖登录、学生信息管理、选课管理、成绩查询等多个方面,并针对学生、教师和管理员提供了不同的操作界面。系统采用了响应式设计,支持多设备访问,并通过Element UI增强了界面的友好性和交互性。
毕设项目&课程设计&毕设项目:基于springboot+vue实现的前后端分离的选课管理系统(含教程&源码&数据库数据)