JavaScript Quiz开发问题：修复题目答案显示及逐题加载功能

问题根源分析 #

• 你定义的questions是单个对象，重复的question、vastaus、correctAnswer键会被最后一个值覆盖，导致只显示最后一题的信息。
• 遍历questions的方式错误，没有正确访问题目内容，且innerHTML每次赋值会覆盖之前的内容，无法正确渲染题目和选项。
• 缺少当前题目索引的状态管理，无法实现逐题切换逻辑。
• checkGuess函数未实现，无法处理答案判断与下一题加载。

完整修复代码 #

HTML 调整（简化并优化结构） #

<div id="question-container">
  <p id="question-text"></p>
</div>
<div id="options-container">
  <form id="answer-form">
    <div class="option-item">
      <label for="opt-a">A) <span id="opt-a"></span></label>
      <input type="radio" class="answer-box" name="answer" value="a" onclick="checkGuess(this.value)">
    </div>
    <div class="option-item">
      <label for="opt-b">B) <span id="opt-b"></span></label>
      <input type="radio" class="answer-box" name="answer" value="b" onclick="checkGuess(this.value)">
    </div>
    <div class="option-item">
      <label for="opt-c">C) <span id="opt-c"></span></label>
      <input type="radio" class="answer-box" name="answer" value="c" onclick="checkGuess(this.value)">
    </div>
    <div class="option-item">
      <label for="opt-d">D) <span id="opt-d"></span></label>
      <input type="radio" class="answer-box" name="answer" value="d" onclick="checkGuess(this.value)">
    </div>
  </form>
</div>
<div id="feedback"></div>

JavaScript 修复与实现 #

// 用数组存储所有题目，每个元素是独立的题目对象
const questions = [
  {
    question: "Which city is the capital of Sweden?",
    vastaus: {
      a: 'Stockholm',
      b: 'Malmö',
      c: 'Göteborg',
      d: 'Helsingborg'
    },
    correctAnswer: 'a'
  },
  {
    question: "Which animal can be seen on the Porsche logo?",
    vastaus: {
      a: 'Buffalo',
      b: 'Horse',
      c: 'Jaguar',
      d: 'Deer'
    },
    correctAnswer: 'b'
  }
];

// 当前题目索引，初始为0（第一题）
let currentQuestionIndex = 0;

// 加载当前题目和选项
function loadCurrentQuestion() {
  const currentQuestion = questions[currentQuestionIndex];
  // 更新题目文本
  document.getElementById('question-text').textContent = currentQuestion.question;
  // 更新每个选项的文本
  document.getElementById('opt-a').textContent = currentQuestion.vastaus.a;
  document.getElementById('opt-b').textContent = currentQuestion.vastaus.b;
  document.getElementById('opt-c').textContent = currentQuestion.vastaus.c;
  document.getElementById('opt-d').textContent = currentQuestion.vastaus.d;
  // 清空反馈信息和选中状态
  document.getElementById('feedback').textContent = '';
  document.querySelectorAll('.answer-box').forEach(radio => radio.checked = false);
}

// 检查答案并处理下一题
function checkGuess(selectedValue) {
  const currentQuestion = questions[currentQuestionIndex];
  if (selectedValue === currentQuestion.correctAnswer) {
    document.getElementById('feedback').textContent = 'Correct!';
  } else {
    document.getElementById('feedback').textContent = `Wrong! Correct answer is ${currentQuestion.correctAnswer.toUpperCase()}`;
  }
  // 延迟加载下一题，让用户看到反馈
  setTimeout(() => {
    currentQuestionIndex++;
    if (currentQuestionIndex < questions.length) {
      loadCurrentQuestion();
    } else {
      // 所有题目完成
      document.getElementById('question-container').innerHTML = '<h3>Quiz completed!</h3>';
      document.getElementById('options-container').style.display = 'none';
    }
  }, 1000);
}

// 页面加载时初始化第一题
window.onload = loadCurrentQuestion;

关键修改说明 #

1. 题目数据结构修正：将单个questions对象改为数组，每个题目作为独立对象存储，避免键名覆盖。
2. 状态管理：添加currentQuestionIndex变量跟踪当前显示的题目，实现逐题切换。
3. 渲染逻辑优化：loadCurrentQuestion函数负责渲染当前题目的文本和选项，避免重复DOM操作。
4. 答案判断与切换：checkGuess函数验证用户选择，显示反馈后自动加载下一题，所有题目完成后显示结束提示。
5. HTML结构优化：调整选项的DOM结构，让选项文本与单选框关联更清晰，便于动态更新。

内容的提问来源于stack exchange，提问作者André