Node.js在线考试系统
1.布局总览
学生状态界面
改成绩界面
2.页面布局模块分析
1.studentViews
显示学生状态列表
2.studentInfo
学生状态列表的基本单元
补充:改成绩界面基本调用学生模块构造而成,增设了打分一栏，将提交按钮改为打分按钮，并在右侧提供返回键用以回退到学生状态界面
3.页面布局代码
学生状态界面
//省去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分别表示登录、离线、正在测试、提交答案四个状态,在服务器端由express模板渲染发送到浏览器上
改成绩界面
样式基本与学生答题界面相同,不再列出
4.界面js代码
学生状态界面&&改成绩界面
流程:教师登录->创建modal_teacher模块->返回modalBox.init()函数->init函数主要实现
绑定
studentinfo点击事件
点击事件包含:
1.调用教师模块的函数,用于添加打分栏
2.将提交按钮改为打分按钮
3.添加回退按钮,按下回退到学生状态界面
4.添加将学生答案转换为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记录当前被查询的学生考试信息在学生列表中的顺序
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();//调用学生模块的构造界面函数
STUDENT.setAnswersForTeacher(ptrThis.default.studentIndex);//将服务器传送过来的学生答案保存到学生模块上
STUDENT.toggleQuestion();//设置题目信息
STUDENT.bindButton();//绑定按钮触发事件
ptrThis.appendScoreLine();//调用教师模块的函数,用于添加打分栏
ptrThis.changeToCorrect();//将提交按钮改为打分按钮
ptrThis.appendBackButton();//添加回退按钮,按下回退到学生状态界面
ptrThis.appendViewPdf();//添加将学生答案转换为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设置为不可输入
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*$/)){//判断分数是否合法
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("分数太高！");
}
}else{
alert("格式有误");
}
});
}
回退按钮,按下回退到学生状态界面
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();//刷新当前页面.
});
}
5.总结
教师界面会需要调用学生模块,而学生模块则不需要调用教师模块.并且教师界面很大部分都是在学生界面上改进而成,所以实现起来较为简单
