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

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

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


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

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


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


目录
相关文章
|
7月前
|
前端开发 JavaScript 安全
7.6K Star Shadcn Admin:颜值与实力并存的后台管理系统,前端开发者的新宠!
"基于 Shadcn UI 和 Vite 打造的现代化管理后台,开箱即用的响应式设计 + 无障碍访问,让后台开发从未如此优雅!" —— 来自 GitHub 7.6K 星认证
1583 26
|
5月前
|
缓存 NoSQL Linux
在CentOS 7系统中彻底移除MongoDB数据库的步骤
以上步骤完成后,MongoDB应该会从您的CentOS 7系统中被彻底移除。在执行上述操作前,请确保已经备份好所有重要数据以防丢失。这些步骤操作需要一些基本的Linux系统管理知识,若您对某一步骤不是非常清楚,请先进行必要的学习或咨询专业人士。在执行系统级操作时,推荐在实施前创建系统快照或备份,以便在出现问题时能够恢复到原先的状态。
438 79
|
7月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
656 1
|
3月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
204 5
|
3月前
|
安全 关系型数据库 数据管理
阿里云数据库:构建高性能与安全的数据管理系统
阿里云数据库提供RDS、PolarDB、Tair等核心产品,具备高可用、弹性扩展、安全合规及智能运维等技术优势,广泛应用于电商、游戏、金融等行业,助力企业高效管理数据,提升业务连续性与竞争力。
|
8月前
|
前端开发 数据库
会议室管理系统源码(含数据库脚本)
会议室管理系统源码(含数据库脚本)
141 0
|
5月前
|
SQL 监控 安全
数据库安全审计系统
Next-DBM数据库审计系统助力企业解决数据安全难题,提供统一身份管理、全方位监控、智能风险识别、完整审计追溯及精细化权限管控,有效防范数据泄露与内部威胁,保障企业核心资产安全,满足合规要求,提升运维效率。
|
7月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
441 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
8月前
|
Java 数据库
jsp CRM客户管理系统(含数据库脚本以及文档)
jsp CRM客户管理系统(含数据库脚本以及文档)
171 10
|
9月前
|
前端开发 Java 关系型数据库
基于ssm的社区物业管理系统,附源码+数据库+论文+任务书
社区物业管理系统采用B/S架构,基于Java语言开发,使用MySQL数据库。系统涵盖个人中心、用户管理、楼盘管理、收费管理、停车登记、报修与投诉管理等功能模块,方便管理员及用户操作。前端采用Vue、HTML、JavaScript等技术,后端使用SSM框架。系统支持远程安装调试,确保顺利运行。提供演示视频和详细文档截图,帮助用户快速上手。
382 17

热门文章

最新文章

  • 1
    除了JDBC,还有哪些常见的数据库访问技术?
  • 2
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数