1. 绪论
1.1. 研究目的与意义
传统的考试方式显而易见存在诸多缺点：(1) 手工出题和阅卷的工作量大，给教师增加负担；(2) 试卷审核和改卷评分过程中出错率高；(3) 学生成绩需要人工录入，不便于管理学生成绩。相较于上述考试方式，在线考试系统根据用户需求自动组卷，同时也给予教师权限去调整自动组卷结果。所有考试客观题内容由系统自动比对，尽可能做到评阅结果准确。根据考生提交的考试结果，汇总考生成绩和试题得分，帮助考生和教师了解学习效果。
本文介绍设计和开发一个在线考试系统，利用在线考试系统的优势，实现在线组卷、自动阅卷和成绩的统计分析，帮助教师更好地完成课程的教学工作，提高教学质量，工作效率也将得到很大提升 [1]。
1.2. 国内外研究现状
对于在线考试系统的研究和开发，目前国内外的一些相关研究机构和大学早已进行了许多探索研究。美国率先开始关于网络考试技术的研究，将计算机模拟考试作为一种辅助考试的手段，并于1983年开始实施。其中著名的思而文公司，开启了计算机化考试模式和远程教育的研究。遍及全球跨一百四十多个国家的两千多个考试中心，支持多种考试类型和语言的优势，使得全球许多知名机构选择思而文为其制定测试内容和测试方式 [2]。
在网络考试技术和模式上的研究，我国起步较晚但发展速度快。上世纪末，我国信息部致力于远程考试系统的开发并取得一定成果。目前，在线考试的形式已广泛应用于英语口语考试、远程教育等诸多场景。
2. 基于Web的在线考试系统关键技术
本章主要介绍了系统使用的相关技术和开发模式，基于Web的在线考试系统使用前后端分离的开发模式。前后端通过HTTP请求进行数据交互，服务端提供接口，前端负责页面内的组织和渲染，系统依靠Node.js平台实现Web应用架构模式。
2.1. Web开发基础技术
2.1.1. HTML5
HTML是万维网的核心标记语言 [3]。HTML最初是被设计为语义上描述科学文档的一种语言。它的整体设计使它能够被调整以描述一些其他类型的文件和应用 [4]。HTML4于1994年成为互联网标准。在2008年正式发布的HTML5技术引入了大量的新特性和新内容。
2.1.2. CSS3
CSS的工作原理是在网页上自定义样式表的选择符，在网页中为元素指定样式，且多个样式定义可以层叠为一个。CSS3是CSS的最新标准。一个主要变化就是W3C决定将CSS3分成一系列模块，如选择器、盒模型、2D/3D转换等 [5]。
2.1.3. JavaScript
JavaScript是一种轻量级、即时编译的弱类型语言 [6]。它基于原型编程，并支持面向对象、命令式和声明式风格 [7]。即时编译指JavaScript无需预先编译，而是将程序代码转化为文本格式交付浏览器进行解释运行，导致程序不够安全。JavaScript弱类型指变量定义无需指定数据类型，变量类型由所得的值类型决定。
JavaScript不依赖于操作系统，仅需要浏览器的支持，因此它具有跨平台、高性能的巨大优势。Ajax使用JavaScript向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，在不需要刷新页面的情况下，就可以产生局部刷新的效果 [8]。
2.2. 渐进式JavaScript框架Vue.js
Vue.js是一套用于构建用户界面的渐进式框架，提供数据驱动的组件和灵活的API，使得MVVM更简单 [9]。MVVM指的是Model-View-View Model，它将View的状态和行为抽象化，实现视图 UI 和业务逻辑的分离。
Vue的核心库只关注图层，采用自底向上增量开发的设计，利用简洁的模板语法来声明式地将数据渲染进DOM [10]。系统管理员端使用Vue开发，业务多关注于数据的增删改查，存在大量重复的代码块。采用组件式开发优势在于Component可以扩展HTML元素，封装可重用的代码；父子组件通信可通过props从父向子单向传递通信，子组件与父组件通过触发事件$emit通知父组件改变数据。
2.3. CSS/HTML框架Bootstrap
Bootstrap是美国Twitter公司推出的基于HTML、CSS、JavaScript 开发的前端开发框架 [11]。
Bootstrap由动态CSS语言Less写成，能够根据设备不同调整CSS。特别地：
1) Bootstrap拥有一个先进的流式栅格系统，能够快速实现响应式布局 [12]。
2) Bootstrap使用许多可重用的JavaScript组件，诸如进度条、弹出框等。
3) Bootstrap支持目前的主流浏览器，跨平台、兼容性较强。
2.4. Node.js平台
Node.js是一个基于Chrome V8的JavaScript运行环境，它使用了一个事件驱动、非阻塞式I/O的模型 [13]。
事件驱动是指“在事务管理过程中处理事务的一种策略，当前时间产生任务则立即调用可用资源，防止事务堆积”。
JavaScript时一种典型的单线程语言，即所有的任务都须在上一任务完成后开始。例如，用户使用I/O操作时，CPU将会一直闲置。为解决单线程带来的性能问题，Node.js使用异步非阻塞式的I/O模型。
3. 基于Web的在线考试系统需求分析
软件需求划分为功能需求、质量需求和约束性需求 [14]。质量需求和约束性需求统称为非功能性需求。本章将从功能性和非功能性需求两方面进行系统需求分析。
3.1. 功能性需求
根据课题主要内容与基本要求，系统应设计学生端、教师端以及管理员端。实现要求的以下功能：1、试题编辑；2、条件设置；3、身份验证；4、自动组卷；5、自动阅卷；6、统计分析。
经过分析和研究，在线考试系统应当实现三类用户的功能需求。面向学生用户，应当允许学生参与班级和考试。对于教师用户，教师除基本的班级管理和资料修改外，能够根据需求自动组卷。对于考生提交的试卷，教师可以查阅考试详细的答题情况，并为考生的主观题打分。为了教学效率的提高，教师可向班级发布一些课程资源或考试资料。管理员用户的主要权限，包括用户信息、试题、试卷、成绩、教学资源等方面的管理。
系统主要的功能可以大致分为用户管理、资源、班级、考试、成绩等内容，功能模块设计如图1。
3.2. 非功能性需求
非功能性需求，即信息系统中保证易用性、可靠性、可扩展性、健壮性的需求要素 [15]。
1) 系统可靠性
在线考试系统为考核学生课程考试设计，系统可靠性必须满足要求，否则将
影响到考试结果的有效性和考试的公平性。保证数据库安全，防止数据泄露和篡改，通过严格区分用户权限、限制用户操作实现。
2) 系统可扩展性
本系统是面向高校课程，可根据需求拓展至多科目。
3) 健壮性
系统在用户操作不当时给出提示和引导，例如：在用户空输入某些必要信息
时，提示用户必须输入内容。当系统或硬件环境发生故障时，不可导致用户已提交的数据丢失。
4) 易用性
对于考生用户，在线考试系统界面和操作应当尽量简洁明了，尽快地参与考
试是考生用户关注的问题所在。因此系统引导页帮助学生完成信息补充后，用户登录主页显示当前的考试列表。突出正在进行中的考试，帮助考生快速进入。
4. 基于Web的在线考试系统总体设计
4.1. 系统设计原则
1) 可用性
系统中可能出现的用户操作不当导致的错误，应当完善处理程序。完善代码逻辑，及时发现和处理故障，提高系统可用性 [16]。
2) 可扩展性
考虑到系统的功能扩展和技术体系的发展趋势，在设计时充分考虑系统的各种输入输出需求，预留各单位标准化接口以便系统扩展。
3) 开放性
本系统针对高校课程开发，在系统功能扩充的趋势下，系统应采用标准数据接口，具有与其他信息系统进行数据交换和共享的能力。
4) 可靠性
系统构成必须采用成熟、先进的软件产品和设备，以此保障系统的可靠性和稳定性。
4.2. 系统架构设计
4.2.1. 体系架构设计
本系统采用浏览器/服务器结构。系统的分层架构为典型的三层架构，即各个功能模块划分为表现层、业务逻辑层和数据访问层 [17]。各层之间采用接口相互访问，并通过对象模型的实体类作为数据传递的载体。其“高内聚，低耦合”思想，使得开发人员更专注于核心业务的开发设计。
表现层是最上层，主要功能是实现系统数据的传入与输出。业务逻辑层的功能是对具体问题进行逻辑判断与执行操作，数据访问层是数据库的主要操控系统，实现数据的增删改查等操作 [18]。具体的系统架构设计如图2。
4.2.2. 业务流程设计
本系统业务流程覆盖组织考试、参与考试、查询成绩、管理资源等多个业务场景。
学生进入系统后，展示当前所在班级的考试列表。在考生参与考试后，提示考试截止时间，若超时则考生答题结果不予提交。考试提交成功后，考生可立即点击按钮弹框将显示客观题成绩，若试卷有主观题，将等待教师批阅。
教师登入系统后，在组织考试中根据考试名、起止时间、难易度、参与班级、试题组成等，自动组织一份试卷。在此过程中，教师可按需调整部分试题。
管理员负责数据库数据的主要操作，通过管理员账户登入后台管理系统，系统通过分页展示大量后台数据。例如学生端和教师端无法新增新的行政班级，此类数据交由管理员处理。
4.2.3. 数据流程设计
本系统数据信息主要包含考试信息、答题信息、成绩信息、班级信息、用户信息等，涉及考试过程的重要数据一般为前四类。对于考试过程，教师组卷完成后，试卷信息从服务端流向客户端。学生提交试卷，实际上是答题信息流向服务端的过程，而教师阅卷，是学生答题信息从服务端流向教师客户端的过程。
图3展示了本系统的主要数据流程。
4.3. 系统功能设计
4.3.1. 考试模块设计
考试模块包含组织考试、考试管理、试卷审阅等功能。
1) 组织考试：教师点击进入组织考试页，选择考试模板，设置难易度、考试名、起止时间、参与班级。服务端根据用户需求完成自动组卷。
2) 教师考试管理：该模块提供试卷的查询操作，前端页面实现分页处理和模糊搜索，可按需查询目标考试。
3) 试卷批阅：该模块针对主观题批阅和成绩复核的需求设计。当试卷包含主观题时，改卷将递交至教师端，由教师完成主观题赋分过程。当试卷需要进行成绩复核时，可通过该页查看学生的详细答卷。
4) 参与考试：学生仅能参与限制时间内的考试。页面客观题下方将展示正确答案和本题得分，帮助考生及时了解试题答题情况。
4.3.2. 成绩模块设计
成绩模块包含学生端成绩查询分析、教师端成绩统计分析和管理员端成绩管理等子模块。
1) 学生端成绩查询：该模块支持学生查询成绩。学生可以在该页面查看考试的基本信息和主客观成绩，并使用echarts图表展示。
2) 教师端成绩查询：该模块实现教师端的成绩查询，包含对试题得分情况的分析。系统将统计所有试题提交记录，计算试题的提交次数、得分率等信息。
3) 管理员端成绩查询：该模块支持管理员对成绩记录的修改和删除。在考试场景中，若成绩有误将交由管理员修改成绩。
5. 基于Web的在线考试系统功能实现
5.1. 考试管理模块功能实现
5.1.1. 学生端考试
学生端考试模块主要实现考试列表、考试参与、考试提交等功能。
1) 获取该学生的考试列表，此处用户经过登录模块身份验证进入操作页面，为保证数据安全性，通过Ajax以异步处理方式与数据库交互，核验数据库中是否存在该用户。核验成功后将用户名使用LocalStorage保存至本地。考试页再进行后续处理，包括日期格式处理和考试状态判断。最终呈现效果如图4。
Figure 4. Student end exam list rendering
图4. 学生端考试列表效果图
同时页面顶部帮助用户按照条件查询考试，按名称查询使用模糊搜索和键盘监听等技术，使用match函数匹配输入内容和表格字符，符合条件行显示，不匹配则隐藏行。关键代码如下。
function onSearch(obj){
setTimeout(function(){
var storeId = document.getElementById('examtable');
var rowsLength = storeId.rows.length;
var key = obj.value;
var searchCol = 1;
for(var i=1;i
var searchText = storeId.rows[i].cells[searchCol].innerHTML;
if(searchText.match(key)){
storeId.rows[i].style.display='';
}else{
storeId.rows[i].style.display='none';
}}},200);}
2) 考试参与：学生参与开放的考试，此处进入新的考试详情页面。该详情页展示试卷的内容，实现方式为使用jQuery clone方法克隆模板，并将相应数据填入对应元素。
3) 考试提交：该模块实现思路为按类型获取各表单的输入内容，使用stringfy方法统一处理并提交至服务端，服务端预先导入标准答案，进行结果比对。客观题立刻返回考核结果，主观题则需要教师批阅后更新。
5.1.2. 教师端考试
教师端考试管理模块包含组织试卷、试卷管理和批阅试卷三大模块。
1) 组织试卷：该模块实现思路为根据用户表单输入，筛选数据库符合条件的试题构造出符合期望的试卷内容。为了控制试卷地分值，系统提供三套模板供教师选择，确认组卷后，组卷参数为试卷名、起止时间、难度、模板编号、参与考试班级。根据输入参数，随机抽取题库中指定数量和难度的试题。
2) 试卷管理：该模块包含试卷试题调整和试卷编辑、删除，具体实现思路为：为试卷试题添加删除按钮绑定至删除试题对象，事件发生后发送请求至服务端，执行删除sql语句。
3) 试卷批阅：该模板实现教师对学生主观题的赋分过程。实现思路为：页面请求教师任教班级的成绩列表，使用CSS字体颜色突出未打分的成绩记录，进入详情页通过答题卷输入得分。通过form表单提交，服务端进行检验分数是否超过限制、是否在合理区间内，检验通过后执行sql update，包括主观题得分更新以及总得分更新。
5.1.3. 管理员端考试管理
该模块主要实现对数据库考试表的快速处理。该模块使用v-model实现双向数据绑定，data 中的数据与输入框同步变化。页面输入框组使用el-form实现表单输入，并将用户输入绑定至data，抽取编辑框、新增框、顶部导航为复用组件，简化开发过程。后台管理系统请求均使用axios实现，包括定义拦截器和进行错误处理。具体实现效果如图5。
Figure 5. Administrator end exam management rendering
图5. 管理员端考试管理效果图
5.2. 成绩管理模块功能实现
5.2.1. 学生端成绩管理模块
学生端成绩管理主要包含成绩记录查询和答题详情查询两个部分，实现思路为：根据学生账号从服务端获取学生所有成绩记录，遍历返回的JSON数据将成绩推入数组，赋值给echarts折线图中series属性的data字段，实现图表数据动态变化。
5.2.2. 教师端成绩管理模块
该模块支持教师查询学生成绩信息，主要包含成绩记录分页处理，试题错误率统计，Echarts图表处理等。为了减轻网络负载，分页处理在服务端进行。按考试查询，则监听select的value值变化。具体实现效果如图6。
Figure 6. Teacher end query results by examination rendering
图6. 教师端按考试查询成绩效果图
5.2.3. 管理员端成绩管理模块
管理员端成绩管理主要对数据库成绩记录作删改查等操作，具体实现方式基本同5.1.3管理员端考试管理。
6. 总结
本文论述了基于web的在线考试系统设计与实现，主要介绍了需求分析、总体设计以及功能实现等内容。面向考生、教师及管理员的在线考试系统及后台管理系统，基于B/S架构，实现了在线组卷、考试参与、自动阅卷、统计分析、班级及试卷试题维护等功能。权限明确，便于维护和管理，基本满足了在线考试的需求，可用于随机测验、期中期末测验。相较于传统的考试方式，节约纸张，大大减少了教师出卷、判卷的工作量，更对习题和考试作归纳整理。既能帮助学生掌握学习情况，同时提高了课程考试评估的科学性和准确性。与功能单一的考试平台不同，系统包含课程资源、教学班级管理等模块，基本能够满足日常教学需要。
基于Web的在线考试系统仍存在可优化的方面和可扩展的功能，例如组卷算法、试题分类细化、新增模拟考试等等，仍需进行不断迭代和优化。关于组卷算法，如需学生试卷不一致，采用随机组卷，如需试卷知识点分布合理，采用遗传算法；针对课程特点，可对题库进行进一步细化，例如添加试题的考察点、来源课程章节，组卷时根据需求组织章节测验，考察学生一阶段学习情况，进一步提升组卷质量。系统统计分析学生考试记录，可通过分析结果抽取学生薄弱点和易错题，组织模拟考试供学生练习。