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

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

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;
e6c6f011568cb1b537e87437695d6bd1.png

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

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

题库管理界面5d1e834edabc85e9656a905ee4f10856.png

试题创建和编辑界面c02458053c5c38c8850d3cc5553c5154.png

试卷管理界面c3450fc76da52a6cdb96e65f1d66a403.pnga08b57e107ea76b342381498f0f8e47f.png

试卷试题编辑界面5a002a52c12c38cf2f68e408be4ea5a3.png

考试统计界面7ae1e0e71644e49ff8bed618443df7e4.png

在线考试界面fa7e45d91cf973f566e3ce0ba7d746f9.png

答卷详情页面05c434dcf96acde1ca15d537351db69f.png

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

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

- END -

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354514.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jgroups传输消息_使用JGroups进行ElasticMQ消息复制

jgroups传输消息ElasticMQ是一个消息服务器,具有Scala,Java和与Amazon SQS兼容的接口。 它通过跨服务器群集复制消息来支持有保证的消息传递,并通过日志记录实现消息持久性。 消息复制是ElasticMQ的核心功能之一。 但是,如果您看一…

使用 Element 组件搭建在线学习的课程卡片设计

假如我们要做一个在线课程学习的系统,其中我们需要做的一个功能就是课程信息流的一个展示,以等高卡片列表或者瀑布流的方式呈现。首先我们来罗列下这个卡片内应该包括哪些信息点:课程名称课程简介分类信息课程评分等级课程文件课时观看学习人…

12个很棒的Spring数据教程来启动您的数据项目

Spring Data的任务是为数据访问提供一个熟悉且一致的,基于Spring的编程模型,同时仍保留基础数据存储的特​​殊特征。 它使使用数据访问技术,关系和非关系数据库,map-reduce框架以及基于云的数据服务变得容易。 这是一个总括项目…

python多线程编程(3): 使用互斥锁同步线程

问题的提出 上一节的例子中,每个线程互相独立,相互之间没有任何关系。现在假设这样一个例子:有一个全局的计数num,每个线程获取这个全局的计数,根据num进行一些处理,然后将num加1。很容易写出这样的代码&am…

如何防止水印被恶意删除或者隐藏?

继上篇 Vue3 实现网页背景水印功能 我们了解了常见的网页水印功能是如何实现的,懂原理的都知道水印是通过在网页中添加代码绘制 DOM 元素覆盖在原有的网页上而来的,一旦你打开浏览器中的元素审查,可以通过删除元素或者在元素的样式上操作属性…

jmc线程转储_如何分析线程转储– IBM VM

jmc线程转储本文是我们的线程转储分析系列的第4部分,它将为您提供什么是IBM VM的JVM线程转储以及您将找到的不同线程和数据点的概述。 您将看到和学习​​到,IBM VM Thread Dump格式是不同的,但是提供了更多现成的故障排除数据。 在这一点上&…

Java 8:使用交替接口公开的类型安全地图生成器

动态展示您的课程 当我是Java新手时,我记得当时想过应该有一种方法可以删除或隐藏我不想公开的类中的方法。 就像用private方法或类似方法覆盖public方法一样(哪种情况是不可能的,也不应该是不可能的)。 显然,今天&…

nodejs面试题

1、为什么用Nodejs,它有哪些缺点? 事件驱动,通过闭包很容易实现客户端的生命活期。不用担心多线程,锁,并行计算的问题V8引擎速度非常快对于游戏来说,写一遍游戏逻辑代码,前端后端通用当然Nodejs也有一些缺点…

sts-bundle的使用_使用WS-Trust / STS采样器扩展JMeter

sts-bundle的使用JMeter没有对WS-Security或WS-Trust的任何内置支持,这使我为JMeter开发了此STS采样器–可以在负载测试STS时使任何人的生活变得更好。 首先,您需要拥有Apache JMeter发行版。 我正在使用v2.7。 然后,您可以从此处下载sts.sam…

