基于B/S的在线考试系统设计

摘 要：针对专业培训、远程教育、（分类）招生考试等在线考试系统种类繁多、功能复杂、操作不便，在使用过程中有兼容性、可维护性和安全性等问题的现状，采用H5、JS、PHP、MySQL等技术设计并开发了基于B/S的在线考试系统，实现了题库管理、随机自动组卷、在线考试、自动评分等功能。通过主流浏览器即可访问该系统，系统能提高教学考核工作的效率，降低高校管理中的资金投入和运营成本。

关键词：在线考试系统；系统设计；H5；PHP；MySQL

中图分类号：TP311.5 文献标识码：A 文章编号：2096-4706（2024）13-0121-05

Design of Online Examination System Based on B/S

CAI Bofeng

（Taizhou Polytechnic College， Taizhou 225316， China）

Abstract： In response to the diverse types， complex functions， and inconvenient operation of online examination systems such as professional training， remote education， and （classified） enrollment exams， as well as compatibility， maintainability， and security issues during use， a B/S-based online examination system is designed and developed using technologies such as H5， JS， PHP， and MySQL， achieving functions such as question bank management， random automatic test paper generation， online examination， and automatic scoring. The system can be accessed through mainstream browsers， which can improve the efficiency of teaching and assessment work， and reduce the capital investment and operating costs in university management.

Keywords： online examination system; system design; H5; PHP; MySQL

0 引 言

虽然大多数高校建设了网络教学平台，但一般是专门针对专业人才培养方案规定的具体课程提供教学服务，可以解决在校学生线上教学、混合式教学所需的教学平台问题，也可以进行在校学生的线上考试。但是，各个高校都有一定的针对社会人员的专业培训、远程教育、（分类）招生考试等教学活动，这种阶段性或临时性的与专业人才培养方案不相关的教学活动考试往往以纸质试卷为载体进行线下考试，其考试全过程费时、费力、易出错且工作效率低；有些高校购买了在线考试系统，但目前市面上的在线考试系统存在种类繁多、功能复杂、操作不便，在使用过程中兼容性、可维护性和安全性等不足的问题，并且根据系统开发采用的技术和系统功能强弱，购买费用也不尽相同。这些系统有基于C/S模式的，也有基于B/S模式的[1]，基于C/S模式的系统一般采用Java技术开发，但存在开发成本高、安装烦琐、维护不方便等问题；基于B/S模式的系统一般采用HTML4、CSS2、ASP.NET、JSP、PHP等技术开发，开发成本相对低一些，但系统前端页面往往存在浏览器兼容性不足等问题。随着H5技术、jQuery框架技术、Ajax技术等技术的推出和不断更新，不但能更好地开发出功能齐全、界面友好、操作简便、兼容性好、易于扩展、易于维护、安全性好的系统，还有效降低系统的开发成本，提高系统的兼容性和可维护性等性能[2]。有鉴于此，本文介绍了基于H5、jQuery、Ajax、PHP等技术设计开发的在线考试系统，为专业培训、远程教育、（分类）招生考试，以及其他无网络教学平台的学校的在线考试等提供服务，提高教学考核工作的效率，也降低高校管理中的资金投入和运营成本。

1 系统分析

在线考试模式要求，只要在计算机网络平台上通过在线考试系统组建培训教学等考试用试题库，再通过在试题库中随机抽题并自动化组卷，然后让考生参加测试，系统自动完成客观题评阅并发布成绩供教师查看和考生查询。通过随机组卷和自动阅卷可以提供更全面、客观的教学效果评价方式，这也反过来督促教师和考生更扎实细致地开展教学工作和学习。通过实际调查和需求分析，提出在线考试系统有以下设计要求：

1）分角色统一管理系统的各个用户（管理员、教师和考生），统一增减考生和教师信息，提高安全性。考生登录前端考试系统，参加教师布置的考试、查询自己的考试成绩。教师登录后台教师管理系统，维护科目和试题库、创建考试和查看考试结果。管理员登录后台管理系统，管理考生和教师账号并分配用户权限。

