title: Create JavaScript Quiz Using Dynamically Generated Elements
body: <p>**</p>
  
  <h1>How do I assign an answer value to each checkbox?</h1>
  
  <p>When viewed, this code produces (2) questions with (4) possible answers to each question. Next to each possible answer is a checkbox. Right now, each checkbox has a value of false, but I would like to tie the value of each checkbox to the possible answer next to it.</p>
  
  <p>Any ideas?</p>
  
  <p>**</p>
  
  <p>JavaScript-------------------------------------------------------------------</p>
  
  <pre><code>//JavaScript Quiz
  //Questions and answers - multi-dimensional array.
  var quizBank = [
  ["What object runs code continously until an exit condition is met?", "Loop", "Array","Function","Object"],
  ["Inside which HTML element do we put JavaScript?","javascript",
  "js","scripting","script"]
  ];
  
  //Adds ordered list, list items, and check-boxes. Iterates through array questions and answers.
  function printQuiz(quiz) {
  var check = "&lt;input type='checkbox' id= 'response' name='response' label='response'&gt;";
      var listHTML = "&lt;ol&gt;"
      for(i = 0; i &lt; quiz.length; i++){
      listHTML += "&lt;li&gt;" + (i + 1) +": " + quiz[i][0] + "&lt;/li&gt;" +
    "&lt;li&gt;" + check + quiz[i][1] + "&lt;/li&gt;" +
    "&lt;li&gt;" + check + quiz[i][2] + "&lt;/li&gt;" +
    "&lt;li&gt;" + check + quiz[i][3] + "&lt;/li&gt;" + 
    "&lt;li&gt;" + check + quiz[i][4] + "&lt;/li&gt;";
    }
    listHTML += "&lt;ol&gt;";
    return listHTML;
  }
  //prints printQuiz function to document
  document.getElementById("quiz").innerHTML = printQuiz(quizBank);
  
  /* Accessing the values of the checkboxes */
  /* First get the ol's li elements under #quiz */
  var listItems = document.getElementById("quiz").childNodes[0].childNodes;
  
  /* Iterate through them and look inside for the input */
  listItems.forEach(function(element) {
  
    if (element.childNodes.length &gt; 1) {
     // of the li's who have more than 1 child nodes, the first child node is the checkbox input.
     var checkbox = element.childNodes[0];
     console.log(checkbox.checked);
  
      });
  </code></pre>
  
  <p>HTML-----------------------------------------------------------------------------</p>
  
  <pre><code>&lt;div&gt;
  &lt;h1&gt;
  Quiz: Programming Concepts
  &lt;/h1&gt;
  &lt;div id="quiz"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS------------------------------------------------------------------------------</p>
  
  <pre><code>li {
    display: block;
    margin: 1em;
  
  }
  </code></pre>