Node.js在線考試系統
1. 系統結構
系統考慮使用Nodejs和SocketIo實現服務器端邏輯，前端使用HTML5，數據庫使用MongoDB
2.數據結構
用戶表
var userSchema = new Schema({
userId:String, //用戶ID
username: String, //用戶名稱
password: String, //賬戶密碼,初始化為a
status:String, //用戶狀態,分為四個狀態,在線landing,離線offline,提交完畢submited,考試中testing
identity:String, //用戶身份,分別為student和teacher
});
科目表
var subjectsSchema = new Schema({
course:String, //考試科目名稱
startTime:Date, //考試開始時間
lastTime:Number, //考試持續時間,單位為分
numOfQuestions:Number,//問題總數
questions:[{ //問題
index:Number, //當前問題序號
question:String,//問題內容
score:Number //問題分值
}]
});
答題表
var answersSchema = new Schema({
user:{type:Schema.Types.ObjectId, ref:'User' },//用戶表引用
subject:{type:Schema.Types.ObjectId,ref:'Subjects'},//科目表引用
questions:[{
index:Number,//當前問題序號
content:String,//答案
score:Number //后期打分分值
}]
});
3.系統模塊設計
3.1前端
3.1.1學生模塊
- 繪制倒計時界面
* 提示學生還有多少時間開始考試
* 如果考試時間未到,學生點擊開始考試會彈出"未到考試時間"提示框
* 開始考試,學生點擊開始考試按鈕,進入考試界面并且發送消息給服務器,服務器轉發給教師端,更新教師端當前學生狀態
準備界面.jpg
- 繪制答題界面
- 繪制題目下標、題目標題、題目內容
- 繪制答題框
- 綁定上一題、提交答案、下一題三個按鈕點擊事件
-
存儲數據
答題界面.jpg - 提交答案
- 發送學生ID、題目序號、題目答案到服務器,服務器存入數據庫
3.1.2教師模塊
- 繪制學生狀態界面
* 將每一個學生的名字與學生ID作為一個單位,有序的排列在界面上
* 綁定點擊學生信息單元,進入對應學生的打分界面
* 通過socket實時更新學生狀態
學生狀態界面
- 繪制打分界面
- 主要調用學生模塊的繪制答題界面函數
- 添加打分欄
-
更改提交答案按鈕為打分按鈕=
改成績界面
- 存儲數據
3.1.3客戶端socket模塊
- 發送數據模塊
* 向服務器提交學生考試答案(學生端)
* 向服務器提交教師所改學生答卷題目分數(教師端)
* 向服務器提交開始考試信息(學生端)
* 向服務器提交結束考試信息(學生端)
- 接受數據模塊
- 接受來自服務器發送的確認登錄消息(學生端、教師端)
- 接受來自服務器發送的狀態改變消息(教師端)
3.2后臺
3.2.1數據庫操作模塊
- 向登錄的學生發送數據(考試開始時間,考試內容)
- 向登錄的教師發送數據(學生列表,學生考試答案)
- 更改用戶狀態(在線、進行考試、結束考試、離線)
- 存儲學生考卷答案
- 存儲學生考卷題目得分
3.2.2服務器socket模塊
- 接收來自客戶端所提交的學生考試答案,并調用數據庫模塊存儲學生考卷答案
- 接收來自客戶端提交的教師所改學生答卷題目分數,并調用數據庫模塊存儲學生考卷得分
。。。。。。
服務器socket模塊實現的功能與客戶端socket模塊相對應
4.功能分析
學生模塊與教師模塊中的界面繪制之前已有文章提及,這里略去
學生模塊的本地數據存儲功能
學生登錄->
后臺路由發送數據data->
router.get('/student', function(req, res, next) {
dbHelper.findUsrInfo(req, function (success, data) {
//console.log(data.friends);
//data.identify身份,data.subject考試題目,data.answer考試答案
res.render('student', {
scriptData:JSON.stringify(data),
data:data
});
})
});
因為服務器應用express模塊,data數據用于渲染前端頁面,但無法被js文件獲取到,所以需要經過處理,data數據被轉換為json格式,并存入window.scriptData->
<script>
window.scriptData = JSON.stringify({{{scriptData}}});
window.scriptData=eval("("+window.scriptData+")");//轉換為json對象
</script>
學生成功登錄后,進入準備開始考試界面,運行modalBox.init()函數,并將modalBox對象并賦值給STUDENT,default存儲本地數據,window.scriptData.subject.questions即為服務器所發考試相關數據中的題目對象->
var STUDENT;
new modal_student();
var modal_student = function () {
var modalBox = {
default:{
questions:[],//題目對象
answers:[],//學生所寫答案
index:0//當前題目編號,
},
init:function () {
ptrThis = this;
ptrThis.setQuestions();
},
setQuestions:function () {
ptrThis.default.questions = window.scriptData.subject.questions;
console.log(ptrThis.default.questions);
},
}
STUDENT = modalBox;
return modalBox.init();
}
今后學生切換題目時只需要從本地獲取數據,而不需要多次與服務器進行請求
教師模塊的本地數據存儲功能
教師登錄->
后臺發送數據data->
router.get('/teacher', function(req, res, next) {
dbHelper.findStudentsInfo(req, function (success, data) {
//console.log(data.friends);
//data.students學生信息,data.subject課程信息
res.render('teacher', {
students:data.students,
scriptData:JSON.stringify(data)
});
})
});
與上同->
<script>
window.scriptData = JSON.stringify({{{scriptData}}});
window.scriptData=eval("("+window.scriptData+")");//轉換為json對象
</script>
教師成功登錄后,進入瀏覽學生名單界面,運行modalBox.init()函數,并將modalBox對象并賦值給TEACHER->
var TEACHER;
new modal_teacher();
var modal_teacher = function () {
var ptrThis;
var modalBox = {
default:{
studentIndex:0,//當前正在進行批改的學生的下標
studentsList:[]
},
init:function () {
ptrThis = this;
ptrThis.default.studentsList = window.scriptData.students;
}
}
TEACHER = modalBox;
return modalBox.init();
}
studentsList存儲學生信息列表,包含學生姓名、學號、狀態,以及學生每道題目的答案
studentsList格式
var studentList = [{
user:{
username:String,//學生姓名
userId:String,//學生ID
status:String,//學生狀態
},
questions:[{
content:String,//答案
index:Number//當前題目下標
}]
}]
學生交卷
modalBox.bindEnd()綁定了結束考試button的點擊事件->
bindEnd:function () {
var end = document.getElementById("end");
end.addEventListener("click",function () {
ptrThis.saveAnswer();//將當前答案保存到本地文件
socketFun.end();//調用客戶端socket模塊的end()函數
});
},
點擊事件觸發,調用客戶端socket模塊的end()函數->
var socket = io.connect('http://localhost:3000');
var X = window.scriptData; //截取服務器發送過來的數據
var socketFun = {
//省略
end:function () {
var obj = {
userId:X.userId,
indentify:X.identify
}
obj ["answers"] = STUDENT.default.answers;
if(X.status=="submited"){
alert("你已經提交過答案!");
}else {
socket.emit("end", obj );
}
}
}
客戶端socket模塊將學生學號userId、學生身份identify、學生答案answers發送到服務器->
socket.on("end",function (result) {
User.update({userId:result.userId},{status:"submited"}).exec(function (err,doc) {//更新數據庫中的學生狀態為submited(提交答案)
User.findOne({userId:result.userId}).exec(function (err,doc) {//根據學生ID查詢該條學生記錄
var change = {
studentId:result.userId,
status:"submited"
};
if(teacherOnline){//如果教師在線,則向其發送學生狀態改變的消息
teacher.emit("statusChange",change);
}
Answers.findOne({user:doc._id}).exec(function (err,answer) {//答題表根據學生記錄的_id查詢到對應記錄,更新答案
answer.questions = result.answers;
answer.save(function (err) {})
})
});
})
}),
教師模塊通過socket實時更新學生狀態
客戶端socket模塊接收到來自服務器的學生狀態改變信息->
var socket = io.connect('http://localhost:3000');
socket.on("statusChange",function (change) {
TEACHER.changeStatus(change);
})
調用教師模塊的changeStatus函數,以change為參數->
changeStatus:function (change) {
console.log(ptrThis.default.studentsList);
for(var i = 0;i<ptrThis.default.studentsList.length;++i){//遍歷當前學生列表
console.log(ptrThis.default.studentsList[i].user.userId+"與"+change.studentId);
if(ptrThis.default.studentsList[i].user.userId==change.studentId){//重新設置status
ptrThis.default.studentsList[i].user.status = change.status;
var studentInfo = document.getElementsByClassName("studentInfo");
studentInfo[i].setAttribute("class","studentInfo "+change.status);//修改界面上學生列表中對應的學生的狀態(改變顏色以提示教師有學生狀態改變)
break;
}
}
},
5.具體代碼見
github下的onlineTest項目
