title: How to have images in a JavaScript quiz?
body: <p>I'm working on a basic JavaScript quiz for my younger anime-loving siblings. I want to be able to have a different picture available for each question. How and Where could insert images for the questions? Notes about the quiz only one question are shown at a time. For the sake of publishing, I took out all the questions, aside from the first one.
  Code below:</p>
  <pre><code>var pos = 0,
    test, test_status, question, choice, choices, chA, chB, chC, chD, correct = 0;
  
  var questions = [{ //1
      question: &quot;What is Dazai's power from Bungo Stray Dogs?&quot;,
      a: &quot;No Longer Human&quot;,
      b: &quot;For the Tainted Sorrow&quot;,
      c: &quot;Rashomon&quot;,
      d: &quot;Unbreakable&quot;,
      answer: &quot;A&quot;
    }
  ];
  
  function get(x) {
    return document.getElementById(x);
  }
  
  function renderQuestion() {
    test = get(&quot;test&quot;);
    if (pos &gt;= questions.length) {
      test.innerHTML = &quot;&lt;h2&gt;You got &quot; + correct + &quot; of &quot; + questions.length + &quot; questions correct&lt;/h2&gt;&quot;;
      get(&quot;test_status&quot;).innerHTML = &quot;Test completed&quot;;
  
      pos = 0;
      correct = 0;
  
      return false;
    }
    get(&quot;test_status&quot;).innerHTML = &quot;Question &quot; + (pos + 1) + &quot; of &quot; + questions.length;
  
    question = questions[pos].question;
    chA = questions[pos].a;
    chB = questions[pos].b;
    chC = questions[pos].c;
    chD = questions[pos].d;
  
    test.innerHTML = &quot;&lt;h3&gt;&quot; + question + &quot;&lt;/h3&gt;&quot;;
  
  
    test.innerHTML += &quot;&lt;label&gt; &lt;input type='radio' name='choices' value='A'&gt; &quot; + chA + &quot;&lt;/label&gt;&lt;be&gt;&quot;;
    test.innerHTML += &quot;&lt;label&gt; &lt;input type='radio' name='choices' value='B'&gt; &quot; + chB + &quot;&lt;/label&gt;&lt;be&gt;&quot;;
    test.innerHTML += &quot;&lt;label&gt; &lt;input type='radio' name='choices' value='C'&gt; &quot; + chC + &quot;&lt;/label&gt;&lt;be&gt;&quot;;
    test.innerHTML += &quot;&lt;label&gt; &lt;input type='radio' name='choices' value='D'&gt; &quot; + chD + &quot;&lt;/label&gt;&lt;br&gt;&lt;be&gt;&quot;;
    test.innerHTML += &quot;&lt;button onclick='checkAnswer()'&gt;Submit Answer&lt;/button&gt;&quot;;
  }
  
  function checkAnswer() {
  
    choices = document.getElementsByName(&quot;choices&quot;);
    for (var i = 0; i &lt; choices.length; i++) {
      if (choices[i].checked) {
        choice = choices[i].value;
      }
    }
  
    if (choice == questions[pos].answer) {
      correct++;
    }
    pos++;
  
    renderQuestion();
  }
  
  window.addEventListener(&quot;load&quot;, renderQuestion);
  </code></pre>