001_jdk配置

配置JAVA_HOME,CLASSPATH,PATH 其中JAVA_HOME必须的 JAVA_HOMEE:\java\jdk1.8.0_77 CLASSPATH(告诉java程序运行时,你的类或者类库在哪里) .; E:\java\jdk1.8.0_77\lib\dt.jar;E:\java\jdk1.8.0_77\lib\tools.jar;E:\java\jdk1.8.0_77\jre\lib\rt.jar 改成变量 .;%J…

python -- join()

python -- join()pythonjoinos月似当时,人似当时否?总 在 python 中,一共有两个 join 方法,一个是 str.join(),另一个是 os.path.join() ,这里只了解前一种 str.join(iterable) 官方文档 Return a string which is the…

Spark数据倾斜解决方案(转)

本文转发自技术世界,原文链接 http://www.jasongj.com/spark/skew/ Spark性能优化之道——解决Spark数据倾斜(Data Skew)的N种姿势 发表于 2017-02-28 | 更新于 2017-10-17 | 本文结合实例详细阐明了Spark数据倾斜的几种场景以及对应的解…

JavaParser入门:以编程方式分析Java代码

我最喜欢的事情之一是解析代码并对其执行自动操作。 因此,我开始为JavaParser做出贡献,并创建了两个相关项目: java-symbol-solver和Effectivejava 。 作为JavaParser的贡献者,我反复阅读了一些非常类似的问题,这些问…

GoldenGate Logdump基本使用

Logdump是GoldenGate复制软件中附带的一个工具软件,在OGG的目录下可以找到。这个工具主要用于分析OGG生成的队列文件,查找记录、统计队列文件中的数据等。 在OGG安装目录下执行logdump.exe or ./logdump即可进入命令行。 开始查找记录之前,先…

.bam.bai的意义_业务活动监视器(BAM)2.0带来的革命

.bam.bai的意义生产兼具精益和企业价值的中间件是一项艰巨的工作。 它要么不存在,要么需要创新的思维(很多),并且需要在实现中反复进行。 业务风险很大,但是如果您做对了,它就会使您领先于其他任何公司。 这…

数据结构和算法之排序五:选择排序

我们上一篇谈到了冒泡排序,其实我也说了,这两个排序方式何其相似,如果掌握了冒泡排序再来进行选择排序的理解我觉得完全没有太大的问题。那么什么叫做选择排序呢?我们可以理解为矮子里面挑高个,比如说呀有一个富翁来到…

Visual Studio Code使用问题

1、打开vscode黑屏 右击vscode快捷方式–>属性–>兼容性—>兼容模式打钩 重启vscode就可以了。 2、vscode终端没有显示路径,不能输入 显示如下图 则关闭VS Code ,右键单击VS Code 图标,选择属性->兼容性,取消勾选 已兼容模式运…

Java社区调查结果:74%的开发人员希望减少详细程度

一个新的JDK增强建议(JEP)在Java社区中风起云涌:JEP286。该建议建议在Java的未来版本中引入局部变量类型推断,以简化Java应用程序的编写。 在下面的文章中,我们将解释它的含义以及它将如何影响您的代码。 新帖&#…

coherence安装_Oracle Coherence:分布式数据管理

coherence安装本文介绍如何使用Oracle Coherence提供分布式(分区)数据管理。 在下面的示例应用程序中,创建了一个名为OTV的新集群,并且在该集群的两个成员之间分配了一个名为user-map的缓存对象。 二手技术: JDK 1.6.…

JavaFX技巧来节省内存! 属性和可观察物的阴影场

在 JavaFX的世界中, Properties API允许UI开发人员将值绑定到UI控件。 这种功能非常容易,但是当对象模型经常使用属性时,应用程序可能会很快耗尽内存。 我通常会编写两个单独的对象,例如pojo类和表示模型对象。 此技术通常在基于S…