📅 最后修改于: 2023-12-03 14:52:08.263000 🧑 作者: Mango
在本文中，我们将介绍如何创建一个简单的 JavaScript 测验。我们将使用 HTML、CSS 和 JavaScript 来创建一个测验，并在 HTML 中添加问题和答案选项。然后，我们将使用 JavaScript 来检查用户是否选择了正确的答案。
首先，我们需要创建一个 HTML 文件。在这个文件中，我们将添加问题和答案选项。以下是一个简单的 HTML 模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 测验</title>
</head>
<body>
<h1>JavaScript 测验</h1>
<div id="quiz">
<!-- 在这里添加问题和答案选项 -->
</div>
<button id="submit">提交</button>
<script src="quiz.js"></script>
</body>
</html>
我们将向 quiz 元素添加问题和答案选项。在这个例子中，我们将添加一个简单的问题和一些单选答案选项：
<div id="quiz">
<h2>Question 1</h2>
<p>What is the capital of France?</p>
<label>
<input type="radio" name="question1" value="a">
Paris
</label>
<label>
<input type="radio" name="question1" value="b">
London
</label>
<label>
<input type="radio" name="question1" value="c">
Berlin
</label>
</div>
在这个例子中，我们添加了一个标题 (<h2>)，表示问题的编号。然后，我们添加了一个问题描述 (<p>)。最后，我们添加了三个单选答案选项 (<input type="radio">)，每个选项都有一个值 (value)，表示该选项的编码。
我们在每个答案选项之前还添加了一个 <label> 元素，这样用户就可以点击标签中的文本来选择答案。
请注意，我们在每个单选按钮的 name 属性中使用了相同的值 (question1)。这是因为它们都是属于同一个问题的选项。每个问题的所有选项应该有相同的值。
我们还需要添加更多的问题和答案选项，以创建完整的测验。
现在我们需要创建一个 JavaScript 验证器，检查用户是否选择了正确的答案。以下是一个简单的验证器：
const submitButton = document.getElementById('submit');
const quizContainer = document.getElementById('quiz');
function checkAnswers() {
let score = 0;
const answers = {
'question1': 'a', // 此处添加每个问题的正确答案
'question2': 'b',
'question3': 'c'
};
// 对于每个问题，检查用户是否选择了正确的答案
const inputElements = quizContainer.querySelectorAll('[type=radio]')
inputElements.forEach((inputElement) => {
const name = inputElement.name;
const value = inputElement.value;
if (answers[name] === value && inputElement.checked) {
score++;
}
});
// 根据分数显示不同的结果
let message = '';
if (score === 0) {
message = '你没有得到任何分数 :(';
} else if (score === Object.keys(answers).length) {
message = '恭喜你 100 分!';
} else {
message = `你得了 ${score} 分`;
}
alert(message);
}
submitButton.addEventListener('click', checkAnswers);
在这个例子中，我们添加了一个名为 checkAnswers 的函数作为点击提交按钮 (<button>) 的事件处理程序。该函数遍历所有单选答案选项，检查用户是否选择了正确的答案。
首先，我们设定一个初始值为 0 的 score 变量，以计算用户的得分。然后，我们创建一个名为 answers 的对象，包含每个问题的正确答案。
接下来，我们使用 querySelectorAll 方法选择所有单选答案选项。对于每个选项，我们获取其 name 和 value 属性，并检查其是否与正确答案匹配。如果是，我们将 score 变量增加1。
最后，我们根据分数显示提示信息，并通过 alert 函数将其显示给用户。
我们已经完成了 JavaScript 测验的创建。现在，我们可以通过在浏览器中打开 HTML 文件来运行它。当用户点击提交按钮时，我们的 JavaScript 验证器将检查用户是否选择了正确的答案，并显示分数提示。
在本文中，我们介绍了如何创建一个简单的 JavaScript 测验。我们使用了 HTML、CSS 和 JavaScript 来创建测验，并演示了如何添加问题和答案选项，以及如何创建一个 JavaScript 验证器来检查用户的答案。希望本文能够帮助您创建自己的 JavaScript 测验。