JavaScript问答游戏优化：实现问题全部回答后的即时结束机制

function nextquestion(event) {
  if (event.target.className === "btn") {
    // ... 答案判断和分数/时间更新逻辑 ...

    currentQuestion++; // 推进到下一个问题
    displayQuestion(); // 显示下一个问题
  }
};

// 在全局作用域或适当的父作用域中声明
let timeInterval; // 用于存储计时器ID

function nextquestion(event) {
  if (event.target.className === "btn") {
    // ... 答案判断和分数/时间更新逻辑 ...

    currentQuestion++; // 推进到下一个问题

    // 新增的逻辑：检查是否所有问题都已回答
    if (currentQuestion === questionKey.length) {
      clearInterval(timeInterval); // 停止计时器
      gameOver(); // 调用游戏结束函数
    } else {
      displayQuestion(); // 如果还有问题，则显示下一个
    }
  }
};

// calling in id/class from HTML 
const questionEl = document.getElementById("question")
const checkers = document.getElementById("right-wrong")
// 注意：timerEl 应该直接指向显示时间的元素，而不是一个集合
const timeSpanEl = document.getElementById("timeSpan"); 
const answerOne = document.getElementById("answer1")
const answerTwo = document.getElementById("answer2")
const answerThree = document.getElementById("answer3")
const answerFour = document.getElementById("answer4")
const finalScoreEl = document.getElementById("pointScore")
const nameEl = document.getElementById("initials")
const highScoreEl = document.getElementById("highScoreList")

// 题目数据
var questionKey = [
  {
    question: "which variable has the value of a string.",
    choiceOne: "x = 6",
    choiceTwo: "x = \"87\"",
    choiceThree: "x = true",
    choiceFour: "x;",
    answer: "x = \"87\""
  },
  {
    question: "choose the operator that checks for value and type.",
    choiceOne: "=",
    choiceTwo: "+=",
    choiceThree: "===",
    choiceFour: "<=;",
    answer: "==="
  },
  {
    question: "choose the true statement.",
    choiceOne: "4 != 4",
    choiceTwo: "4 > 85",
    choiceThree: "7 === \"7\"",
    choiceFour: "7.6 == \"7.6\"",
    answer: "7.6 == \"7.6\""
  },
  {
    question: "which data type is not primitive.",
    choiceOne: "boolean",
    choiceTwo: "array",
    choiceThree: "number",
    choiceFour: "string",
    answer: "array"
  },
  {
    question: "Which one is the Increment operator.",
    choiceOne: "**",
    choiceTwo: "/",
    choiceThree: "++",
    choiceFour: "+=",
    answer: "++"
  }
];

// 游戏状态变量
let timeLeft = 60;
let score = 0;
let currentQuestion = -1; // 初始值为-1，在游戏开始时设为0
let finalScore;
let timeInterval; // 声明在全局作用域，以便能被多个函数访问

// 切换页面显示区域
function changeDiv(curr, next) {
  document.getElementById(curr).classList.add('hide');
  document.getElementById(next).removeAttribute('class');
};

// 开始游戏按钮事件监听
document.querySelector('#startButton').addEventListener('click', gameStart);

function gameStart() {
  changeDiv('start', 'questionHolder');
  currentQuestion = 0; // 从第一个问题开始
  displayQuestion();
  startTimer();
};

// 计时器函数
function startTimer() {
  timeInterval = setInterval(() => {
    timeLeft--;
    timeSpanEl.innerHTML = timeLeft; // 更新显示的时间
    if (timeLeft <= 0) {
      clearInterval(timeInterval); // 时间归零时停止计时器
      gameOver();
    }
  }, 1000);
};

// 显示当前问题
function displayQuestion() {
  questionEl.textContent = questionKey[currentQuestion].question;
  answerOne.textContent = questionKey[currentQuestion].choiceOne;
  answerTwo.textContent = questionKey[currentQuestion].choiceTwo;
  answerThree.textContent = questionKey[currentQuestion].choiceThree;
  answerFour.textContent = questionKey[currentQuestion].choiceFour;
}

// 监听问题容器的点击事件，处理答案选择
document.querySelector('#questionHolder').addEventListener('click', nextquestion);

function nextquestion(event) {
  if (event.target.className === "btn") {
    // 1. 判断答案是否正确并更新分数
    if (event.target.textContent === questionKey[currentQuestion].answer) {
      score += 10;
      console.log("正确！当前分数:", score);
    } else {
      // 2. 如果答案错误，扣除时间
      if (timeLeft >= 10) {
        timeLeft -= 10;
        timeSpanEl.innerHTML = timeLeft; // 更新显示的时间
        console.log("不正确！剩余时间:", timeLeft);
      } else {
        // 时间不足10秒，直接归零并结束游戏
        timeLeft = 0;
        timeSpanEl.innerHTML = timeLeft; // 确保显示时间为0
        clearInterval(timeInterval); // 确保在时间耗尽时也停止计时器
        gameOver();
        return; // 结束当前函数执行
      }
    }

    currentQuestion++; // 推进到下一个问题索引

    // 3. 检查是否所有问题都已回答完毕
    if (currentQuestion === questionKey.length) {
      clearInterval(timeInterval); // 所有问题答完，立即停止计时器
      gameOver(); // 调用游戏结束函数
    } else {
      displayQuestion(); // 还有问题，继续显示下一个
    }
  }
};

// 游戏结束函数
function gameOver() {
  // 确保 timerEl 指向正确的元素，这里使用 timeSpanEl
  timeSpanEl.textContent = 0; // 确保最终显示时间为0
  changeDiv('questionHolder', 'finishedPage'); // 切换到结果页面
  finalScore = score;
  finalScoreEl.textContent = finalScore; // 显示最终分数
};