如何为在线测验添加图片，并实现提交答案后图片显隐功能

一、HTML结构调整 #

首先在测验区域旁新增一个默认隐藏的答案图片容器，同时可按需给题目添加配图容器：

<!-- 外层包裹用于布局调整 -->
<div class="quiz-wrapper">
  <!-- 原有测验核心区域 -->
  <div class="quiz-container">
    <!-- 新增题目配图容器 -->
    <div id="question-image" style="margin-bottom: 15px; display: none;">
      <img src="" alt="题目配图">
    </div>
    <div id="question"></div>
    <div id="options"></div>
    <button id="submit-btn">提交答案</button>
    <div id="feedback"></div>
  </div>

  <!-- 新增答案图片容器，默认隐藏 -->
  <div id="answer-image-container" style="display: none; margin-left: 30px;">
    <img id="answer-image" src="" alt="答案配图" style="max-width: 300px; height: auto;">
  </div>
</div>

二、JavaScript逻辑修改 #

1. 更新题目数据结构 #

给每道题补充题目配图、答案配图的URL字段：

const quizQuestions = [
  {
    question: "以下哪种动物是恒温哺乳动物？",
    questionImage: "images/animal-question.jpg", // 题目配图路径
    options: ["鳄鱼", "蝙蝠", "青蛙", "鲤鱼"],
    correctAnswer: 1,
    answerImage: "images/bat.jpg" // 答案配图路径
  },
  {
    question: "水的化学式是？",
    questionImage: "images/water-question.jpg",
    options: ["H₂O", "CO₂", "O₂", "NaCl"],
    correctAnswer: 0,
    answerImage: "images/water-molecule.jpg"
  }
  // 可继续添加更多题目
];

2. 题目加载逻辑 #

加载题目时自动隐藏答案图片，同时渲染题目配图（如果有）：

let currentQuestionIndex = 0;

function loadQuestion() {
  const currentQuestion = quizQuestions[currentQuestionIndex];
  
  // 隐藏答案图片容器
  document.getElementById('answer-image-container').style.display = 'none';
  // 清空反馈信息
  document.getElementById('feedback').textContent = '';
  
  // 处理题目配图
  const questionImgBox = document.getElementById('question-image');
  const questionImg = questionImgBox.querySelector('img');
  if (currentQuestion.questionImage) {
    questionImgBox.style.display = 'block';
    questionImg.src = currentQuestion.questionImage;
  } else {
    questionImgBox.style.display = 'none';
  }
  
  // 渲染题目和选项
  document.getElementById('question').textContent = currentQuestion.question;
  const optionsBox = document.getElementById('options');
  optionsBox.innerHTML = '';
  currentQuestion.options.forEach((option, index) => {
    const optionItem = document.createElement('div');
    optionItem.style.margin = '8px 0';
    optionItem.innerHTML = `<input type="radio" name="answer" value="${index}"> ${option}`;
    optionsBox.appendChild(optionItem);
  });
}

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

3. 答案提交与下一题逻辑 #

提交答案后显示反馈和对应图片，切换下一题时自动隐藏图片：

document.getElementById('submit-btn').addEventListener('click', function() {
  const selectedOption = document.querySelector('input[name="answer"]:checked');
  if (!selectedOption) {
    document.getElementById('feedback').textContent = '请先选择一个选项！';
    return;
  }

  const currentQuestion = quizQuestions[currentQuestionIndex];
  const userAnswer = parseInt(selectedOption.value);
  
  // 显示对错反馈
  if (userAnswer === currentQuestion.correctAnswer) {
    document.getElementById('feedback').textContent = `✅ 回答正确！正确答案：${currentQuestion.options[currentQuestion.correctAnswer]}`;
  } else {
    document.getElementById('feedback').textContent = `❌ 回答错误，正确答案：${currentQuestion.options[currentQuestion.correctAnswer]}`;
  }
  
  // 显示答案配图
  const answerImgBox = document.getElementById('answer-image-container');
  const answerImg = document.getElementById('answer-image');
  answerImg.src = currentQuestion.answerImage;
  answerImgBox.style.display = 'block';
  
  // 添加下一题按钮（避免重复创建）
  let nextBtn = document.getElementById('next-btn');
  if (!nextBtn) {
    nextBtn = document.createElement('button');
    nextBtn.id = 'next-btn';
    nextBtn.textContent = '下一题';
    nextBtn.style.marginTop = '10px';
    nextBtn.addEventListener('click', function() {
      currentQuestionIndex++;
      if (currentQuestionIndex < quizQuestions.length) {
        loadQuestion();
        this.remove();
      } else {
        document.querySelector('.quiz-container').innerHTML = '<h3>🎉 测验全部完成！</h3>';
        answerImgBox.style.display = 'none';
      }
    });
    document.querySelector('.quiz-container').appendChild(nextBtn);
  }
});

三、可选布局优化（CSS） #

让测验和图片横向排列，提升视觉体验：

.quiz-wrapper {
  display: flex;
  align-items: flex-start;
  max-width: 1000px;
  margin: 20px auto;
}
.quiz-container {
  flex: 1;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

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