使用 JavaScript 创建互动式编码测验：分步教程-html教程-PHP中文网

使用 JavaScript 创建互动式编码测验：分步教程

霞舞

发布： 2025-09-15 17:40:17

原创

814人浏览过

使用 javascript 创建互动式编码测验：分步教程

本文档旨在指导开发者使用 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免费学习笔记（深入）”；

豆包AI编程

豆包推出的AI编程助手

483

查看详情

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>

登录后复制