如何在JavaScript测验中获得图像？

我正在为我热爱动漫的弟弟妹妹做一个基本的JavaScript测试。我希望能够为每个问题提供不同的图片。如何以及在何处插入问题的图像？关于测验的笔记一次只显示一个问题。为了出版，除了第一个问题，我把所有的问题都删掉了。 代码如下：

var pos = 0,
  test, test_status, question, choice, choices, chA, chB, chC, chD, correct = 0;

var questions = [{ //1
    question: "What is Dazai's power from Bungo Stray Dogs?",
    a: "No Longer Human",
    b: "For the Tainted Sorrow",
    c: "Rashomon",
    d: "Unbreakable",
    answer: "A"
  }
];

function get(x) {
  return document.getElementById(x);
}

function renderQuestion() {
  test = get("test");
  if (pos >= questions.length) {
    test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
    get("test_status").innerHTML = "Test completed";

    pos = 0;
    correct = 0;

    return false;
  }
  get("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length;

  question = questions[pos].question;
  chA = questions[pos].a;
  chB = questions[pos].b;
  chC = questions[pos].c;
  chD = questions[pos].d;

  test.innerHTML = "<h3>" + question + "</h3>";


  test.innerHTML += "<label> <input type='radio' name='choices' value='A'> " + chA + "</label><be>";
  test.innerHTML += "<label> <input type='radio' name='choices' value='B'> " + chB + "</label><be>";
  test.innerHTML += "<label> <input type='radio' name='choices' value='C'> " + chC + "</label><be>";
  test.innerHTML += "<label> <input type='radio' name='choices' value='D'> " + chD + "</label><br><be>";
  test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}

function checkAnswer() {

  choices = document.getElementsByName("choices");
  for (var i = 0; i < choices.length; i++) {
    if (choices[i].checked) {
      choice = choices[i].value;
    }
  }

  if (choice == questions[pos].answer) {
    correct++;
  }
  pos++;

  renderQuestion();
}

window.addEventListener("load", renderQuestion);

var pos=0，
测试，测试状态，问题，选择，选择，chA，chB，chC，chD，正确=0；
变量问题=[{//1
问：“Bungo流浪狗带给大寨的力量是什么？”，
答：“不再是人类”，
b:“为了被玷污的悲伤”，
c:“拉肖门”，
d:“牢不可破”，
答:"A"
}
];
函数get（x）{
返回文档.getElementById（x）；
}
函数renderQuestion（）{
测试=获取（“测试”）；
如果（位置>=问题长度）{
test.innerHTML=“您得到了“+问题数+长度数+问题数+正确数”中的“+正确数”；
获取（“测试状态”）.innerHTML=“测试完成”；
pos=0；
正确=0；
返回false；
}
获取“+questions.length”的“+test_status”）.innerHTML=“Question”+（pos+1）+”；
问题=问题[pos]。问题；
chA=问题[pos].a；
chB=问题[pos].b；
chC=问题[pos].c；
chD=问题[pos].d；
test.innerHTML=“+问题+”；
test.innerHTML+=“”+chA+“”；
test.innerHTML+=“”+chB+“”；
test.innerHTML+=“”+chC+“”；
test.innerHTML+=“+chD+”
”；
test.innerHTML+=“提交答案”；
}
函数checkAnswer（）{
选项=document.getElementsByName（“选项”）；
for（var i=0；i

在您的问题集合中，只需添加一个

url

属性，该属性包含您使用unix表示法在线或本地上传到某处的图像的url

例如：

url:“./images/question1.jpg”

然后

---

test.innerHTML+=“；”

将其添加到DOM。（Index是要渲染的集合项的索引，可能使用的是for循环或map函数。）

这相对简单，您已经通过将其他DOM元素连接到元素的

innerHTML

末尾来创建它们了；你想要做的也一样

只需向问题对象添加另一个属性，并在连接语句中添加所需的相应属性：

var pos=0，
测试，测试状态，问题，选择，选择，chA，chB，chC，chD，正确=0；
变量问题=[{//1
问：“Bungo流浪狗带给大寨的力量是什么？”，
答：“不再是人类”，
b:“为了被玷污的悲伤”，
c:“拉肖门”，
d:“牢不可破”，
答:"A"，
//添加属性以保存图像源uri（本地或联机）
img:“https://blog.qwant.com/wp-content/uploads/sites/3/2016/01/test.jpg"
}];
函数get（x）{
返回文档.getElementById（x）；
}
函数renderQuestion（）{
测试=获取（“测试”）；
如果（位置>=问题长度）{
test.innerHTML=“您得到了“+问题数+长度数+问题数+正确数”中的“+正确数”；
获取（“测试状态”）.innerHTML=“测试完成”；
pos=0；
正确=0；
返回false；
}
获取“+questions.length”的“+test_status”）.innerHTML=“Question”+（pos+1）+”；
问题=问题[pos]。问题；
chA=问题[pos].a；
chB=问题[pos].b；
chC=问题[pos].c；
chD=问题[pos].d；
//添加本地变量以保存uri
img=问题[pos].img；
test.innerHTML=“+问题+”；
//添加
”；
test.innerHTML+=“”+chA+“”；
test.innerHTML+=“”+chB+“”；
test.innerHTML+=“”+chC+“”；
test.innerHTML+=“+chD+”
”；
test.innerHTML+=“提交答案”；
}
函数checkAnswer（）{
选项=document.getElementsByName（“选项”）；
for（var i=0；i

@Lawrence Cherone vue没有标记，超出了问题的范围。让我们回到石器时代，没有意义的制造汽车，当我们可以步行时，你能用HTML创建一个复制吗？谢谢，这非常有效，我很感激。我也会研究模板库。