当前位置：首页 > 文章列表 > 文章 > 前端 > 用JavaScript做互动测验：分步教程详解

用JavaScript做互动测验：分步教程详解

2025-09-16 12:33:46 0浏览收藏

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 的内容。

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!