如何在HTML测验完成后根据结果显示对勾或叉号图片？

需求说明 #

我希望在HTML页面的测验完成后，根据每题结果显示对勾或叉号图片。我认为需要在JavaScript的if语句中添加条件，但不确定如何让该语句在测验结束时触发显示；还考虑在每个问题末尾添加img标签，仅在测验完成、用户查看结果时显示对应图片。

解决方案 #

步骤1：调整HTML结构

给每个问题添加容器，同时预留一个用于显示对错图的隐藏元素：

<!-- 问题1 -->
<div class="question-item">
  <p>1) What does Malware stand for?</p>
  <input type="radio" name="q1" value="a">a) Malicious Software <br>
  <input type="radio" name="q1" value="b">b) Evil Software<br>
  <input type="radio" name="q1" value="c">c) Mail Software<br>
  <img class="result-icon" src="" alt="" style="display: none; margin-left: 10px; width: 20px;">
</div>

<!-- 问题2 -->
<div class="question-item">
  <p>2) What does the term RAT mean?</p>
  <input type="radio" name="q2" value="a">a) Regulatory Access Terminal<br>
  <input type="radio" name="q2" value="b">b) Random Access Timeserver<br>
  <input type="radio" name="q2" value="c">c) Remote Access Tool<br>
  <img class="result-icon" src="" alt="" style="display: none; margin-left: 10px; width: 20px;">
</div>

<!-- 问题5（按原有逻辑保留） -->
<div class="question-item">
  <p>5) [原问题内容]</p>
  <input type="radio" name="q5" value="a">...<br>
  <input type="radio" name="q5" value="b">...<br>
  <img class="result-icon" src="" alt="" style="display: none; margin-left: 10px; width: 20px;">
</div>

<!-- 评分区域与提交按钮 -->
<div id="quizGrade"></div>
<button onclick="checkAllAnswers()">提交答案</button>

步骤2：修改JavaScript逻辑

在检查每题答案的同时，直接设置对应问题的对错图标显示：

// 定义所有问题的正确答案映射
const correctAnswerMap = {
  q1: "a",
  q2: "c",
  q5: "b"
};

function checkAllAnswers() {
  let score = 0;
  // 获取所有结果图标元素
  const resultIcons = document.querySelectorAll(".result-icon");
  let iconIndex = 0;

  // 检查问题1
  const q1Options = document.querySelectorAll('input[name="q1"]');
  let isQ1Correct = false;
  for (let i = 0; i < q1Options.length; i++) {
    if (q1Options[i].checked) {
      isQ1Correct = q1Options[i].value === correctAnswerMap.q1;
      if (isQ1Correct) score++;
      break;
    }
  }
  // 设置问题1的图标
  resultIcons[iconIndex].src = isQ1Correct ? "check.png" : "cross.png";
  resultIcons[iconIndex].alt = isQ1Correct ? "正确" : "错误";
  resultIcons[iconIndex].style.display = "inline-block";
  iconIndex++;

  // 检查问题2
  const q2Options = document.querySelectorAll('input[name="q2"]');
  let isQ2Correct = false;
  for (let i = 0; i < q2Options.length; i++) {
    if (q2Options[i].checked) {
      isQ2Correct = q2Options[i].value === correctAnswerMap.q2;
      if (isQ2Correct) score++;
      break;
    }
  }
  // 设置问题2的图标
  resultIcons[iconIndex].src = isQ2Correct ? "check.png" : "cross.png";
  resultIcons[iconIndex].alt = isQ2Correct ? "正确" : "错误";
  resultIcons[iconIndex].style.display = "inline-block";
  iconIndex++;

  // 检查问题5（保留原有逻辑）
  const q5 = document.querySelectorAll('input[name="q5"]');
  let isQ5Correct = false;
  for (let i = 0; i < q5.length; i++) {
    if (q5[i].checked && q5[i].value === correctAnswerMap.q5) {
      score++;
      isQ5Correct = true;
      break;
    }
  }
  // 设置问题5的图标
  resultIcons[iconIndex].src = isQ5Correct ? "check.png" : "cross.png";
  resultIcons[iconIndex].alt = isQ5Correct ? "正确" : "错误";
  resultIcons[iconIndex].style.display = "inline-block";

  // 显示最终评分
  const quizGrade = document.getElementById("quizGrade");
  if (score === 5) {
    quizGrade.innerHTML = "你答对了5题中的5题！你的网络安全知识很扎实";
  } else {
    quizGrade.innerHTML = `你答对了5题中的${score}题。多做些研究，你可以的！`;
  }
}

关键提示

• 提前准备好对勾（check.png）和叉号（cross.png）图标文件，放在项目根目录或指定路径下
• 每个问题的result-icon元素与问题一一对应，通过iconIndex控制顺序
• 点击提交按钮时触发checkAllAnswers函数，一次性完成答案检查与图标显示

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