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

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

function displayQuestion() {
    questionsEl.textContent = quizQuestions[currentQuestion].question;
}

4. 选项展示函数

创建一个函数 displayChoices() 来显示当前问题的选项。这个函数应该：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

首先，清空 choicesEl 中的现有选项。
然后，遍历 quizQuestions[currentQuestion].choices 数组，为每个选项创建一个列表项 (
)，并将其添加到 choicesEl 中。
为每个选项添加事件监听器，以便在点击时检查答案。

function displayChoices() {
    choicesEl.innerHTML = ""; // 清空现有选项

    for (let i = 0; i <h3>5. 答案检查函数</h3><p>创建一个函数 checkAnswer() 来检查用户选择的答案是否正确。这个函数应该：</p><ol>
<li>获取用户选择的答案。</li>
<li>将其与 quizQuestions[currentQuestion].answer 进行比较。</li>
<li>显示答案是否正确。</li>
<li>更新 currentQuestion 的值。</li>
<li>调用 displayQuestion() 和 displayChoices() 来显示下一个问题和选项。</li>
</ol><pre class="brush:php;toolbar:false;">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 <h3>6. 初始化测验</h3><p>最后，在页面加载完成后，调用 displayQuestion() 和 displayChoices() 来显示第一个问题和选项。</p><pre class="brush:php;toolbar:false;">document.querySelector(".quiz-button").addEventListener("click", function() {
    document.querySelector(".intro-text").style.visibility = "hidden";
    document.querySelector(".quiz-button").style.visibility = "hidden";
    displayQuestion();
    displayChoices();
});

7. 完整示例代码



    <title>Coding Quiz</title><header><ul>
<li><button class="high-scores" id="high-scores">High Scores</button></li>
            <li class="timer">
        </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><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>