JavaScript实现真假邮件识别测验 提交答案后切换标注图片问题

修改思路 #

1. 扩展题目数据结构，新增标注版图片路径和辨别依据说明两个属性
2. 调整答题流程：用户提交答案后不直接切换题目，先替换原始截图为标注版本、展示辨别依据，用户点击「下一题」按钮后再切换到下一题
3. 新增对应交互元素：解释文本展示区、下一题按钮

具体代码改动 #

1. HTML 修改 #

在原有按钮容器下方新增解释展示区和下一题按钮，默认隐藏：

<div class="grid">
  <div id="quiz">
    <h1>Can you spot the fake email?</h1>
    <hr style="margin-bottom: 20px">
    <p id="question"></p>
    <div class="buttons">
      <button id="btn0"><span id="choice0"></span></button>
      <button id="btn1"><span id="choice1"></span></button>
    </div>
    <!-- 新增：解释展示区，默认隐藏 -->
    <p id="explanation" style="display: none; margin: 15px 0; font-size: 16px; color: #333;"></p>
    <!-- 新增：下一题按钮，默认隐藏 -->
    <button id="nextBtn" style="display: none; background-color: #0066cc; color: #fff; padding: 10px 25px; border: none; font-size: 18px; cursor: pointer;">下一题</button>
    <hr style="margin-top: 50px">
    <footer>
      <p id="progress">Question x of y</p>
    </footer>
  </div>
</div>

2. CSS 补充（可选，也可直接用上面的行内样式） #

如果要统一管理样式，可以在原有CSS代码末尾添加：

#explanation {
  margin: 15px 0;
  font-size: 16px;
  color: #333;
}
#nextBtn {
  background-color: #0066cc;
  color: #fff;
  padding: 10px 25px;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
#nextBtn:hover {
  background-color: #0052a3;
}

3. JavaScript 修改 #

第一步：扩展Question构造函数

新增标注图和解释属性：

function Question(text, choices, answer, markedImg, explanation) {
  this.text = text;
  this.choices = choices;
  this.answer = answer;
  this.markedImg = markedImg; // 标注版图片的HTML代码
  this.explanation = explanation; // 辨别依据说明
}

第二步：更新题目列表

给每个题目补充对应的标注图和说明（提前准备好标注版图片，替换下面的示例路径和说明）：

var questions = [
  new Question("<img src= 'netflix_fake.jpg' />", ["Real", "Fake"], "Fake", "<img src='netflix_fake_marked.jpg' />", "发件人域名非Netflix官方域名，跳转链接为钓鱼地址，属于伪造邮件。"),
  new Question("<img src= 'dropbox_real.jpg' />", ["Real", "Fake"], "Real", "<img src='dropbox_real_marked.jpg' />", "发件人域名、安全标识、跳转链接均符合Dropbox官方邮件特征，属于真实邮件。"),
  new Question("<img src= 'gov_real.jpg' />", ["Real", "Fake"], "Real", "<img src='gov_real_marked.jpg' />", "域名后缀为官方gov域名，且有官方安全签章，属于真实邮件。"),
  new Question("<img src= 'paypal_fake.jpg' />", ["Real", "Fake"], "Fake", "<img src='paypal_fake_marked.jpg' />", "邮件要求输入敏感支付信息，且发件人域名为仿冒域名，属于伪造邮件。"),
  new Question("<img src= 'gmail.jpg' />", ["Real", "Fake"], "Fake", "<img src='gmail_marked.jpg' />", "仿冒Gmail官方登录提醒，跳转链接为钓鱼网址，属于伪造邮件。")
];

第三步：调整答题交互逻辑

修改原有的guess函数，新增下一题按钮的点击事件绑定：

function guess(id, userGuess) {
  var button = document.getElementById(id);
  button.onclick = function() {
    var currentQuestion = quiz.getQuestionIndex();
    // 计分
    if (currentQuestion.isCorrectAnswer(userGuess)) {
      quiz.score++;
    }
    // 替换为标注版图片
    document.getElementById("question").innerHTML = currentQuestion.markedImg;
    // 显示正确答案和辨别依据
    var expEle = document.getElementById("explanation");
    expEle.innerHTML = `正确答案：${currentQuestion.answer}<br>辨别依据：${currentQuestion.explanation}`;
    expEle.style.display = "block";
    // 禁用答题按钮，防止重复提交
    document.getElementById("btn0").disabled = true;
    document.getElementById("btn1").disabled = true;
    // 显示下一题按钮
    document.getElementById("nextBtn").style.display = "block";
  }
};

// 绑定下一题按钮事件
document.getElementById("nextBtn").onclick = function() {
  // 题目索引+1
  quiz.questionIndex++;
  // 重置页面状态
  document.getElementById("explanation").style.display = "none";
  document.getElementById("nextBtn").style.display = "none";
  document.getElementById("btn0").disabled = false;
  document.getElementById("btn1").disabled = false;
  // 加载下一题/显示结果
  populate();
};

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