|
写的比较弱,只能处理50道以内的选项为A-D的单选题,正确答案自己输进去,必须要大写,不能有空格和逗号,提交会出分,错误的题号和答案会console.log()出来.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .rowline{ width: 470px; margin:10px 0 0 150px; overflow: hidden; } .answer{ width: 70px; height: 33px; margin: 10px 0 0 5px; float: left; background: lemonchiffon; } .num{ width: 70px; height: 30px; margin: 5px 0 5px; float: left; text-align: center; line-height: 30px; font-weight: bold; font-size: 20px; border: none; resize: none; background: lightblue; } p{ font-size: 30px; font-weight: bold; margin-left: 150px; } #solution #btn{ width:70px; height: 30px; background: lightblue; font-size: 20px; margin:20px 0 0 530px; } </style> </head> <body> <p>学生答案:</p> <form action="#" id="solution"> <div class="rowline"> <textarea name="txt" class="num">1~5:</textarea> </div> <div class="rowline"> <textarea name="txt" class="num">6~10:</textarea> </div> <div class="rowline"> <textarea name="txt" class="num">11~15:</textarea> </div> <div class="rowline"> <textarea name="txt" class="num">16~20:</textarea> </div> <div class="rowline"> <textarea name="txt" class="num">21~25:</textarea> </div> <div class="rowline"> <textarea name="txt" class="num">26~30:</textarea> </div> <div class="rowline"> <textarea name="txt" class="num">31~35:</textarea> </div> <div class="rowline"> <textarea name="txt" class="num">36~40:</textarea> </div> <div class="rowline"> <textarea name="txt" class="num">41~45:</textarea> </div> <div class="rowline"> <textarea name="txt" class="num">46~50:</textarea> </div> <input type="button" id="btn" value="提交" /> </form> </body> </html> <script type="text/JavaScript"> var rowline = document.getElementsByClassName("rowline"); var solution = document.getElementById("solution"); var btn = document.getElementById("btn");
var count = 0;
for (var i = 0 ; i < rowline.length ; i++) { for (var j = 0 ; j < 5 ; j++) { adds(); } }
//创建下拉选项函数 function creatOption(op){ var group = document.createElement("option"); group.value = op; group.innerHTML = op; return group; } //创建添加下拉框函数 function adds(){ var selectBox = document.createElement("select"); selectBox.className = "answer"; var valueA = creatOption("A"); selectBox.appendChild(valueA); var valueB = creatOption("B"); selectBox.appendChild(valueB); var valueC = creatOption("C"); selectBox.appendChild(valueC); var valueD = creatOption("D"); selectBox.appendChild(valueD); rowline[i].appendChild(selectBox); }
var confirmResult = null; var result1 = null; var result2 = null; var result3 = null; var result4 = null; var result5 = null; //输入并判断答案函数 function writeIn(){ result1 = prompt("请输入1~10选择题的答案(使用大写)"); result2 = prompt("请输入11~20选择题的答案(使用大写)"); result3 = prompt("请输入21~30选择题的答案(使用大写)"); result4 = prompt("请输入31~40选择题的答案(使用大写)"); result5 = prompt("请输入41~50选择题的答案(使用大写)"); confirmResult = confirm("请确认"+"\n1~10的答案:"+result1 +"\n11~20的答案:"+result2+"\n21~30的答案:"+result3+"\n31~40的答案:"+result4+"\n41~50的答案:"+result5); } //布局结束后再输入答案并判断 window.addEventListener("DOMContentLoaded",function(){ writeIn(); if (confirmResult) { var result = result1+ result2 + result3 + result4 + result5 ; var mySelect = document.getElementsByClassName("answer"); btn.onclick = function(){ count = 0; console.log(""); for (var i = 0 ; i < mySelect.length ; i++) { var index = mySelect[i].selectedIndex; var self = mySelect[i].options[index].value; var correct = result.charAt(i); if (self == correct) { count = count + 2 ; }else{ console.log("错误答案 "+(i+1)+":"+self); } } alert("分数是"+count); } }else{ writeIn(); } },false); </script> |
|
|
