本文档旨在指导开发者使用 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免费学习笔记（深入）”；
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
function displayQuestion() {
questionsEl.textContent = quizQuestions[currentQuestion].question;
}4. 选项展示函数
创建一个函数 displayChoices() 来显示当前问题的选项。这个函数应该：
- 首先，清空 choicesEl 中的现有选项。
- 然后，遍历 quizQuestions[currentQuestion].choices 数组，为每个选项创建一个列表项 (
- )，并将其添加到 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. 完整示例代码
Coding Quiz
Timed Coding Quiz
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!
