纯HTML自动阅卷程序

https://www.52pojie.cn/thread-1554672-1-1.html

这是前两年用来练手的一个纯网页程序，用来进行自动阅卷用的（用excel更快）。
现在放上来供大家参考娱乐，就当个逻辑练习了。

答案可以在js中预设，默认50道选择题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>补考阅卷程序</title>  <script type="text/javascript"> /* 修改于2019 */ // HTMLA卷答案 var answer=["D","D","A","A","D","C","C","CD","A","D", "C","B","D","AB","C","D","AC","A","C","D", "D","BD","AC","C","A","A","C","A","B","D", "A","C","C","B","D","A","D","C","C","B", "C","D","B","A","C","B","C","D","C","A"]; window.onload=function(){ var layOut=document.getElementById("layOut"); var content=""; for (var i = 0; i < answer.length; i++) { content+="<p><span class='sp' id="+i+"s>第"+(i+1)+"题： </span> "+ "<span class='op'>选项：A</span><input type='checkBox' class='cbk' value='A' name='subject"+i+"'/> "+ "<span class='op'>B</span><input type='checkbox' class='cbk' value='B' name='subject"+i+"'/> "+ "<span class='op'>C</span><input type='checkBox' class='cbk' value='C' name='subject"+i+"'/> "+ "<span class='op'>D</span><input type='checkBox' class='cbk' value='D' name='subject"+i+"'/><hr/></p>"; } layOut.innerHTML=content; //获取所有的题目 var spans=document.getElementsByClassName('sp'); //每隔5题使题目变成红色 for(let i = 0 ;i<spans.length;i+=5){ spans[i].style.color="red"; } var end=document.getElementById('end'); //点击提交答案的时候绑定的点击事件 document.getElementById("smt").addEventListener("click",function(){ var fenshu=0; var right=0; var wrong=[]; var arrRight=[]; for (let i = 0; i < answer.length; i++) { //获取当前题目所有的选项 let sub=document.getElementsByName("subject"+i); let ans=""; //被选中的选项就是答案 for (let i = 0; i < sub.length; i++) { if(sub[i].checked==true){ ans+=sub[i].value; } } //如果当前题目答案和标准答案一致 if(ans==answer[i]){ fenshu+=2; right+=1; //把正确的题目序号放进arrRight arrRight.push(i+1); }else{ wrong.push(i+1); } } var endTxt="<table border='1' width='450px'>"; for (let i = 0; i < answer.length/5; i++) { endTxt+="<tr>"; for (let j = i*5+1; j <(i*5+6); j++) { endTxt+="<td>"+j+"</td>"; } endTxt+="</tr>"; } endTxt+="</table>"; var end=document.getElementById("end"); end.innerHTML=endTxt; var tdSet=document.getElementsByTagName("td"); for (let i in tdSet) { for (let j in wrong) { if(tdSet[i].innerText==wrong[j]){ tdSet[i].style.backgroundColor="red"; } } for (let j in arrRight) { if(tdSet[i].innerText==arrRight[j]){ tdSet[i].style.backgroundColor="green"; } } } var divSet=document.getElementsByTagName("div"); console.log(divSet.length); var lastDiv=divSet[divSet.length-1]; lastDiv.innerHTML='<p>总共答对了'+right+'题，得分为：'+fenshu+'分</p><br/>'+ '<p>(注：红色为答错题目)</p>'; }) } </script> <style type="text/css"> h1{ text-align: center; } div{ width:500px; margin: 0 auto; text-align: center; } span{ font-size: 20px; } button{ font-size: 30px; position: absolute;; right:424px; } .cbk{ zoom: 200%; } .op{ font-size: 24px; } td{ text-align: center; } p{ font-size: 24px; } </style> </head> <body> <h1>补考成绩批阅</h1> <div id="layOut"> </div> <div id="result"> <button type="button" id="smt">提交答案</button><br/> </div> <br><br><br> <div id="end"> </div> <div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 纯HTML自动阅卷程序