1. Project Introduction
This project is an online examination system for JavaWeb. Users can register, log in, answer questions online, and view historical records. At present, there are only single-choice questions. In the future, if you have time and energy, you can expand multiple-choice questions and short-answer questions... (This project is the result of phased learning, and the function is relatively simple)
Second, the technology used
Development tools: IntelliJ IDEA 2018.3.5
Operating system: win10 professional edition
Language used: Java
Front-end framework: layui
Background framework: Spring Data Jpa, Spring Boot, Mybatis
Database: MySQL 5.7
3. Examination process:
- User front desk registration
- Administrator background login, add exams, add questions, publish exams
- Candidates log in to the front desk to take the test and hand in the paper
- The system automatically compares the answers
- Candidates can view their scores in the exam history
4. Part of the interface
1. Front desk
answer questions
Exam History
2. Backstage
Exam paper management
History test paper management
Five, database table
1.user table
field name | Types of | primary key | is empty | describe |
---|---|---|---|---|
id | int | Yes | no | primary key ID |
name | varchar(20) | no | no | Name |
varchar(50) | no | no | ||
password | varchar(20) | no | no | password |
2. Question table question
field name | Types of | primary key | is empty | describe |
---|---|---|---|---|
id | int | Yes | no | primary key ID |
content | varchar(1000) | no | no | stem |
to | varchar(200) | no | no | A option |
sb | varchar(200) | no | no | B option |
sc | varchar(200) | no | no | option C |
sd | varchar(200) | no | no | D option |
answer | char | no | no | Answer |
pid | int | no | no | Paper ID |
3. Exam paper
field name | Types of | primary key | is empty | describe |
---|---|---|---|---|
id | int | Yes | no | primary key ID |
pname | varchar(20) | no | no | paper name |
4. History test paper sheet
field name | Types of | primary key | is empty | describe |
---|---|---|---|---|
id | int | Yes | no | primary key ID |
papername | varchar(20) | no | no | paper name |
userid | int | no | no | User ID |
time | datetime | no | no | Question time |
on one | int | no | no | Fraction |
username | varchar(20) | no | no | username |
5. History question sheet squestion
field name | Types of | primary key | is empty | describe |
---|---|---|---|---|
id | int | Yes | no | primary key ID |
answer | char | no | no | correct answer |
doanswer | char | no | no | Respondent's answer |
to | varchar(200) | no | no | A option |
sb | varchar(200) | no | no | B option |
sc | varchar(200) | no | no | option C |
sd | varchar(200) | no | no | D option |
spid | int | no | no | History paper ID |
content | varchar(1000) | no | no | stem |
6. Administrator table admin
field name | Types of | primary key | is empty | describe |
---|---|---|---|---|
id | int | Yes | no | primary key ID |
varchar(20) | no | no | ||
password | varchar(50) | no | no | password |
name | varchar(20) | no | no | Name |
6. Knowledge summary
1. The frontend uploads the json array, and the backend SpringBoot accepts the method.
The frontend first uses JSON.stringify() to [parse a string from an object], upload it to the backend, and after the backend accepts the string, use Google's Gson.jar to convert from json to list.
//json转换为list
Gson gson = new Gson();
List<Person> persons = gson.fromJson(str, new TypeToken<List<Person>>(){
}.getType());
//list转换为json
Gson gson = new Gson();
List<Person> persons = new ArrayList<Person>();
String str = gson.toJson(persons);
front desk
var q = JSON.stringify(questions)
$.ajax({
type:"post",
url:'insSquestion',
data:{
questions:q},
success:function (res) {
if (res > 0){
alert('提交成功')
window.location.href="index"
}
}
})
Backstage
@RequestMapping(value="insSquestion")
public int insSquestion(String questions){
Gson gson = new Gson();
List<Squestion> qs = gson.fromJson(questions, new TypeToken<List<Squestion>>() {
}.getType());
return squestionServiceImpl.insSquestions(qs);
}
2. The use of the time plugin jquery.countdown.js
1. Introduce jquery and jquery.countdown.js into the page.
2. You can pass a string of valid time
<div>12:30</div>
<div>12:30:39</div>
<div>12:30:39.929</div>
3. After the page DOM elements are loaded, countDown()
the countdown plug-in can be initialized through a method.
$('div, h1, time').countDown();
4. Events
time.elapsed
: This event is triggered immediately when the countdown ends.
$('#my-countdown').on('time.elapsed', function () {
// do something...
});
7. Disadvantages
1. The database design is unreasonable. Due to the unfamiliarity with Spring Data Jpa's linked table query, repeated fields appear in the database design.
2. Single function, only multiple choice questions.