本文档旨在指导开发者使用 JavaScript 创建一个动态的编码测验。我们将详细讲解如何处理问题和答案的展示，以及如何更新选项以确保测验的流畅进行。通过本文，你将学会如何避免常见错误，并构建一个功能完善的互动式测验应用。

1. 数据结构设计

首先，我们需要一个合适的数据结构来存储测验的问题、选项和答案。一个包含对象的数组是理想的选择。每个对象代表一个问题，包含 question（问题内容）、choices（选项数组）和 answer（正确答案）。

2. 变量初始化

接下来，我们需要初始化一些重要的变量。

currentQuestion: 跟踪当前问题的索引。questionsEl, choicesEl, answerEl: 分别引用 HTML 中显示问题、选项和答案的元素。

3. 问题展示函数

创建一个函数 displayQuestion() 来显示当前问题。该函数应根据 currentQuestion 的值从 quizQuestions 数组中获取问题，并更新 questionsEl 的内容。

立即学习“Java免费学习笔记（深入）”；

4. 选项展示函数

创建一个函数 displayChoices() 来显示当前问题的选项。这个函数应该：

首先，清空 choicesEl 中的现有选项。然后，遍历 quizQuestions[currentQuestion].choices 数组，为每个选项创建一个列表项 ()，并将其添加到 choicesEl 中。为每个选项添加事件监听器，以便在点击时检查答案。

5. 答案检查函数

创建一个函数 checkAnswer() 来检查用户选择的答案是否正确。这个函数应该：

获取用户选择的答案。将其与 quizQuestions[currentQuestion].answer 进行比较。显示答案是否正确。更新 currentQuestion 的值。调用 displayQuestion() 和 displayChoices() 来显示下一个问题和选项。

6. 初始化测验

最后，在页面加载完成后，调用 displayQuestion() 和 displayChoices() 来显示第一个问题和选项。

7. 完整示例代码

Start Quiz

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(); });