本文档旨在指导开发者使用 JavaScript 创建一个动态编码测验。我们将解决一个常见问题：如何正确更新问题和选项，避免在测验过程中重复显示相同的内容。通过逐步讲解和示例代码，你将学会如何使用计数器来追踪当前问题，并动态更新测验内容。

初始化测验数据

首先，我们需要一个包含问题、选项和答案的 JavaScript 数组。每个元素都是一个对象，包含 question、choices 和 answer 属性。

获取 DOM 元素

接下来，我们需要获取页面上的相关 DOM 元素，例如问题显示区域、选项按钮等。

初始化问题计数器

这是解决问题的关键。我们需要一个变量来跟踪当前的问题索引。

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

显示问题和选项

现在，我们需要编写函数来显示问题和选项。关键在于使用 currentQuestionIndex 来访问 quizQuestions 数组中的正确元素。

注意：

choicesListEl.innerHTML = “”; 用于在显示新问题之前清除旧的选项。li.setAttribute(“data-index”, i); 将选项的索引存储在 data-index 属性中，方便后续判断答案。li.addEventListener(“click”, checkAnswer); 为每个选项添加点击事件监听器，点击后调用 checkAnswer 函数。

检查答案并更新问题

checkAnswer 函数用于检查用户选择的答案是否正确，并更新问题。

启动测验

最后，我们需要在点击“开始测验”按钮时启动测验。

完整代码示例

Start Quiz

// Array of the questions, choices, and answers for the 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" } ]; // Buttons var highScoresButtonEl = document.querySelector(".high-scores"); var startQuizEl = document.querySelector(".quiz-button"); var introTextEl = document.querySelector(".intro-text"); var questionsEl = document.querySelector(".questions"); var choicesEl = document.querySelector(".choices"); var answerEl = document.querySelector(".answer") var timerEl = document.querySelector(".timer"); var choicesListEl = document.createElement("ul"); choicesListEl.setAttribute("class", "choices"); choicesEl.appendChild(choicesListEl); var currentQuestionIndex = 0; function displayQuestion() { questionsEl.textContent = quizQuestions[currentQuestionIndex].question; } function displayChoices() { choicesListEl.innerHTML = ""; // Clear previous choices for (let i = 0; i < quizQuestions[currentQuestionIndex].choices.length; i++) { var li = document.createElement("li"); li.textContent = quizQuestions[currentQuestionIndex].choices[i]; li.setAttribute("data-index", i); li.addEventListener("click", checkAnswer); choicesListEl.appendChild(li); } } function checkAnswer(event) { var selectedIndex = event.target.getAttribute("data-index"); var selectedAnswer = quizQuestions[currentQuestionIndex].choices[selectedIndex]; var correctAnswer = quizQuestions[currentQuestionIndex].answer; if (selectedAnswer === correctAnswer) { answerEl.textContent = "Correct!"; } else { answerEl.textContent = "Incorrect!"; // Add time deduction logic here } currentQuestionIndex++; if (currentQuestionIndex < quizQuestions.length) { displayQuestion(); displayChoices(); } else { // Quiz complete logic answerEl.textContent = "Quiz Complete!"; } } // Button that starts the timer, displays the first question and the first set of choices. startQuizEl.addEventListener("click", function() { document.querySelector(".intro-text").style.visibility = "hidden"; startQuizEl.style.visibility = "hidden"; //startTimer(); displayQuestion(); displayChoices(); })