JavaScript 测验游戏：实现所有问题回答完毕后立即结束游戏

function nextquestion(event) {
  if (event.target.className === "btn") {
    // ... 处理答案逻辑，计算分数或扣除时间 ...

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

// ... 其他代码 ...

let timeInterval; // 将 timeInterval 声明为全局变量，以便在任何地方清除

// ... startTimer 函数 ...
function startTimer() {
  timeInterval = setInterval(
    () => {
      timeLeft--;
      document.getElementById("timeSpan").innerHTML = timeLeft;
      if (timeLeft <= 0) {
        clearInterval(timeInterval);
        gameOver();
      }
    }, 1000
  );
};

// ... displayQuestion 函数 ...

function nextquestion(event) {
  if (event.target.className === "btn") {
    // ... 处理答案逻辑，计算分数或扣除时间 ...

    currentQuestion++; // 移动到下一个问题

    // 关键改动：检查是否所有问题都已回答完毕
    if (currentQuestion === questionKey.length) {
      clearInterval(timeInterval); // 停止计时器
      gameOver(); // 结束游戏
    } else {
      displayQuestion(); // 显示下一个问题
    }
  }
};

// ... gameOver 函数 ...

// calling in id/class from HTML 
const questionEl = document.getElementById("question");
// checkers 元素在原始HTML中没有对应的ID，如果不需要可移除或根据实际情况添加ID
// const checkers = document.getElementById("right-wrong"); 
const timerEl = document.getElementById("timeSpan"); // 更正为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: "++"
  }
];

// starting positions
let timeLeft = 60;
let score = 0;
let currentQuestion = -1;
let finalScore;
let timeInterval; // 声明 timeInterval 以便在任何函数中访问

// change div to start the test
function changeDiv(curr, next) {
  document.getElementById(curr).classList.add('hide');
  document.getElementById(next).removeAttribute('class');
}

// button to start the game
document.querySelector('#startButton').addEventListener('click', gameStart);

function gameStart() {
  changeDiv('start', 'questionHolder');
  currentQuestion = 0;
  displayQuestion();
  startTimer();
}

// timer function/Count down
function startTimer() {
  timeInterval = setInterval(
    () => {
      timeLeft--;
      document.getElementById("timeSpan").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;
}

// will end game when all questions are completed as well as populate the next question
document.querySelector('#questionHolder').addEventListener('click', nextquestion);

function nextquestion(event) {
  if (event.target.className === "btn") {
    console.log(event.target.textContent, questionKey[currentQuestion].answer);
    if (event.target.textContent === questionKey[currentQuestion].answer) {
      score += 10;
      console.log("correct");
      console.log(score);
    } else {
      if (timeLeft >= 10) {
        console.log(timeLeft);
        timeLeft = timeLeft - 10;
        document.getElementById("timeSpan").innerHTML = timeLeft;
        console.log("not correct");
      } else {
        timeLeft = 0;
        gameOver(); // 如果时间不足10秒，直接结束游戏
      }
    }
    currentQuestion++;

    // IF THERE ARE NO MORE QUESTIONS, CALL gameOver
    if (currentQuestion === questionKey.length) {
      clearInterval(timeInterval); // 停止计时器
      gameOver(); // 结束游戏
    } else {
      displayQuestion(); // 显示下一个问题
    }
  }
}

// the game is over and logs your current score
function gameOver() {
  document.getElementById("timeSpan").textContent = 0; // 直接设置span的文本
  changeDiv('questionHolder', 'finishedPage');
  finalScore = score;
  finalScoreEl.textContent = finalScore;
}