2）提供科目管理和章节管理功能，并能针对多个考试科目和多个章节模块进行题库管理，可以动态增减题目。

3）根据指定科目针对不同考生按照出题数量要求实现自动随机组卷以防考生作弊功能。

4）实现考试时间倒计时功能，使考生实时了解考试剩余时间。

5）客观题自动评分并提供试卷和成绩的实时查询显示。

6）系统基于B/S架构设计开发，使考生随时随地进行考试。系统基于HTML5、CSS3、JavaScript、Jquery等技术实现在各大主流浏览器上的兼容使用，并通过PHP、MySQL等后台开发技术实现系统功能、降低开发成本。利用Ajax技术实现数据的各种异步更新操作，提高用户体验。

7）系统界面设计美观大方、操作便捷，系统运行稳定、安全可靠。

2 系统架构设计

B/S（Browser/Server）架构即客户端浏览器、Web服务器和数据库服务器，是WWW方式下实现信息访问、共享的一种通用体系结构，是当今流行的Web软件开发模式，具有客户端无须安装、占用内存小、服务器端反应迅速、使用灵活方便、运维成本低等特点，使用时通过主流浏览器访问，不限时间地点、设备类型、访问人数，其完全能够满足在线考试系统的相关要求。系统后台数据库采用MySQL数据库。系统架构示意图如图1所示。

3 系统功能设计

由于系统涉及三种不同角色的用户：考生登录前端考试系统参加考试、查询成绩；教师登录后端教师管理系统维护科目、试题库、创建考试、查看结果；管理员登录后端考试系统，管理用户账号、分配用户权限[3]，因此系统功能模块结构设计如图2所示。

各个功能模块具体设计如下：

1）考生子系统。登录考场：教师创建某个科目的考试并设置好考试时间后，考生登录系统自动进入定时刷新的考场列表，开考时间一到系统就会显示“开始考试”按钮，考生单击开始答题。在线考试：考生一进入考场系统就自动按规则抽取试题，浏览器上显示试题和考试计时器。考试结束前10分钟系统会提示考试剩余时间，考生可提前交卷，或者等到考试结束系统自动交卷。交卷后系统自动进行客观题阅卷。查询成绩：考生及时查看考试用时和成绩。

2）教师子系统。教师的主要工作是建设试题库，创建考场和监考[4]。其主要功能为科目管理：管理考试科目，每个考试科目有专用试题库。章节管理：试题库按章节组织，添加好科目后要先设置科目包含的各个章节，每个章节可以设置抽题比例，根据抽题比例随机抽取题目。试题库管理：试题按章节分类，包括单选题、多选题和判断题。根据题型输入题干、选项、参考答案和分值。创建考试：创建一次具体的考试，指定考试科目、考试开始时间和时长，设定抽取的各题型题数。考场管理：显示某次考试考生的完成情况，是否开始答题、是否已经交卷等。浏览考试结果：教师浏览某次考试的成绩、用时，并可查看考生答卷[5]。

3）管理员子系统。管理员负责对考生、教师身份、系统选项等进行管理。其主要功能包括：教师管理：用于管理教师账号、密码等。班级管理：用于管理班级信息。考生管理：用于管理考生登录账号和密码。

4 数据库设计

使用主流的MySQL数据库，用于存放课程、章节、试题、考场、试卷、用户等信息[6-7]。由于课程由章节构成，而每个章节中又包含不同的试题；考试应可多次组织，每次考试就是一个考试/考场记录，每次考试每个考生都有一张试卷，每张试卷由多条题目构成。

为便于开发维护，每个数据表都统一设置主键ID自增字段、设置删除标志字段DeleteFlag以支持删除数据的恢复（值为1表示逻辑删除）。主要数据表包含的字段如下：

1）课程信息表Course包含：ID、课程名称、排列序号、备注、删除标志。

2）章节信息表Chapter包含：ID、课程ID、章节名、排列序号、选题比例、备注、删除标志。

3）试题信息表Question包含：ID、课程ID、章节ID、题型、题干、选项A、选项B、选项C、选项D、参考答案、分值、删除标志。

