title: JQuery: Checking / Unchecking Radio Buttons
body: <p>I trying to figure out the error in my script and am hoping somebody is able to tell me where I am going wrong. It is an attempt to create a quiz based on JS/Jquery (the javascriptissexy exercises). </p>
  
  <p>So far it is working fine, except: I want to use a back button that recalls the previous answers given by the user and sets the radio buttons accordingly. The script doesn't go back and even if I click forward it gives me no errors that would help me to pinpoint the problem. </p>
  
  <p>Again I am really sorry that I can not narrow it more down because I really don't know which parts are relevant/not relevant. If anyone has some suggestions how to present those "I'm close to giving up because I don't know how to pinpoint the issue" problems in a better way I would be happy to do so.</p>
  
  <p>The HTML radio buttons are all structured like this:</p>
  
  <pre><code> &lt;input type="radio" name="radio" id="Option0" value="Option0" /&gt;
   &lt;label for ="Option0"&gt;Option0&lt;/label&gt;
  </code></pre>
  
  <p>The JS/Jquery:</p>
  
  <pre><code> $(document).ready(function () {
   var allQuestions = [
      {question: "Who is Prime Minister of the United Kingdom?",
          choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
          correctAnswer: 0},
      {question: "Which color has the sky?",
          choices: ["Grey", "Black", "Blue", "Green"],
          correctAnswer: 2},
      {question: "What's on the chain?",
          choices: ["Monster", "Magician", "Bull", "Skull"],
          correctAnswer: 3}
  ];
  
  var counter = 0;     // Question No currently processed
  var points = 0;        // Total points currently reached by the player
  var answers = new Array(); // Array of the choices the player made  eg Q1:0
  
  // Back button in a function
  function back() {
      if (counter &gt; 0)          //Checks if there is at least one question already answered
      {
          //Goes back one question
  
          $("#back").show().on('click', function () {
              counter = counter--;
              quiz();
          });      //Executes quiz loading
  
      }
      else {
          $("#back").hide();         //If there is no previous question existing the back button is deactivated
      }
  }
  
  
  function qload(counter) {
      $("title").text("Question No ");
      $("#question").text(allQuestions[counter].question);
      back();
      for (var i = 0; i &lt; allQuestions[counter].choices.length; i++) {
          $('label[for=Option' + i + ']').html(allQuestions[counter].choices[i]);
  
          if (answers["Q" + i]) {
              $("#Option" + i).attr("checked","checked");
          }
  
          else {
              $("#Option" + i).removeAttr('checked');
          }
      }
  };
  //this is the result screen giving the final amount of points
  function result() {
      $("title").text("Your Results");
      for (var i = 0; i &lt; allQuestions.length; i++) {
          if (allQuestions[i].correctAnswer == answers["Q" + i]) {
              points++;
          }
  
  
          $("#result").show().text("CONGRATULATIONS! You answered " + points + " out of " + allQuestions.length + " correct!");
          $(".qbox").hide();
          console.log(answers);
  
      }
  }
  
  function welcome() {
      // this is the welcome screen inviting to start the quizz
      $("title").text("Welcome to the JQuery QuizY");
      $(".qbox").hide();
      $("#result").append().html("Random");
      $("#result").append().html("&lt;p id='start'&gt;Start&lt;/p&gt;");
      $("#start").on('click', function () {
          quiz();
      });
  }
  
  function quiz() {
      $("#start, #result").hide();
      $(".qbox").show();
      qload(counter);
      $("#next").on('click', function () {
          // this checks that one question is selected before processing
          if ($('#Option0').is(':checked')) {
              answers["Q" + counter] = 0;
              counter++;
          }
  
          else if ($('#Option1').is(':checked')) {
              answers["Q" + counter] = 1;
              counter++;
          }
  
          else if ($('#Option2').is(':checked')) {
              answers["Q" + counter] = 2;
              counter++;
          }
  
          else if ($('#Option3').is(':checked')) {
              answers["Q" + counter] = 3;
              counter++;
          }
  
          else {
              alert("Please make your selection before continuing!");
          }
  
          // this checks if there are any questions left, otherwise it goes to the result screen
          if (allQuestions[counter]) {
              qload(counter);
          }
          else {
              result();
          }
      });
  }
  
  welcome();
  
  });
  </code></pre>