javascript - 如何在 JavaScript 测验中使用图像？

Question

我正在为我年轻的爱好动漫的 sibling 做一个基本的 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);

Answer 1

它相对简单，您已经通过将其他 DOM 元素连接到元素的末尾 innerHTML 来创建其他 DOM 元素。 ;你想要做的没有什么不同。
只需向您的问题对象添加另一个属性，然后添加相应的 <img> tag在您的连接语句中需要的地方:

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",
    //Add property to hold image source uri, either local or online
    img: "https://blog.qwant.com/wp-content/uploads/sites/3/2016/01/test.jpg"
  }];

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;
  //Add local var to hold uri
  img = questions[pos].img;

  test.innerHTML = "<h3>" + question + "</h3>";
  
  //Add <img> element to DOM with source
  test.innerHTML += "<img src=\"" + img + "\" width=\"200\" height=\"200\"><br>";

  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);

<div id="test_status"></div>
<div id="test"></div>

如果您喜欢，您甚至可以为您的问题对象添加宽度和高度属性，并将 url 动态添加到 <img>标签。

顺便说一句，您可能会从 templating library 中受益。对于这样的项目，即使是小项目。图书馆喜欢 Vue与连接到 innerHTML 相比，让事情变得更简单、更干净。一个 DOM 元素。