4）考场信息表Exam：ID、课程ID、考试名称、班级ID、开考时间、考试时长、单选题数、多选题数、判断题数、创建教师ID、创建日期、备注、删除标志。

5）试卷信息表Paper包含：ID、考场ID、考生ID、开始时间、提交标志、提交时间、总分、删除标志。

6）试卷题目表PaperQuestion包含：ID、试卷ID、题目ID、考生答案、得分、正确标志、删除标志。

7）用户信息表Users包含：ID、用户类型、班级/单位ID、学号或工号、姓名、登录账号、密码、最近登录时间、登录次数、备注、删除标志。

5 系统详细设计技术要点

5.1 公共头部和尾部设计

系统的每个页面都要求完成一些类似操作：

1）PHP网页要在浏览器中显示，最新发给浏览器的内容是HTML头部的信息，每个网页的头部信息几乎是一致的。

2）为了校验用户身份，通常是在登录页面中将当前用户的ID信息保存在Session变量中，系统采用LoginUserld来保存用户ID，在登录后的页面中检查Session变量是否存在。

3）需要操作数据库的公共函数库、常规自定义函数库和控件库等。

4）需要添加常规的CSS和JavaScript脚本的引用声明。为提高开发效率，将这些公共的部分汇集到一个头文件Header.php中。

由于数据库使用完需关闭，因此每个页面包括公共尾部文件Footer.php，代码如下：

<？ DBClose（）;？>

<iframe id="HiddenFrame" name="HiddenFrame" height="0"></iframe>

</body></html>

其中iframe是个隐藏框架，用于隐式表单提交，将表单的target属性设为HiddenFrame后，页面提交就不会在当前页面中或打开新页面，将操作结果信息直接通过对话框呈现给用户，让用户感觉上是在操作桌面应用程序，提高用户体验。

5.2 用户登录模块设计

由于系统的各类用户采用同一用户表Users保存用户信息，因此系统设计一个统一入口登录进入[8]。由于登录表单不涉及Session变量，故无须添加Header.php，直接采用静态代码即可。登录信息提交给后台身份校验代码：Session初始化完成后，调用公共函数库的GetParm（）函数获取输入信息，用以过滤掉特殊字符，以防止SQL注入等攻击，这有效提高了系统安全性。系统用md5方式对用户密码进行加密保存，防止密码明文泄露。登录工作流程如图3所示。

5.3 系统框架主页面设计

用户登录后进入框架式的公共主页面，主页面包含头部菜单栏和主体内容两大部分，呈上下排列，通过最新的H5语义化标签和弹性布局排版技术使其满屏显示。主体内容部分采用iframe技术实现，这样内嵌页面不受外面框架页面干扰，以后每个内页都像一个新页面一样设计即可。

5.4 分页功能设计

后台系统对信息维护的模块都有分页显示功能。因输出全部记录将会影响系统显示效率，更易造成数据库死锁，为此采用分页显示，并设计分页获取数据PageQuery（$sql）和分页导航PageShow（$Parm=""），存放到Pager.php文件中便于引用。其中$Parm参数是用于传递额外参数，比如用户在查询框中输入的查询条件，由于HTTP协议的无状态特征，分页时需将查询条件附加到URL参数中传递给下一个显示页面。PageQuery（$sql）和PageShow（$Parm=""）工作流程图如图4、图5所示。

5.5 考场模块设计

考生登录后系统将根据Session中的当前用户ID变量LoginUserID查询试卷信息表Paper，并在“我的考试”页面中显示其考试记录即考场。但是，当某场考试未开始时，系统会在操作栏显示“考试还未开始”，而当开始考试时间到则要显示“进入考试”链接，因此页面要不断刷新。如果采用整个页面刷新那么将会出现页面抖动，严重影响用户体验，为此采用Ajax局部刷新技术：在页面中插入一个div容器用于显示考场列表，系统只对该div区域进行刷新，从而避免抖动。局部刷新可采用jQuery的load方法，以Ajax方式在后台启动下载参数url指定的页面内容，并将此页面内容赋给div容器。

5.6 自动组卷模块设计

