本系统存在三个不同的角色,教师,管理员,学生三种用户,此系统是基于vue+springboot实现的前后端分离,用户权限校验通过JWT生成token令牌发放到用户,并根据令牌对用户的身份合法性进行校验。
学生用户在注册登录之后,可以在本系统进行在线的考试,考试可由教师和管理员进行布置并设置考试权限(公开,密码),考试题型分为 单选、多选、判断、简答题,并支持题目附带配图。考试过程中需开启摄像头进行考试,系统会自动抓拍考生实时考试状态。
参加考试后的学生用户,在提交试卷后进入考试结果页面,页面会自动核对学生用户的逻辑题的对错,对于简答题需要老师或者超级管理员进行批阅。对于学生用户参与的考试,学生用户可以查看到考试的详情并可以查看到自己所错的逻辑题。
学生用户在题库模块中可以进行题目的功能训练,训练模式分为,顺序练习,随机练习,也可以根据题型练习(单选,多选,判断)。用户答题时会实时判断正确与否,并有错题解析功能。
超级管理员和教师可以对本考试系统已有的题库进行管理,实现对题库信息的CRUD操作
教师和系统管理员用户有权限对本系统的所有试题进行操作,本系统试题支持复杂类型的题目,考试题目支持多插图,选项答案支持单插图功能。
教师和系统管理员用户有权限对系统存在的考试进行操作,本系统考试支持公开考试和密码口令考试,并可以对考试进行禁用也可以在设置考试时间段,对于考试可以进行很便利的进行组卷,系统内置两种组卷模式,题库组卷和自由选题组卷。
对于本系统中存在的复杂考试的题目,可以又对应的老师进行批阅,此系统的逻辑题无需老师用户进行批阅,老师的工作仅仅是批阅简答题这种无准确答案类型的题目,极大地减轻了老师用户的工作量
本系统针对每一次考试进行数据统计和报表,让使用本系统的老师用户能够直观的了解到每一次考试人员的进步。
超级管理员可以对注册本系统用户的进行授权,并拥有操作一切用户的权限。
SpringBoot
Mybatis-plus
MySQL 5.7
Vue全家桶
ElementUI
Redis
Swagger
阿里云OSS
Log4j
前后端分离
数据可视化
实时抓拍
多角色登录
补充:改成绩界面基本调用学生模块构造而成,增设了打分一栏,将提交按钮改为打分按钮,并在右侧提供返回键用以回退到学生状态界面
学生状态界面
css中的landing、offline、testing、submited分别表示登录、离线、正在测试、提交答案四个状态,在服务器端由express模板渲染发送到浏览器上
改成绩界面
流程:教师登录->创建 modal_teacher 模块->返回 modalBox.init() 函数->init 函数主要实现
studentinfo 点击事件
添加打分栏
将提交按钮改为打分按钮
回退按钮,按下回退到学生状态界面
我先把题都放在页面上,接着用jquery来控制显示.<script>
$(function(){
$('[id=^Question]').hide()//全部隐藏
$('[id=^Question]').eq(0).show()//显示第一题
$('[id=^Question]').each(function(){
$(this).children().click(function(){ //为每道题的每个选项绑定click事件
//如果有当前点击的被选中且有下一题的情况下显示下一题
if($(this).attr('checked') &&$(this).parent().next().is('[id=^Question]')){
$(this).parent().next().show()
}
})
})
})
</script>
<div id="Question1">
<input type="radio" value="A" name="Question1" />A
<input type="radio" value="B" name="Question1" />B
<input type="radio" value="C" name="Question1" />C
<input type="radio" value="D" name="Question1" />D
</div>
<div id="Question2">
<input type="radio" value="A" name="Question2" />A
<input type="radio" value="B" name="Question2" />B
<input type="radio" value="C" name="Question2" />C
<input type="radio" value="D" name="Question2" />D
</div>
...
<div id="QuestionN">
<input type="radio" value="A" name="QuestionN" />A
<input type="radio" value="B" name="QuestionN" />B
<input type="radio" value="C" name="QuestionN" />C
<input type="radio" value="D" name="QuestionN" />D
</div>