Online examination system based on SpringBoot+vue - taking computer network as an example, you can enter the question bank by yourself
1. Project Introduction
With the rapid development of information technology, the education industry is facing tremendous changes and challenges. In order to adapt to the needs of the current era, we have developed a modern online examination system, aiming to provide an efficient, convenient and safe examination environment, and bring better examination experience and teaching management to students and teachers.
Our online examination system adopts an advanced technical architecture, in which the back-end uses Spring Boot and the front-end uses Vue2 and ElementUI. At the same time, as the database, we chose MySQL to ensure the reliability and stability of the data.
The system provides comprehensive functional modules, covering student management, teacher management, question bank management, exam management, messages, online exams and performance statistics. The student management module includes the functions of entering, querying and modifying student information. The teacher management module provides functions for adding and deleting teacher information. The question bank management module allows teachers to add and view questions. The exam management module supports the creation and modification of exam plans. As well as deletion and other operations, the message function facilitates communication between students and teachers, while the online examination module provides students with a convenient way to answer questions and submit papers online and provides automatic scoring. The score statistics module helps teachers to conduct comprehensive statistics and analysis of students' test scores and provide effective reference for teaching.
2. Development environment
| development environment | Version/Tool |
|---|---|
| Basic environment | Jdk1.8、node.js14 |
| development tools | IntelliJ IDEA、WebStorm |
| operating system | Windows 10 |
| memory requirements | 8GB or more |
| Browser | Firefox (recommended), Google Chrome (recommended), Edge |
| database | MySQL 8.0 (recommended) |
| Database tools | Navicat Premium 15 (recommended) |
| project framework | Backend SpringBoot, frontend ElementUi |
3. Project technology
Backend: SpringBoot, MybatisPlus, MySQL
前端：Vue2、ElementUi、vue-router、vuex、JavaScript
4. Functional structure
Student management function : The student management module allows students to modify and add personal information to ensure timely updates of student information. The student login function provides students with convenient access, allowing them to easily view exam plans, take online exams, and check personal exam results at any time.
Teacher management function : The teacher management module provides teachers with personal information management functions. Teachers can modify and add their own information at any time. Through the teacher login function, teachers can view the exams and classes they are responsible for, modify and delete exams, and achieve comprehensive management of teaching affairs.
Question bank management function : The question bank management module provides teachers with a convenient and fast function to add test papers to the question bank, and supports the entry of multiple question types. Teachers can view existing question banks for reference when composing papers. At the same time, the online test paper composing function can automatically generate test papers as needed, reducing the workload of teachers.
Test management function : The test management module supports the addition, modification and deletion of test plans, and teachers can make flexible arrangements according to learning progress and course needs. The test modification function also allows teachers to adjust the test arrangement in time when there is a change, so as to ensure the smooth progress of teaching.
Score query function : The score query function allows students to conveniently query their test scores, and the test score statistics function can provide teachers with a more comprehensive analysis of student scores, assisting in teaching improvement and personalized tutoring.
Online test client : The online test client provides students with a convenient online test experience. Students can view the test plan on the client terminal, take the online answer test on time, and quickly obtain test results through the automatic scoring function. The client also supports the message function, and students can ask questions or give feedback to teachers to promote effective communication between teachers and students.
5. Running screenshots
Exam Schedule View:
Online Exam:
Submit an exam:
Check exam results:
Message board:
log in page:
Exam administration:
Question bank management:
Teacher management:
Student management:
message:
Exam score statistics:
6. Function realization
Front-end obtains current exam information
getExamData() {
//获取当前试卷所有信息
let date = new Date()
this.startTime = this.getTime(date)
let examCode = this.$route.query.examCode //获取路由传递过来的试卷编号
this.$axios(`/api/exam/${
examCode}`).then(res => {
//通过examCode请求试卷详细信息
this.examData = {
...res.data.data} //获取考试详情
this.index = 0
this.time = this.examData.totalScore //获取分钟数
let paperId = this.examData.paperId
this.$axios(`/api/paper/${
paperId}`).then(res => {
//通过paperId获取试题题目信息
this.topic = {
...res.data}
let reduceAnswer = this.topic[1][this.index]
this.reduceAnswer = reduceAnswer
let keys = Object.keys(this.topic) //对象转数组
keys.forEach(e => {
let data = this.topic[e]
this.topicCount.push(data.length)
let currentScore = 0
for(let i = 0; i< data.length; i++) {
//循环每种题型,计算出总分
currentScore += data[i].score
}
this.score.push(currentScore) //把每种题型总分存入score
})
let len = this.topicCount[1]
let father = []
for(let i = 0; i < len; i++) {
//根据填空题数量创建二维空数组存放每道题答案
let children = [null,null,null,null]
father.push(children)
}
this.fillAnswer = father
let dataInit = this.topic[1]
this.number = 1
this.showQuestion = dataInit[0].question
this.showAnswer = dataInit[0]
})
})
}
Core code of automatic scoring method
commit() {
//答案提交计算分数
/* 计算选择题总分 */
let topic1Answer = this.topic1Answer
let finalScore = 0
topic1Answer.forEach((element,index) => {
//循环每道选择题根据选项计算分数
let right = null
if(element != null) {
switch(element) {
//选项1,2,3,4 转换为 "A","B","C","D"
case 1:
right = "A"
break
case 2:
right = "B"
break
case 3:
right = "C"
break
case 4:
right = "D"
}
if(right == this.topic[1][index].rightAnswer) {
// 当前选项与正确答案对比
finalScore += this.topic[1][index].score // 计算总分数
}
console.log(right,this.topic[1][index].rightAnswer)
}
// console.log(topic1Answer)
})
/**计算判断题总分 */
// console.log(`this.fillAnswer${this.fillAnswer}`)
// console.log(this.topic[2][this.index])
let fillAnswer = this.fillAnswer
fillAnswer.forEach((element,index) => {
//此处index和 this.index数据不一致，注意
element.forEach((inner) => {
if(this.topic[2][index].answer.includes(inner)) {
//判断填空答案是否与数据库一致
console.log("正确")
finalScore += this.topic[2][this.index].score
}
})
});
/** 计算判断题总分 */
let topic3Answer = this.judgeAnswer
topic3Answer.forEach((element,index) => {
let right = null
switch(element) {
case 1:
right = "T"
break
case 2:
right = "F"
}
if(right == this.topic[3][index].answer) {
// 当前选项与正确答案对比
finalScore += this.topic[3][index].score // 计算总分数
}
})
if(this.time != 0) {
this.$confirm("考试结束时间未到,是否提前交卷","友情提示",{
confirmButtonText: '立即交卷',
cancelButtonText: '再检查一下',
type: 'warning'
}).then(() => {
console.log("交卷")
let date = new Date()
this.endTime = this.getTime(date)
let answerDate = this.endTime.substr(0,10)
//提交成绩信息
this.$axios({
url: '/api/score',
method: 'post',
data: {
examCode: this.examData.examCode, //考试编号
studentId: this.userInfo.id, //学号
subject: this.examData.source, //课程名称
etScore: finalScore, //答题成绩
answerDate: answerDate, //答题日期
}
}).then(res => {
if(res.data.code == 200) {
this.$router.push({
path:'/studentScore',query: {
score: finalScore,
startTime: this.startTime,
endTime: this.endTime
}})
}
})
}).catch(() => {
console.log("继续答题")
})
}
},
Backend interface for obtaining exam information
@GetMapping("/exam/{examCode}")
public ApiResult findById(@PathVariable("examCode") Integer examCode){
System.out.println("根据ID查找");
ExamManage res = examManageService.findById(examCode);
if(res == null) {
return ApiResultHandler.buildApiResult(10000,"考试编号不存在",null);
}
return ApiResultHandler.buildApiResult(200,"请求成功！",res);
}
Backend interface for obtaining test questions
@GetMapping("/paper/{paperId}")
public Map<Integer, List<?>> findById(@PathVariable("paperId") Integer paperId) {
List<MultiQuestion> multiQuestionRes = multiQuestionService.findByIdAndType(paperId); //选择题题库 1
List<FillQuestion> fillQuestionsRes = fillQuestionService.findByIdAndType(paperId); //填空题题库 2
List<JudgeQuestion> judgeQuestionRes = judgeQuestionService.findByIdAndType(paperId); //判断题题库 3
Map<Integer, List<?>> map = new HashMap<>();
map.put(1,multiQuestionRes);
map.put(2,fillQuestionsRes);
map.put(3,judgeQuestionRes);
return map;
}
7. Database design
Table name: admin
| Field Name | type of data | Is it required? | Comment |
|---|---|---|---|
| adminId | int(11) | yes | ID number |
| adminName | varchar(20) | no | Name |
| sex | varchar(2) | no | gender |
| tel | varchar(11) | no | telephone number |
| varchar(20) | no | ||
| pwd | varchar(16) | no | password |
| cardId | varchar(18) | no | ID number |
| role | varchar(1) | no | Roles (0 administrator, 1 teacher, 2 students) |
Table name: exam_manage
| Field Name | type of data | Is it required? | Comment |
|---|---|---|---|
| examCode | int(11) | yes | Exam number |
| description | varchar(50) | no | Introduction to the exam |
| source | varchar(20) | no | Course Title |
| paperId | int(11) | no | Paper number |
| examDate | varchar(10) | no | exam date |
| totalTime | int(11) | no | Duration |
| grade | varchar(10) | no | grade |
| term | varchar(10) | no | semester |
| major | varchar(20) | no | major |
| institute | varchar(20) | no | college |
| totalScore | int(11) | no | total score |
| type | varchar(255) | no | Exam type |
| tips | varchar(255) | no | Instructions for Candidates |
Table name: fill_question
| Field Name | type of data | Is it required? | Comment |
|---|---|---|---|
| questionId | int(11) | yes | Question number |
| subject | varchar(20) | no | exam subjects |
| question | varchar(255) | no | Question content |
| answer | varchar(255) | no | correct answer |
| analysis | varchar(255) | no | Question analysis |
| score | int(11) | no | Fraction |
| level | varchar(5) | no | difficulty level |
| section | varchar(20) | no | Chapter |
Table name: judge_question
| Field Name | type of data | Is it required? | Comment |
|---|---|---|---|
| questionId | int(11) | yes | Question number |
| subject | varchar(20) | no | exam subjects |
| question | varchar(255) | no | Question content |
| answer | varchar(255) | no | correct answer |
| analysis | varchar(255) | no | Question analysis |
| score | int(11) | no | Fraction |
| level | varchar(1) | no | difficulty level |
| section | varchar(20) | no | Chapter |
Table name: message
| Field Name | type of data | Is it required? | Comment |
|---|---|---|---|
| id | int(11) | yes | Message number |
| title | varchar(20) | no | title |
| content | varchar(255) | no | Message content |
| time | date | no | Message Time |
8. Source code acquisition
The source code, installation tutorial documents, project introduction documents and other related documents have been uploaded to the official website of Yunyuan Practical Combat. You can obtain the project through the official website below!