JavaScript Trivia游戏：修复答案判断逻辑错误-html教程-PHP中文网

JavaScript Trivia游戏：修复答案判断逻辑错误

心靈之曲

发布： 2025-10-13 12:59:20

原创

202人浏览过

javascript trivia游戏：修复答案判断逻辑错误

本文旨在帮助开发者解决JavaScript Trivia游戏中答案判断逻辑错误的问题。通过分析错误代码，找出问题根源在于固定使用第一个问题进行答案校验。文章提供修改后的代码示例，确保游戏能够正确判断用户选择的答案是否正确，从而提升用户体验。

在开发Trivia游戏时，正确判断用户选择的答案至关重要。如果答案判断逻辑出现错误，会导致用户体验下降，甚至影响游戏的可玩性。本文将针对一种常见的错误情况进行分析和修复，即在多选题游戏中，无论用户选择哪个答案，程序始终判断第一个答案是否正确。

问题分析

问题的根源在于checkAnswer函数中对currentQuestion变量的错误使用。原始代码中，currentQuestion被硬编码为0，导致程序始终使用问题数组中的第一个问题进行答案校验，而忽略了当前实际显示的问题。

立即学习“Java免费学习笔记（深入）”；

function checkAnswer(bntIndex) {
  nextButton.classList.remove('hide');
  const currentQuestion = 0; // 错误：currentQuestion应该引用当前问题
  answer = questions[currentQuestion].answers[bntIndex];
  if(answer.correct === true) {
    incrementPoints();
    result.textContent = "Correct!";
  } else {
    result.textContent = "Incorrect";
  }
}

登录后复制

解决方案

要解决这个问题，我们需要确保checkAnswer函数能够正确引用当前显示的问题。由于randomQuestion变量存储了当前显示的问题，因此我们可以直接使用它来获取答案。

修改后的checkAnswer函数如下：

绘蛙AI修图

绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

129

查看详情

function checkAnswer(bntIndex) {
  nextButton.classList.remove('hide');
  answer = randomQuestion.answers[bntIndex]; // 正确：使用randomQuestion获取当前问题的答案
  if(answer.correct === true) {
    incrementPoints();
    result.textContent = "Correct!";
  } else {
    result.textContent = "Incorrect";
  }
}

登录后复制

通过将answer变量的赋值语句修改为answer = randomQuestion.answers[bntIndex];，我们确保了程序能够根据用户选择的按钮索引（bntIndex）从当前问题的答案数组中获取正确的答案。

完整代码示例

为了方便理解，以下是包含修改后的checkAnswer函数的完整代码示例：

const questions = [
  {
    question: '10 + 5 equals:',
    answers: [
      { text: '5', correct: false },
      { text: '10', correct: false },
      { text: '20', correct: false },
      { text: '15', correct: true }
    ]
  }
];

let randomQuestion;
const nextButton = document.getElementById('next-button'); // 假设你有一个next按钮
const questionText = document.getElementById('question-text'); // 假设你有一个显示问题的元素
const result = document.getElementById('result'); // 假设你有一个显示结果的元素

function nextQuestion() {
  nextButton.classList.add('hide');
  randomQuestion = questions[Math.floor(Math.random()*questions.length)];
  questionText.textContent = randomQuestion.question;
  randomQuestion.answers.forEach((answer, index) => {
    document.getElementById(`answers-btn-${index + 1}`).textContent = answer.text;
    result.textContent = "";
  });
}

function checkAnswer(bntIndex) {
  nextButton.classList.remove('hide');
  answer = randomQuestion.answers[bntIndex];
  if(answer.correct === true) {
    incrementPoints(); // 假设你有一个函数来增加分数
    result.textContent = "Correct!";
  } else {
    result.textContent = "Incorrect";
  }
}

// 假设你有一个函数来增加分数
function incrementPoints() {
  // TODO: 实现增加分数的逻辑
  console.log("Correct Answer!");
}

// 示例HTML结构
// <div id="question-text"></div>
// <button id="answers-btn-1" onclick="checkAnswer(0)" class="answers-btn"></button>
// <button id="answers-btn-2" onclick="checkAnswer(1)" class="answers-btn"></button>
// <button id="answers-btn-3" onclick="checkAnswer(2)" class="answers-btn"></button>
// <button id="answers-btn-4" onclick="checkAnswer(3)" class="answers-btn"></button>
// <div id="result"></div>
// <button id="next-button" onclick="nextQuestion()">Next</button>

登录后复制

注意事项