本文档旨在指导开发者使用 JavaScript 创建一个动态编码测验。我们将解决一个常见问题：如何正确更新问题和选项，避免在测验过程中重复显示相同的内容。通过逐步讲解和示例代码，你将学会如何使用计数器来追踪当前问题，并动态更新测验内容。
初始化测验数据
首先，我们需要一个包含问题、选项和答案的 JavaScript 数组。每个元素都是一个对象，包含 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" }, { 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" } ];
获取 DOM 元素
接下来，我们需要获取页面上的相关 DOM 元素，例如问题显示区域、选项按钮等。
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);
初始化问题计数器
这是解决问题的关键。我们需要一个变量来跟踪当前的问题索引。
立即学习“Java免费学习笔记（深入）”；
var currentQuestionIndex = 0;
显示问题和选项
现在，我们需要编写函数来显示问题和选项。关键在于使用 currentQuestionIndex 来访问 quizQuestions 数组中的正确元素。
function displayQuestion() { questionsEl.textContent = quizQuestions[currentQuestionIndex].question; } function displayChoices() { choicesListEl.innerHTML = ""; // 清空之前的选项 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); } }
注意：
- choicesListEl.innerHTML = “”; 用于在显示新问题之前清除旧的选项。
- li.setAttribute(“data-index”, i); 将选项的索引存储在 data-index 属性中，方便后续判断答案。
- li.addEventListener(“click”, checkAnswer); 为每个选项添加点击事件监听器，点击后调用 checkAnswer 函数。
检查答案并更新问题
checkAnswer 函数用于检查用户选择的答案是否正确，并更新问题。
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!"; // 在这里可以添加扣除时间的逻辑 } currentQuestionIndex++; // 增加问题索引 if (currentQuestionIndex < quizQuestions.length) { displayQuestion(); displayChoices(); } else { // 测验结束逻辑 answerEl.textContent = "Quiz Complete!"; } }
启动测验
最后，我们需要在点击“开始测验”按钮时启动测验。
startQuizEl.addEventListener("click", function() { document.querySelector(".intro-text").style.visibility = "hidden"; startQuizEl.style.visibility = "hidden"; //startTimer(); // 启动计时器，需要自行实现 displayQuestion(); displayChoices(); })
完整代码示例
<!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> </main> </div> <section class="quiz-content"> <button class="quiz-button" id="quiz-button" type="submit">Start Quiz</button> <div class="questions" id="questions"></div> <div class="choices" id="choices"></div> <div class="answer" id="answer"></div> </section> <script> // 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(); }) </script> </body> </html>
注意事项
- 计时器： 上述代码中 startTimer() 函数需要你自行实现，用于实现测验的计时功能。
- 分数： 你可以添加一个变量来跟踪用户的分数，并在 checkAnswer 函数中根据答案是否正确来更新分数。
- 测验结束： 在 checkAnswer 函数中，当 currentQuestionIndex 大于等于 quizQuestions.length 时，表示测验结束。你需要添加相应的逻辑来显示最终分数、保存分数等。
- 错误处理： 为了提高代码的健壮性，可以添加错误处理机制，例如检查 quizQuestions 数组是否为空，或者处理用户点击选项时可能出现的异常。
总结
通过使用计数器来跟踪当前问题，并动态更新问题和选项，我们可以创建一个功能完善的 JavaScript 编码测验。记住，关键在于正确地管理状态，并在每次用户回答问题后更新状态。希望这篇教程能够帮助你构建自己的测验应用程序！
以上就是使用 JavaScript 创建动态javascript word java html go 编码 app edge ai switch 常见问题 点击事件 JavaScript Length 对象 事件 dom innerHTML li