如何添加测验重启按钮并根据答案结果显示对应div？

核心思路 #

• 把测验题区域和结果区域做明确区分，通过CSS控制显示/隐藏状态
• 监听单选框选择变化，所有问题答完后自动切换到结果页
• 给结果页添加重启按钮，触发重置测验的逻辑

完整代码实现 #

HTML结构 #

先调整页面结构，将测验和结果分块包裹，每个结果div用data-result标识对应的答案组合：

<!-- 测验区域 -->
<div id="quiz-container">
  <!-- 第一组问题 -->
  <div class="question-group">
    <p>问题1：你喜欢哪种天气？</p>
    <label><input type="radio" name="q1" value="sunny"> 晴天</label>
    <label><input type="radio" name="q1" value="rainy"> 雨天</label>
  </div>

  <!-- 第二组问题 -->
  <div class="question-group">
    <p>问题2：你喜欢室内还是室外活动？</p>
    <label><input type="radio" name="q2" value="indoor"> 室内</label>
    <label><input type="radio" name="q2" value="outdoor"> 室外</label>
  </div>

  <!-- 第三组问题 -->
  <div class="question-group">
    <p>问题3：你喜欢独处还是社交？</p>
    <label><input type="radio" name="q3" value="alone"> 独处</label>
    <label><input type="radio" name="q3" value="social"> 社交</label>
  </div>
</div>

<!-- 结果区域（默认隐藏） -->
<div id="result-container" style="display: none;">
  <!-- 8种结果示例，按实际需求补充剩余6种 -->
  <div class="result-card" data-result="sunny-indoor-alone">
    <h3>结果1：宅家阳光党</h3>
    <p>你适合周末在窗边晒着太阳，窝在沙发里看书追剧。</p>
  </div>
  <div class="result-card" data-result="sunny-indoor-social">
    <h3>结果2：室内社交达人</h3>
    <p>约上好友来家里开派对，吃着零食玩桌游是你的最爱。</p>
  </div>
  <button id="restart-btn">重启测验</button>
</div>

CSS样式（可选优化） #

.question-group {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}
.result-card {
  padding: 20px;
  border-radius: 8px;
  background: #f5f5f5;
  margin-bottom: 15px;
}
#restart-btn {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#restart-btn:hover {
  background: #0056b3;
}

JavaScript逻辑 #

实现答题完成后的切换，以及重启功能：

const quizContainer = document.getElementById('quiz-container');
const resultContainer = document.getElementById('result-container');
const restartBtn = document.getElementById('restart-btn');

// 监听所有单选框的选择事件
document.querySelectorAll('input[type="radio"]').forEach(radio => {
  radio.addEventListener('change', checkAllAnswered);
});

// 检查是否所有问题都已作答
function checkAllAnswered() {
  let allAnswered = true;
  const answers = [];

  // 遍历每个问题组，收集答案并检查完成状态
  ['q1', 'q2', 'q3'].forEach(qName => {
    const selected = document.querySelector(`input[name="${qName}"]:checked`);
    if (!selected) {
      allAnswered = false;
    } else {
      answers.push(selected.value);
    }
  });

  // 全部答完后显示对应结果
  if (allAnswered) {
    const resultKey = answers.join('-');
    // 隐藏所有结果卡片，只显示匹配的那一个
    document.querySelectorAll('.result-card').forEach(card => {
      card.style.display = card.dataset.result === resultKey ? 'block' : 'none';
    });
    // 切换显示状态：隐藏测验，显示结果
    quizContainer.style.display = 'none';
    resultContainer.style.display = 'block';
  }
}

// 重启测验功能
restartBtn.addEventListener('click', () => {
  // 重置所有单选框的选中状态
  document.querySelectorAll('input[type="radio"]').forEach(radio => {
    radio.checked = false;
  });
  // 切换回测验页面
  resultContainer.style.display = 'none';
  quizContainer.style.display = 'block';
});

关键细节说明 #

• 用#quiz-container和#result-container做区域划分，方便快速切换显示状态
• 结果卡片的data-result值是三组答案用-拼接的字符串，和收集到的答案数组拼接后精准匹配
• 重启时不仅要切换显示，还要重置所有单选框的选中状态，避免下次进入直接触发结果逻辑

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