本文档旨在指导开发者使用 JavaScript 创建一个动态的编码测验。我们将详细讲解如何处理问题和答案的展示，以及如何更新选项以确保测验的流畅进行。通过本文，你将学会如何避免常见错误，并构建一个功能完善的互动式测验应用。
1. 数据结构设计
首先，我们需要一个合适的数据结构来存储测验的问题、选项和答案。一个包含对象的数组是理想的选择。每个对象代表一个问题，包含 question（问题内容）、choices（选项数组）和 answer（正确答案）。
var quizQuestions = [
{
question: "What method would you use to create a DOM object Element?",
choices: [".getAttribute()", ".createElement()", ".getElementById", ".setAttribute()"],
answer: ".createElement()"
},
{
question: "What are variables used for?",
choices: ["Iterating over arrays", "Linking a JavaScript file to your html", "Storing data", "Performing specific tasks"],
answer: "Storing data"
},
// ... 更多问题
];2. 变量初始化
接下来，我们需要初始化一些重要的变量。
- currentQuestion: 跟踪当前问题的索引。
- questionsEl, choicesEl, answerEl: 分别引用 HTML 中显示问题、选项和答案的元素。
var currentQuestion = 0;
var questionsEl = document.querySelector(".questions");
var choicesEl = document.querySelector(".choices");
var answerEl = document.querySelector(".answer");3. 问题展示函数
创建一个函数 displayQuestion() 来显示当前问题。该函数应根据 currentQuestion 的值从 quizQuestions 数组中获取问题，并更新 questionsEl 的内容。
立即学习“Java免费学习笔记（深入）”；
function displayQuestion() {
questionsEl.textContent = quizQuestions[currentQuestion].question;
}4. 选项展示函数
创建一个函数 displayChoices() 来显示当前问题的选项。这个函数应该：
- 首先，清空 choicesEl 中的现有选项。
- 然后，遍历 quizQuestions[currentQuestion].choices 数组，为每个选项创建一个列表项 (<li>)，并将其添加到 choicesEl 中。
- 为每个选项添加事件监听器，以便在点击时检查答案。
function displayChoices() {
choicesEl.innerHTML = ""; // 清空现有选项
for (let i = 0; i < quizQuestions[currentQuestion].choices.length; i++) {
const choice = quizQuestions[currentQuestion].choices[i];
const li = document.createElement("li");
li.textContent = choice;
li.addEventListener("click", checkAnswer); // 添加点击事件监听器
choicesEl.appendChild(li);
}
}5. 答案检查函数
创建一个函数 checkAnswer() 来检查用户选择的答案是否正确。这个函数应该：
- 获取用户选择的答案。
- 将其与 quizQuestions[currentQuestion].answer 进行比较。
- 显示答案是否正确。
- 更新 currentQuestion 的值。
- 调用 displayQuestion() 和 displayChoices() 来显示下一个问题和选项。
function checkAnswer(event) {
const selectedAnswer = event.target.textContent;
const correctAnswer = quizQuestions[currentQuestion].answer;
if (selectedAnswer === correctAnswer) {
answerEl.textContent = "Correct!";
} else {
answerEl.textContent = "Incorrect. The correct answer is: " + correctAnswer;
// 在这里添加扣除时间的逻辑
}
currentQuestion++;
if (currentQuestion < quizQuestions.length) {
displayQuestion();
displayChoices();
} else {
// 测验结束的逻辑
answerEl.textContent = "Quiz completed!";
}
}6. 初始化测验
最后，在页面加载完成后，调用 displayQuestion() 和 displayChoices() 来显示第一个问题和选项。
document.querySelector(".quiz-button").addEventListener("click", function() {
document.querySelector(".intro-text").style.visibility = "hidden";
document.querySelector(".quiz-button").style.visibility = "hidden";
displayQuestion();
displayChoices();
});7. 完整示例代码
<!DOCTYPE html>
<html>
<head>
<title>Coding Quiz</title>
</head>
<body>
<header>
<ul>
<li><button class="high-scores" id="high-scores">High Scores</button></li>
<li class="timer"></li>
</ul>
</header>
<main>
<div class="intro-text">
<h1>Timed Coding Quiz</h1>
<p>Come test your coding knowledge with this timed coding quiz! Everytime you answer a questoin incorrectly,
8 seconds is deducted from your total time! Good luck!</p>
</div>
</main>
</div>
<section class="quiz-content">
<button class="quiz-button" id="quiz-button" type="submit">Start Quiz</button>
<div class="questions" id="questions"></div>
<ul class="choices" id="choices"></ul>
<div class="answer" id="answer"></div>
</section>
<script>
var quizQuestions = [
{
question: "What method would you use to create a DOM object Element?",
choices: [".getAttribute()", ".createElement()", ".getElementById", ".setAttribute()"],
answer: ".createElement()"
},
{
question: "What are variables used for?",
choices: ["Iterating over arrays", "Linking a JavaScript file to your html", "Storing data", "Performing specific tasks"],
answer: "Storing data"
},
{
question: "When declaring a function, what comes after the keyword 'function'?",
choices: ["()", ";", "/", "++"],
answer: "()"
},
{
question: "What would you use if you wanted to execute a block of code a set number of times?",
choices: ["While loop", "Math.random()", "For loop", "Switch statement"],
answer: "For loop"
},
{
question: "Using the word 'break' will stop the code execution inside the switch block.",
choices: ["True", "False"],
answer: "True"
}
];
var currentQuestion = 0;
var questionsEl = document.querySelector(".questions");
var choicesEl = document.querySelector(".choices");
var answerEl = document.querySelector(".answer");
function displayQuestion() {
questionsEl.textContent = quizQuestions[currentQuestion].question;
}
function displayChoices() {
choicesEl.innerHTML = "";
for (let i = 0; i < quizQuestions[currentQuestion].choices.length; i++) {
const choice = quizQuestions[currentQuestion].choices[i];
const li = document.createElement("li");
li.textContent = choice;
li.addEventListener("click", checkAnswer);
choicesEl.appendChild(li);
}
}
function checkAnswer(event) {
const selectedAnswer = event.target.textContent;
const correctAnswer = quizQuestions[currentQuestion].answer;
if (selectedAnswer === correctAnswer) {
answerEl.textContent = "Correct!";
} else {
answerEl.textContent = "Incorrect. The correct answer is: " + correctAnswer;
// 在这里添加扣除时间的逻辑
}
currentQuestion++;
if (currentQuestion < quizQuestions.length) {
displayQuestion();
displayChoices();
} else {
answerEl.textContent = "Quiz completed!";
}
}
document.querySelector(".quiz-button").addEventListener("click", function() {
document.querySelector(".intro-text").style.visibility = "hidden";
document.querySelector(".quiz-button").style.visibility = "hidden";
displayQuestion();
displayChoices();
});
</script>
</body>
</html>8. 注意事项和总结
- 事件委托: 如果选项数量很多，可以考虑使用事件委托来提高性能。将事件监听器添加到 choicesEl 上，而不是每个 <li> 元素。
- 代码复用: 将常用的代码片段封装成函数，提高代码的可读性和可维护性。
- 错误处理: 添加错误处理机制，例如当 quizQuestions 数组为空时，显示错误信息。
- 用户体验: 优化用户体验，例如添加动画效果、提供反馈信息等。
通过遵循这些步骤，你可以创建一个功能完善的互动式编码测验。记住，代码的清晰性和可维护性至关重要，因此请务必编写结构良好、易于理解的代码。
