写的比较弱,只能处理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("请确认"+" 1~10的答案:"+result1 +" 11~20的答案:"+result2+" 21~30的答案:"+result3+" 31~40的答案:"+result4+" 41~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>