利用js技术实现选择题的判分
时间: 2024-03-17 08:42:20 浏览: 116
好的,以下是一个简单的利用JavaScript实现选择题判分的例子:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>选择题判分</title>
</head>
<body>
<h1>选择题:</h1>
<form>
<p>1. HTML是什么缩写?</p>
<input type="radio" name="q1" value="a">A. Hyper Text Markup Language<br>
<input type="radio" name="q1" value="b">B. High Text Markup Language<br>
<input type="radio" name="q1" value="c">C. Hyper Tabular Markup Language<br>
<input type="radio" name="q1" value="d">D. None of the above<br>
<p>2. CSS是什么缩写?</p>
<input type="radio" name="q2" value="a">A. Creative Style Sheets<br>
<input type="radio" name="q2" value="b">B. Colorful Style Sheets<br>
<input type="radio" name="q2" value="c">C. Cascading Style Sheets<br>
<input type="radio" name="q2" value="d">D. None of the above<br>
<br>
<input type="button" value="提交" onclick="checkAnswers()">
</form>
<br>
<p>得分:<span id="score"></span></p>
</body>
</html>
```
JavaScript代码:
```javascript
function checkAnswers() {
// 定义正确答案
var answers = ["a", "c"];
// 获取用户选择的答案
var userAnswers = [];
userAnswers.push(document.querySelector('input[name="q1"]:checked').value);
userAnswers.push(document.querySelector('input[name="q2"]:checked').value);
// 计算得分
var score = 0;
for (var i = 0; i < answers.length; i++) {
if (userAnswers[i] == answers[i]) {
score++;
}
}
// 输出得分结果
document.getElementById("score").innerHTML = score + "分";
}
```
上述代码中,我们首先定义了正确的答案数组`answers`,然后在`checkAnswers`函数中获取用户选择的答案,计算得分并输出得分结果。在HTML代码中,我们在form标签中添加了选择题选项,并在提交按钮中调用`checkAnswers`函数。当用户点击提交按钮时,该函数会被触发,完成选择题的判分。
阅读全文