寫(xiě)的比較弱,只能處理50道以?xún)?nèi)的選項(xiàng)為A-D的單選題,正確答案自己輸進(jìn)去,必須要大寫(xiě),不能有空格和逗號(hào),提交會(huì)出分,錯(cuò)誤的題號(hào)和答案會(huì)console.log()出來(lái).
<!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>學(xué)生答案:</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();
}
}
//創(chuàng)建下拉選項(xiàng)函數(shù)
function creatOption(op){
var group = document.createElement("option");
group.value = op;
group.innerHTML = op;
return group;
}
//創(chuàng)建添加下拉框函數(shù)
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;
//輸入并判斷答案函數(shù)
function writeIn(){
result1 = prompt("請(qǐng)輸入1~10選擇題的答案(使用大寫(xiě))");
result2 = prompt("請(qǐng)輸入11~20選擇題的答案(使用大寫(xiě))");
result3 = prompt("請(qǐng)輸入21~30選擇題的答案(使用大寫(xiě))");
result4 = prompt("請(qǐng)輸入31~40選擇題的答案(使用大寫(xiě))");
result5 = prompt("請(qǐng)輸入41~50選擇題的答案(使用大寫(xiě))");
confirmResult = confirm("請(qǐng)確認(rèn)"+"\n1~10的答案:"+result1 +"\n11~20的答案:"+result2+"\n21~30的答案:"+result3+"\n31~40的答案:"+result4+"\n41~50的答案:"+result5);
}
//布局結(jié)束后再輸入答案并判斷
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("錯(cuò)誤答案 "+(i+1)+":"+self);
}
}
alert("分?jǐn)?shù)是"+count);
}
}else{
writeIn();
}
},false);
</script>
聯(lián)系客服