本文档旨在指导开发者使用 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 数组为空时，显示错误信息。
- 用户体验: 优化用户体验，例如添加动画效果、提供反馈信息等。
通过遵循这些步骤，你可以创建一个功能完善的互动式编码测验。记住，代码的清晰性和可维护性至关重要，因此请务必编写结构良好、易于理解的代码。
以上就是使用 JavaScript 创建互动式javascript word java html go 编码 app edge ai switch 代码复用 点击事件 JavaScript html 封装 数据结构 委托 对象 事件 li