在创建考试时设定组卷相关的参数，如考试科目、每个章节的抽题比例、每个题型的抽题数等，自动组卷就是根据这些参数从试题库中随机抽取题目，且不出现重题[8]。抽题过程是先按题型分类，再按章节分类获取可选的题号集合，并计算每个题型每个章节的抽题数，然后通过生成随机数，从题号集合中挑选题目，选中后从待选集合中移除，直到选满或待选集合为空，如图6所示。

5.7 考试时间提醒功能设计

在考生考试界面添加一个隐藏域<input type=

"hidden" id="EndTime"/>用于保存当前考试结束时间，以及一个div标签<div id="TimeBox"></div>用于显示剩余时间，并采用前端定时器setInterval（）脚本每隔1秒定时刷新来提示剩余时间，如果剩余时间小于15分钟那么弹出对话框提醒考生，当考试结束考生未交卷时系统将强制交卷[9]，如图7所示。

5.8 自动阅卷模块设计

考生交卷时系统会检查考生是否是按时或提前提交了试卷、是否重复交卷，并校验考生身份[10]。系统对每个题目进行答案比对后将比对结果和得分值写入试卷题目表PaperQuestion中，并计算总成绩，总成绩将根据试卷得分和满分折算成百分制保存到试卷信息表Paper中，并记录交卷时间、设置交卷标志，然后，自动返回考场列表页面，此时考生可查看考试成绩。

6 运行测试

系统开发完成后，在安装有PHP7.3+Apache2.3+

MySQL 5.7以上版本或集成运行环境phpStudy 8.0（WAMP）的服务器上运行，客户端使用Chrome、IE、Firefox等主流浏览器操作。运行时，先以管理员身份登录系统添加教师和学生，再以教师身份登录，添加维护课程、章节及抽题比例、章节的试题及分值，接着创建考试，即设定各种题型的试题数量和考试时间。然后以考生身份登录，当开考时间到、考生进入考场后，系统自动按规则抽取试题组卷，并通过浏览器显示试卷和计时器，考生完成考试交卷后，系统自动完成客观题评阅并发布成绩，此时教师和考生可查阅试卷和成绩。

7 结 论

由于该系统安装在服务器上，因此使用时客户端只需通过主流浏览器即可正常访问，考生可随时随地进行考试。系统界面操作简便、兼容性、安全性和用户体验好。系统投入使用必将极大方便专业培训、远程教育、（分类）招生考试、甚至其他无网络教学平台的学校的在线考试课程考试等在内的在线考试，能有效提高教学考核的工作效率。

参考文献：

[1] 严红红，刘力力.基于过程管理的在线考试平台研究与设计 [J].现代电子技术，2022，45（24）：7-10.

[2] 郭敏.基于QT的在线考试系统设计与实现 [D].成都：电子科技大学，2020.

[3] 许家伟.基于JSP的在线考试系统的设计与实现 [J].现代信息科技，2023，7（8）：36-39.

[4] 宋巍.基于B/S构架的在线考试系统设计与研究 [J].电大理工，2021（2）：18-20+25.

[5] 任焕海.基于B/S架构的在线考试系统设计与实现 [J].现代信息科技，2021，5（22）：13-16.

[6] 李慧新，孙建竹，包文莉.基于需求分析的职业院校在线考试系统设计开发研究 [J].辽宁科技学院学报，2022，24（4）：20-22+26.

[7] 杨洲.基于B/S模式的智能考试系统的设计与实现 [D].阜阳：阜阳师范大学，2022.

[8] 刘昌华，班鹏新.基于Java技术的网上考试系统 [J].武汉工业学院学报，2003（2）：40-42.

[9] 石彬.计算机基础在线考试系统的设计与实现 [D].成都：西华大学，2016.

[10] 李芳.中职学校在线考试系统的设计与实现 [J].现代信息科技，2022，6（24）：134-137.

作者简介：蔡伯峰（1967.09—），男，汉族，江苏泰州人，教授，计算机工程系主任，硕士，主要研究方向：软件开发、职业教育与物联网应用技术。