JavaScript/HTML测验重构双页后题目无法显示的问题求助

问题背景 #

我正在为大学项目开发一个基于JavaScript和HTML的测验应用。之前的版本是单页结构（设置了200%宽度），通过current类和透明度属性来切换显示/隐藏测验内容，但因为完全不响应式，我把它重构为index和quiz两个独立页面。目前还没开始做媒体查询，先想让核心功能跑起来，但现在测验题目完全不显示，而且控制台没有任何报错信息，实在找不到问题出在哪。

我的代码细节 #

核心JavaScript逻辑 #

const continueBtn = document.querySelector('.continue-btn');
const quizSection = document.querySelector('.quiz-section');
const quizBox = document.querySelector('.quiz-box');
const resultBox = document.querySelector('.result-box');
const tryAgainBtn = document.querySelector('.try-again-btn');
const homeBtn = document.querySelector('.home-button');

// 重新开始测验的点击事件（重置计数器和显示状态）
tryAgainBtn.onclick = () => {
  quizBox.classList.add('current');
  nextBtn.classList.remove('current');
  resultBox.classList.remove('current');
  questionCount = 0;
  questionNumb = 1;
  userScore = 0;
  showQuestions(questionCount);
  quizCounter(questionNumb);
  headerScore();
};

// 返回首页的点击事件
homeBtn.onclick = () => {
  quizSection.classList.remove('current');
  nextBtn.classList.remove('current');
  resultBox.classList.remove('current');
  questionCount = 0;
  questionNumb = 1;
  userScore = 0;
  showQuestions(questionCount);
  quizCounter(questionNumb);
};

// 初始化计数器
let questionCount = 0;
let questionNumb = 1;
let userScore = 0;

const quizQuestions = document.querySelector('.quiz-questions');

// 渲染题目和选项的函数
function showQuestions(i) {
  const questionText = document.querySelector('.question-title');
  questionText.textContent = `${questions[i].numb}. ${questions[i].question}`;
  
  let quizTag = `<div class="question"><span>${questions[i].options[0]}</span></div>
<div class="question"><span>${questions[i].options[1]}</span></div>
<div class="question"><span>${questions[i].options[2]}</span></div>
<div class="question"><span>${questions[i].options[3]}</span></div>`;
  
  quizQuestions.innerHTML = quizTag;
  
  const question = document.querySelectorAll('.question');
  for (let i = 0; i < question.length; i++) {
    question[i].setAttribute('onclick', 'questionSelected(this)');
  }
}

// 选项选择后的逻辑（判断对错+禁用选项）
function questionSelected(answer) {
  let userAnswer = answer.textContent;
  let correctAnswer = questions[questionCount].answer;
  let allQuestions = quizQuestions.children.length;

  if (userAnswer === correctAnswer) {
    answer.classList.add('correct');
    userScore += 1;
    headerScore();
  } else {
    answer.classList.add('incorrect');
    // 自动标记正确答案
    for (let i = 0; i < allQuestions; i++) {
      if (quizQuestions.children[i].textContent == correctAnswer) {
        quizQuestions.children[i].setAttribute('class', 'question correct');
      }
    }
  }

  // 禁用所有选项，防止重复选择
  for (let i = 0; i < allQuestions; i++) {
    quizQuestions.children[i].classList.add('disabled');
  }

  nextBtn.classList.add('current');
}

const nextBtn = document.querySelector('.next-btn');

// 下一题按钮的点击逻辑
nextBtn.onclick = () => {
  if (questionCount < questions.length - 1) {
    questionCount++;
    showQuestions(questionCount);
    questionNumb++;
    quizCounter(questionNumb);
    nextBtn.classList.remove('current');
  } else {
    showResultBox();
  }
};

// 渲染题目计数器（如"1 of 5 Questions"）
function quizCounter(i) {
  const quizTotal = document.querySelector('.quiz-total');
  quizTotal.textContent = `${i} of ${questions.length} Questions`;
}

// 更新头部的分数显示
function headerScore() {
  const headerScoreText = document.querySelector('.header-score');
  headerScoreText.textContent = `Score ${userScore} / ${questions.length}`;
}

// 显示结果页面
function showResultBox() {
  quizBox.classList.remove('current');
  resultBox.classList.add('current');
  const scoreText = document.querySelector('.score-text');
  scoreText.textContent = `You Scored ${userScore} Out Of ${questions.length}`;
}

HTML结构（quiz页面） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="assets/css/style.css" type="text/css">
  <title>InPhysical Quiz</title>
</head>
<body>
  <section class="quiz-section">
    <!-- 测验题目容器 -->
    <div class="quiz-box">
      <h2>InPhysical Quiz!</h2>
      <div class="quiz-header">
        <span>Fitness and Exercise Quiz</span>
        <span class="header-score">Score 0 / 5</span>
      </div>
      <h2 class="question-title">When squatting which muscle is not used?</h2>
      <div class="quiz-questions"></div>
      <div class="quiz-footer">
        <span class="quiz-total">1 of 5 Questions</span>
        <button class="next-btn">Next</button>
      </div>
    </div>
    <!-- 测验结果容器 -->
    <div class="result-box">
      <h2>Quiz Results!</h2>
      <div class="results-container">
        <span class="score-text">You Scored 0 Out Of 5</span>
      </div>
      <div class="buttons">
        <button class="try-again-btn">Try Again!</button>
        <button class="home-button">Home</button>
      </div>
    </div>
  </section>
</body>
<script defer src="assets/js/questions.js"></script>
<script defer src="assets/js/script.js"></script>
</html>

题目数组示例（assets/js/questions.js） #

let questions = [{
  numb: 1,
  question: 'When squatting which muscle is not used?',
  answer: 'D. Biceps',
  options: [
    'A. Glutes',
    'B. Quads',
    'C. Hamstrings',
    'D. Biceps',
  ]
},
{
  numb: 2,
  question: 'Which exercise targets the lats when working out?',
  answer: 'D. Cable Pull Down',
  options: [
    'A. Hyperextensions',
    'B. Overhead Press',
    'C. Box Squats',
    'D. Cable Pull Down',
  ]
}]

补充说明 #

之前的单页版本是通过200%宽度+current类+过渡动画来切换显示信息页和测验页，点击按钮后信息页隐藏，测验页滑入显示，完成5题后展示分数，还能重新开始。现在重构为双页后，核心逻辑是复用之前的JS，但题目完全不显示。

我的疑问 #

目前控制台没有任何报错，我实在找不到问题点。请问我是应该直接重写整个测验逻辑，还是有什么细节我漏掉了可以修复？

备注：内容来源于stack exchange，提问作者DJCave