如何为答题游戏实现正确/错误答案的提示弹窗？

问题根源 #

你当前的代码错误地将answer1固定设为正确答案按钮，绑定了“答对”提示，但实际正确答案是随机分配到四个按钮中的任意一个，导致点击真正的正确答案时，大概率触发“答错”提示，逻辑完全错误。

修复步骤 #

1. 保存当前题目的正确答案

在useApiData函数中，新增全局变量存储当前题目的正确答案，方便后续点击时判断：

let currentCorrectAnswer = ''; // 全局变量存储当前正确答案

function useApiData(data){
    const questionData = data.results[0];
    document.querySelector("#category").innerHTML = `Category: ${questionData.category}`;
    document.querySelector("#difficulty").innerHTML = `Difficulty: ${questionData.difficulty}`;
    document.querySelector("#question").innerHTML = `Question: ${questionData.question}`;

    // 合并正确与错误答案，打乱顺序
    const allAnswers = [...questionData.incorrect_answers, questionData.correct_answer];
    const shuffledAnswers = allAnswers.sort(() => Math.random() - 0.5);

    // 将打乱后的答案分配到四个按钮
    document.querySelector("#answer1").innerHTML = shuffledAnswers[0];
    document.querySelector("#answer2").innerHTML = shuffledAnswers[1];
    document.querySelector("#answer3").innerHTML = shuffledAnswers[2];
    document.querySelector("#answer4").innerHTML = shuffledAnswers[3];

    // 保存当前题目的正确答案
    currentCorrectAnswer = questionData.correct_answer;
}

2. 统一绑定点击事件，动态判断对错

删除原来单独给每个按钮绑定的固定事件，改为给所有答案按钮绑定同一个点击事件，点击时实时判断按钮内容是否匹配正确答案：

// 获取所有答案按钮
const answerButtons = document.querySelectorAll("[id^='answer']");

// 批量绑定点击事件
answerButtons.forEach(button => {
    button.addEventListener("click", () => {
        // 用trim()避免空格导致判断失误
        if (button.textContent.trim() === currentCorrectAnswer.trim()) {
            alert("You got it right!");
        } else {
            alert(`You got it wrong! The correct answer is: ${currentCorrectAnswer}`);
        }
        // 加载下一题
        sendApiRequest();
    });
});

3. 简化随机排序逻辑

替换原来的randomAnswers函数，直接用数组sort方法打乱顺序，代码更简洁高效。

修改后的完整script.js代码 #

let currentCorrectAnswer = '';

window.onload = sendApiRequest;

async function sendApiRequest(){
    let response = await fetch("https://opentdb.com/api.php?amount=1&category=9&difficulty=easy&type=multiple");
    let data = await response.json();
    useApiData(data);
}

function useApiData(data){
    const questionData = data.results[0];
    document.querySelector("#category").innerHTML = `Category: ${questionData.category}`;
    document.querySelector("#difficulty").innerHTML = `Difficulty: ${questionData.difficulty}`;
    document.querySelector("#question").innerHTML = `Question: ${questionData.question}`;

    // 合并并打乱答案数组
    const allAnswers = [...questionData.incorrect_answers, questionData.correct_answer];
    const shuffledAnswers = allAnswers.sort(() => Math.random() - 0.5);

    // 分配答案到按钮
    document.querySelector("#answer1").innerHTML = shuffledAnswers[0];
    document.querySelector("#answer2").innerHTML = shuffledAnswers[1];
    document.querySelector("#answer3").innerHTML = shuffledAnswers[2];
    document.querySelector("#answer4").innerHTML = shuffledAnswers[3];

    // 保存当前正确答案
    currentCorrectAnswer = questionData.correct_answer;
}

// 给所有答案按钮绑定点击事件
const answerButtons = document.querySelectorAll("[id^='answer']");
answerButtons.forEach(button => {
    button.addEventListener("click", () => {
        if (button.textContent.trim() === currentCorrectAnswer.trim()) {
            alert("You got it right!");
        } else {
            alert(`You got it wrong! The correct answer is: ${currentCorrectAnswer}`);
        }
        sendApiRequest();
    });
});

额外说明 #

• 加入trim()是为了避免按钮内容存在多余空格导致判断错误
• 答错时直接提示正确答案，提升用户体验
• HTML代码无需修改，保持原样即可

内容的提问来源于stack exchange，提问作者Kiznet007