title: Checking if a radio button selection matches an item in an array using JavaScript or jQuery
body: <p>At this point I am just testing to see if I can compare the radio button selected with the correct answer in the array. See comments below:</p>
  
  <pre><code>var allQuestions = [{
          "question": "Who was Luke's wingman in the battle at Hoth?",
          "choices": ["Dak", "Biggs", "Wedge", "fx-7"],
          "correctAnswer": 0
      }];
  
  
  function answerFwd() {
      var answerOutput = " ";
      var itemAnswers = allQuestions;
      var answer = 0;
      var playerTally = 0;
      var playerFeedback = "";
      var playerMessage = document.getElementById("playerMessage");
  
  
      // Is this the correct way to store the radio button which is selected?
      var radioValue = $("input[type='radio'].radioButtons").is(':checked');
  
      var right = false;
  
      if (currentAnswer &lt;= itemAnswers.length) {
          currentAnswer++;
      }
  
      createRadioButtonFromArray(itemAnswers[currentQuestion].choices);
  
      //Then compare value in array with radioValue value
      if(radioValue == itemAnswers.correctAnswer){
            right = true;
      }           
  
      if(right) {
          alert("You answered correctly");
      } else {
          alert("Wrong answer");
      }
  </code></pre>
  
  <p>}  </p>
  
  <p>I suspect my mistake is I am not comparing <code>correctAnswer:3</code> with the <code>radioValue</code> correctly. What would make sense is the index of the button matched with value. Would a <code>for-loop</code> be the best way? 
  Thanks in advance!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This is the code which creates the buttons:</p>
  
  <pre><code> function createRadioButtonFromArray(array) {
     var len = array.length; 
     var responses = document.getElementById("responses"); 
     responses.innerHTML = ''; 
      for (var i = 0; i &lt; len; i++) {
       radio = document.createElement("input"); 
       radio.type = "radio";
       radio.name = "choices"; 
       radio.className = "radioButtons"; 
       radio.value = i; 
       radio.id = "choice" + i; 
       var radioText = document.createElement("div"); 
       radioText.id = "c" + i; 
       radioText.className = "choiceText"; 
       radioText.innerHTML = array[i]; 
       responses.appendChild(radio); 
       responses.appendChild(radioText); 
     }
  }
  </code></pre>
  
  <p>And this how it renders:</p>
  
  <pre><code>&lt;div id="responses"&gt;
  &lt;input type="radio" name="choices" class="radioButtons" value="0" id="choice0"&gt;
  &lt;div id="c0" class="choiceText"&gt;The Avenger&lt;/div&gt;
  &lt;input type="radio" name="choices" class="radioButtons" value="1" id="choice1"&gt;
  &lt;div id="c1" class="choiceText"&gt;Devastator &lt;/div&gt;
  &lt;input type="radio" name="choices" class="radioButtons" value="2" id="choice2"&gt;
  &lt;div id="c2" class="choiceText"&gt;Conquest&lt;/div&gt;
  &lt;input type="radio" name="choices" class="radioButtons" value="3" id="choice3"&gt;
  &lt;div id="c3" class="choiceText"&gt;The Executor&lt;/div&gt;
  </code></pre>
  
  <p></p>