J*aScript Trivia游戏答案判断错误问题排查与修复

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript Trivia游戏答案判断错误问题排查与修复

2025-10-13

浏览次数：次

返回列表

javascript trivia游戏答案判断错误问题排查与修复

本文旨在解决J*aScript Trivia游戏中答案判断始终返回第一个答案为正确的错误。通过分析问题代码，找出`checkAnswer`函数中`currentQuestion`变量的错误使用，并提供修改后的代码示例，帮助开发者理解和修复类似问题，确保Trivia游戏逻辑的正确性。

在开发Trivia游戏时，一个常见的错误是答案判断逻辑不正确，导致无论选择哪个答案，程序总是认为第一个答案是正确的。这通常是因为在答案检查函数中，对当前问题的索引处理不当。以下将详细分析问题原因，并提供解决方案。

问题分析

在提供的代码片段中，checkAnswer函数存在一个关键错误：

function checkAnswer(bntIndex) {
  nextButton.classList.remove('hide');
  const currentQuestion = 0; // 错误：总是使用第一个问题
  answer = questions[currentQuestion].answers[bntIndex];
  if(answer.correct === true) {
    incrementPoints();
    result.textContent = "Correct!";
  } else {
    result.textContent = "Incorrect";
  }
}

该函数定义了一个常量 currentQuestion 并将其赋值为 0。这意味着无论用户点击哪个答案按钮，checkAnswer 函数总是会检查 questions 数组中第一个问题的答案，导致只有第一个问题的第一个答案才会被判定为正确。

解决方案

要解决这个问题，需要将 currentQuestion 变量替换为实际当前问题的索引。由于 randomQuestion 变量在 nextQuestion 函数中存储了当前问题，因此可以直接使用 randomQuestion 来访问当前问题的答案。

秀脸FacePlay

一款集成AI换脸、照片跳舞等多种AI特效玩法的App

124

查看详情

修改后的 checkAnswer 函数如下：

function checkAnswer(bntIndex) {
  nextButton.classList.remove('hide');
  // const currentQuestion = 0; // 删除此行
  answer = randomQuestion.answers[bntIndex]; // 使用 randomQuestion
  if(answer.correct === true) {
    incrementPoints();
    result.textContent = "Correct!";
  } else {
    result.textContent = "Incorrect";
  }
}

完整代码示例 (包含上下文)

为了更好地理解修改后的代码，这里提供一个包含上下文的完整示例：

<!DOCTYPE html>
<html>
<head>
<title>Trivia Game</title>
</head>
<body>
  <div id="question-container">
    <div id="question"></div>
    <div id="answers">
      <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>
    <button id="next-button" class="hide">Next</button>
    <div id="result"></div>
  </div>

  <script>
    const questionText = document.getElementById('question');
    const answersContainer = document.getElementById('answers');
    const nextButton = document.getElementById('next-button');
    const result = document.getElementById('result');

    let questions = [
      {
        question: '10 + 5 equals:',
        answers: [
          { text: '5', correct: false },
          { text: '10', correct: false },
          { text: '20', correct: false },
          { text: '15', correct: true }
        ]
      },
      {
        question: '2 + 2 equals:',
        answers: [
          { text: '3', correct: false },
          { text: '4', correct: true },
          { text: '5', correct: false },
          { text: '6', correct: false }
        ]
      }
    ];

    let randomQuestion;

    nextButton.addEventListener('click', nextQuestion);

    function startGame() {
      nextQuestion();
    }

    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');
      // const currentQuestion = 0; // 删除此行
      answer = randomQuestion.answers[bntIndex]; // 使用 randomQuestion
      if(answer.correct === true) {
        incrementPoints();
        result.textContent = "Correct!";
      } else {
        result.textContent = "Incorrect";
      }
    }

    function incrementPoints() {
      // 在这里实现你的积分逻辑
      console.log("Correct answer!");
    }

    startGame();
  </script>
</body>
</html>

注意事项

确保 randomQuestion 在 checkAnswer 函数被调用时已经正确赋值。
incrementPoints 函数需要根据你的游戏逻辑进行实现。
这个例子只是一个基础框架，可以根据需求进行扩展和优化。

总结

通过移除 checkAnswer 函数中错误的 currentQuestion 变量，并使用 randomQuestion 来访问当前问题的答案，可以解决Trivia游戏中答案判断错误的问题。在开发过程中，仔细检查变量的作用域和赋值，可以避免类似错误的发生。调试是软件开发过程中必不可少的一环，善于利用 console.log 等工具可以帮助我们快速定位和解决问题。

以上就是J*aScript Trivia游戏答案判断错误问题排查与修复的详细内容，更多请关注其它相关文章！

# 是因为 # 莱山行业网站建设 # 深圳动画营销推广可靠吗 # 厦门seo优化搜索排名 # 门户网站建设需求文档 # 大规模网站建设材料包括 # 企业seo实施培训 # 附近网站建设哪家好 # 百度关键词排名怎么排 # 广元网站优化找哪家 # 贵州遵义门户网站建设 # 来访问 # 才会 # 游戏中 # javascript # 在这里 # 过程中 # 连接到 # 解决问题 # 置顶 # 第一个 # 作用域 # 软件开发 # ai # ssl # 工具 # html # java

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：如何设计一个支持多租户的SaaS应用后端？

下一篇：在函数组合与管道中，如何利用高阶函数构建可复用的工具函数？

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

J*aScript Trivia游戏答案判断错误问题排查与修复