寫的比較弱,只能處理50道以內的選項為A-D的單選題,正確答案自己輸進去,必須要大寫,不能有空格和逗號,提交會出分,錯誤的題號和答案會console.log()出來. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></ti ...
寫的比較弱,只能處理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>
