计算机毕业设计之SpringBoot+Vue.js在线考试学习系统

JavaScript017

计算机毕业设计之SpringBoot+Vue.js在线考试学习系统,第1张

用户管理、角色管理、题库管理、试题管理、考试管理、在线考试等功能,考试流程完善。

本系统存在三个不同的角色,教师,管理员,学生三种用户,此系统是基于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>