Node.js在線考試系統(tǒng)
1.布局總覽
學(xué)生狀態(tài)界面
改成績界面
2.頁面布局模塊分析
1.studentViews
顯示學(xué)生狀態(tài)列表
2.studentInfo
學(xué)生狀態(tài)列表的基本單元
補充:改成績界面基本調(diào)用學(xué)生模塊構(gòu)造而成,增設(shè)了打分一欄，將提交按鈕改為打分按鈕，并在右側(cè)提供返回鍵用以回退到學(xué)生狀態(tài)界面
3.頁面布局代碼
學(xué)生狀態(tài)界面
//省去html和body
<div class="navBar">
<div class="navBar-Content">
<span>Online Test Site</span>
<span style="align-self: flex-end;font-size:16px;margin-bottom: 10px;">For Student</span>
</div>
</div>
<div class="bc">
<div class="studentViews">
{{#each students}}
<div class="studentInfo {{user.status}}">
<span class="studentName">{{user.username}}</span>
<span class="studentId">{{user.userId}}</span>
</div>
{{/each}}
</div>
</div>
.studentViews{
width: 800px;
display: flex;
flex-wrap: wrap;
margin-top: 80px;
padding: 20px 50px 0;
align-self: center;
height: inherit;
align-content: flex-start;
border: solid 1px #ff1f30;
}
.studentInfo{
display: flex;
flex: 0 0 120px;
margin: 10px 6.6px;
height: 90px;
flex-direction: column;
background: #ddd;
justify-content: space-around;
cursor: pointer;
}
.studentInfo span{
display: flex;
justify-content: center;
}
.studentName{
margin-top: 10px;
font-weight: 700;
}
.studentId{
font-size: 12px;
}
.landing{
background: rgb(254,67,101);
color: #ffffff;
}
.offline{
}
.testing{
background: #0080ff;
color: #ffffff;
}
.submited{
background: rgb(107,194,53);
color: #ffffff;
}
css中的landing、offline、testing、submited分別表示登錄、離線、正在測試、提交答案四個狀態(tài),在服務(wù)器端由express模板渲染發(fā)送到瀏覽器上
改成績界面
樣式基本與學(xué)生答題界面相同,不再列出
4.界面js代碼
學(xué)生狀態(tài)界面&&改成績界面
流程:教師登錄->創(chuàng)建modal_teacher模塊->返回modalBox.init()函數(shù)->init函數(shù)主要實現(xiàn)
綁定
studentinfo點擊事件
點擊事件包含:
1.調(diào)用教師模塊的函數(shù),用于添加打分欄
2.將提交按鈕改為打分按鈕
3.添加回退按鈕,按下回退到學(xué)生狀態(tài)界面
4.添加將學(xué)生答案轉(zhuǎn)換為PDF功能
var TEACHER;
$(init_teacher);
function init_teacher() {
new modal_teacher();
}
var modal_teacher = function () {
var ptrThis;
var body = document.getElementsByTagName('body'); //body
var modalBox = {
default:{
studentIndex:0,
studentsList:[]
},
bindQueryStudent:function () {
},
init:function () {
ptrThis = this;
ptrThis.default.studentsList = window.scriptData.students;
ptrThis.bindQueryStudent();
}
}
TEACHER = modalBox;
return modalBox.init();
}
studentinfo點擊事件
bindQueryStudent:function () {
body[0].addEventListener("click",function (e) {
//如果studentinfo被點擊
if(e.target.classList.contains("studentInfo")||e.target.parentNode.classList.contains("studentInfo")){
console.log(STUDENT);
//ptrThis.default.studentIndex記錄當(dāng)前被查詢的學(xué)生考試信息在學(xué)生列表中的順序
if(e.target.parentNode.classList.contains("studentInfo")){
ptrThis.default.studentIndex = [].indexOf.call(e.target.parentNode.parentNode.children,e.target.parentNode);
}else{
ptrThis.default.studentIndex = [].indexOf.call(e.target.parentNode.children,e.target);
}
console.log(ptrThis.default.studentIndex);
STUDENT.displayPaper();//調(diào)用學(xué)生模塊的構(gòu)造界面函數(shù)
STUDENT.setAnswersForTeacher(ptrThis.default.studentIndex);//將服務(wù)器傳送過來的學(xué)生答案保存到學(xué)生模塊上
STUDENT.toggleQuestion();//設(shè)置題目信息
STUDENT.bindButton();//綁定按鈕觸發(fā)事件
ptrThis.appendScoreLine();//調(diào)用教師模塊的函數(shù),用于添加打分欄
ptrThis.changeToCorrect();//將提交按鈕改為打分按鈕
ptrThis.appendBackButton();//添加回退按鈕,按下回退到學(xué)生狀態(tài)界面
ptrThis.appendViewPdf();//添加將學(xué)生答案轉(zhuǎn)換為PDF功能
}
})
},
添加打分欄
appendScoreLine:function () {
var submit = document.getElementsByClassName("submit");//submit
var scoreLine = document.createElement("div");
submit[0].parentNode.insertBefore(scoreLine,submit[0]);//將scoreline插入到submit欄之前
scoreLine.classList.add("score");
scoreLine.innerHTML = ['<span>該題成績:</span>',
'<input class="getScore" type="text">'
].join("");
},
將提交按鈕改為打分按鈕
changeToCorrect:function () {
var inputTe = document.getElementsByClassName("inputTe");
inputTe[0].removeAttribute("contenteditable");//將inptutTe設(shè)置為不可輸入
var correct = document.getElementById("submit");
correct.setAttribute("id","correct");
correct.textContent = "打分";//將提交按鈕改為打分按鈕
correct.addEventListener("click",function () {
var getScore = document.getElementsByClassName("getScore");
var score = getScore[0].value;
if(score.match(/^[1-9]\d*$/)){//判斷分?jǐn)?shù)是否合法
score = parseInt(score);
if(score<=window.scriptData.subject.questions[STUDENT.default.index].score){
socketFun.submitScore(window.scriptData.students[ptrThis.default.studentIndex].user.userId,
STUDENT.default.index,score);
}else{
alert("分?jǐn)?shù)太高！");
}
}else{
alert("格式有誤");
}
});
}
回退按鈕,按下回退到學(xué)生狀態(tài)界面
appendBackButton:function () {
var back = document.createElement("button");
var bc = document.getElementsByClassName("bc");
var classes = ["button","button-pill","button-primary"];
back.setAttribute("id","back");
for (var i = 0;i<3;++i){
back.classList.add(classes[i]);
}
back.innerHTML = '<i class="iconfont"></i>';
body[0].appendChild(back);
back.addEventListener("click",function () {
window.location.reload();//刷新當(dāng)前頁面.
});
}
5.總結(jié)
教師界面會需要調(diào)用學(xué)生模塊,而學(xué)生模塊則不需要調(diào)用教師模塊.并且教師界面很大部分都是在學(xué)生界面上改進而成,所以實現(xiàn)起來較為簡單
