JavaScript/HTML测验开发：如何设置图片作为可选答案

1. 调整问题数据结构 #

将myQuestions数组中每个问题的answers字段值修改为对应选项的图片路径，示例如下：

const myQuestions = [
  {
    question: "以下哪张图片是长颈鹿？",
    answers: {
      a: "./images/giraffe.jpg", // 正确答案对应图片路径
      b: "./images/elephant.jpg",
      c: "./images/tiger.jpg"
    },
    correctAnswer: "a"
  },
  // 其他图片类问题按同样格式补充
];

2. 修改答案渲染逻辑 #

找到buildQuiz函数中生成选项的代码段，把原来的文本输出改为img标签渲染：

answers.push(
  `<label>
    <input type="radio" name="question${questionNumber}" value="${letter}">
    ${letter} :
    <img src="${currentQuestion.answers[letter]}" alt="选项${letter}" class="quiz-option-img">
  </label>`
);

3. 调整HTML代码 #

删除原有冗余的<img id="myImg">标签，修改后HTML如下：

<h1>图片测验</h1>
<div class="quiz-container">
  <div id="quiz"></div>
</div>
<button id="previous">上一题</button>
<button id="next">下一题</button>
<button id="submit">提交测验</button>
<div id="results"></div>
<link href="newcss1.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap-reboot.rtl.min.css" type="text/css">
<script src="newjavascript.js" type="text/javascript"></script>

4. 可选：添加图片样式控制 #

在你的newcss1.css文件中加入以下样式，控制选项图片的显示尺寸，避免排版错乱：

.quiz-option-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin: 8px 12px;
  vertical-align: middle;
  border-radius: 4px;
}

原有逻辑里的判分、翻页功能不需要修改，直接可以复用。

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