你的位置:首页 > Java教程

[Java教程]一个小判卷系统


写的比较弱,只能处理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>