本帖最后由 georgefan 于 2021-10-30 00:10 编辑
新学HTML和Javascript，自动生成10以内加法试题，自动评分。
不知为何，button的onclick选项会自动删除。
截屏了，凑合着看吧。
v2.0 增加了自助选题量的功能，优化了作答结果反馈。
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Math Problem</title>
</head>
<body>
<h1>百以内加法计算测试题</h1>
<p>请选择试题量（默认为10题，最高为50题）：</p>
<!--<input id="itemNumber" placeholder="请输入试题数量" type="text">-->
<input id="itemNumber" max="50" min="10" type="range" value="10">
<p id="value">默认试题量：10</p>
<button id="itemBut">生成试卷</button>
<p id="test"></p>
<p class="item"></p>
<!--<button>检查答案</button>-->
<p class="key"></p>
<script>
var itemNumber;
var keys;
function change() {
itemNumber = document.getElementById("itemNumber").value / 1;
document.getElementById('value').innerHTML = "已选试题量：" + itemNumber;
}
function printItems() {
itemNumber = document.getElementById("itemNumber").value / 1;
keys = new Array(itemNumber);
for (i = 1; i < itemNumber + 1; i++) {
var num1 = Math.floor(Math.random() * 10);
var num2 = Math.floor(Math.random() * 10);
var item = document.querySelector("p.item");
document.getElementById("itemBut").disabled = "disabled";
document.getElementById("itemNumber").disabled = "disabled";
item.innerHTML += "<p>第" + i + "题：" + num1 + "+" + num2 + "=<input type='text' placeholder='请输入答案' id='item'> </p>";
keys[i - 1] = num1 + num2;
}
var but = "<button id=\"submit\" onclick=\"getResult()\">结束答题<br>查看作答结果</button>";
item.innerHTML += but;
}
function getResult() {
var crrt = 0;
var alert = "";
var itemAnswers = document.querySelectorAll("input");
for (i = 1; i < itemNumber + 1; i++) {
var itemKey = keys[i - 1].toString();
var itemAnswer = itemAnswers[i].value;
itemAnswers[i].disabled = "disabled";
if (itemAnswer === itemKey) {
crrt++;
} else if (itemAnswer === "") {
alert += "<p>错题序号" + i + "：您未作回答" + itemAnswer + "，正确答案为" + itemKey + "。</p>";
} else {
alert += "<p>错题序号" + i + "：您的答案是" + itemAnswer + "，正确答案为" + itemKey + "。</p>";
}
var message = "共" + itemNumber + "道题，您答对了" + crrt + "道题，百分制得分为" + Math.floor(crrt / itemNumber * 100) + "分。";
}
buts=document.querySelectorAll("button");
for (i = 0; i < buts.length; i++){
buts[i].disabled="disabled";
}
el = document.querySelector(".key");
el.innerHTML = message + alert;
}
</script>
</body>
</html> | 
[复制链接]
发表于 2021-10-29 22:30
|
发表于 2021-10-30 00:03
