title: How to save radio values js?
body: <p>I have created a js quiz. I added 'previous' and 'next' buttons to navigate through the quiz. However, after selecting an answer choice and pressing 'previous' button and then next, the selected answer choice becomes empty. The link to my file is <a href="http://gnorybeta.net16.net/examples/al1jan16.html" rel="nofollow">http://gnorybeta.net16.net/examples/al1jan16.html</a> And this is the code for the quiz</p>
  
  <pre><code>(function() {
    var questions = [{
  
      question: "In the function &lt;i&gt;f&lt;/i&gt;(x) = (x - 2)&lt;sup&gt;2&lt;/sup&gt; + 4, the minimum value occurs when &lt;i&gt;x&lt;/i&gt; is",
      choices: [2, -4, 4, -2],
      correctAnswer: 0
    }, {
      question: "The graph below was created by an employee at a gas station.&lt;br&gt;&lt;center&gt;&lt;img src='../assets/img/aljan20162.jpg'&gt;&lt;/center&gt;&lt;br&gt;Which statement can be justified by using the graph?",
      choices: ['For every gallon of gas purchased, $3.75 was paid.', 'For every 2 gallons of gas purchased, $5.00 was paid.',  'If 10 gallons of gas was purchased, $35 was paid.', 'If zero gallons of gas were purchased, zero miles were driven.'],
      correctAnswer: 3
    }, {
      question: "For a recently released movie, the function &lt;i&gt;y&lt;/i&gt; = 119.67(0.61)&lt;sup&gt;x&lt;/sup&gt; models the revenue earned, &lt;i&gt;y&lt;/i&gt;, in millions of dollars each week, &lt;i&gt;x&lt;/i&gt;, for several weeks after its release.&lt;br&gt;&lt;br&gt;Based on the equation, how much more money, in millions of dollars,was earned in revenue for week 3 than for week 5?",
      choices: [10.11, 37.27, 17.06, 27.16],
      correctAnswer: 2
    },{
      question: "Given the following expressions:&lt;br&gt;&lt;center&gt;&lt;img src='../assets/img/aljan20164.jpg'&gt;&lt;/center&gt;&lt;br&gt;",
      choices: ['I, III, IV', 'III, only', 'II, only', 'II III IV'],
      correctAnswer: 2
    },{
      question: "Which inequality is represented by the graph below?&lt;br&gt;&lt;center&gt;&lt;img src='../assets/img/aljan20165.jpg'&gt;&lt;/center&gt;&lt;br&gt;",
      choices: ['&lt;i&gt;y&lt;/i&gt; &amp;ge; 2x -3', '&lt;i&gt;y&lt;/i&gt; &amp;le; -3x + 2', '&lt;i&gt;y&lt;/i&gt; &amp;le; 2x -3', '&lt;i&gt;y&lt;/i&gt; &amp;ge; -3x + 2'],
      correctAnswer: 0
    },{
      question: "Michael borrows money from his uncle, who is charging him simple interest using the formula &lt;i&gt;I&lt;/i&gt; = &lt;i&gt;Prt&lt;/i&gt;. To figure out what the interest rate, &lt;i&gt;r&lt;/i&gt;, is, Michael rearranges the formula to find &lt;i&gt;r&lt;/i&gt;. His new formula is &lt;i&gt;r&lt;/i&gt; equals",
      choices: [20, 30, 40, 50, 64],
      correctAnswer: 4
    },{
      question: "Which equation is equivalent to &lt;i&gt;y&lt;/i&gt;",
      choices: [20, 30, 40, 50, 64],
      correctAnswer: 4
    },{
      question: "What is 8*8?",
      choices: [20, 30, 40, 50, 64],
      correctAnswer: 4
    },{
      question: "What is 8*8?",
      choices: [20, 30, 40, 50, 64],
      correctAnswer: 4
    },{
      question: "What is 8*8?",
      choices: [20, 30, 40, 50, 64],
      correctAnswer: 4
    },{
      question: "What is 8*8?",
      choices: [20, 30, 40, 50, 64],
      correctAnswer: 4
    },{
      question: "What is 8*8?",
      choices: [20, 30, 40, 50, 64],
      correctAnswer: 4
    }
  
                    ];
  
    var questionCounter = 0; //Tracks question number
    var selections = []; //Array containing user choices
    var quiz = $('#quiz'); //Quiz div object
  
    // Display initial question
    $("#begin").click(function(){
      $("#quiz").removeClass("hidden");
      $("#intro").addClass("hidden");
       $("#examhead").removeClass("hidden");
      $("#examfoot").removeClass("hidden");
       displayNext();
      });
  
  
    // Click handler for the 'next' button
    $('#next').on('click', function (e) {
      e.preventDefault();
  
      // Suspend click listener during fade animation
      if(quiz.is(':animated')) {        
        return false;
      }
      choose();
  
      // If no user selection, progress is stopped
      if (isNaN(selections[questionCounter])) {
        questionCounter++;
        displayNext();
      } else {
        questionCounter++;
        displayNext();
      }
    });
  
    // Click handler for the 'prev' button
    $('#prev').on('click', function (e) {
      e.preventDefault();
  
      if(quiz.is(':animated')) {
        return false;
  
      }
      choose();
      questionCounter--;
      displayNext();
    });
  
    // Click handler for the 'Start Over' button
    $('#start').on('click', function (e) {
      e.preventDefault();
  
      if(quiz.is(':animated')) {
        return false;
      }
      questionCounter = 0;
      selections = [];
      displayNext();
      $('#start').hide();
    });
  
    // Animates buttons on hover
    $('.button').on('mouseenter', function () {
      $(this).addClass('active');
    });
    $('.button').on('mouseleave', function () {
      $(this).removeClass('active');
    });
  
    // Creates and returns the div that contains the questions and 
    // the answer selections
    function createQuestionElement(index) {
      var qElement = $('&lt;div&gt;', {
        id: 'question'
      });
  
      var header = $('&lt;p&gt;Question ' + (index + 1) + ' of ' + questions.length + ':&lt;/p&gt;');
      qElement.append(header);
  
      var question = $('&lt;p&gt;').append(questions[index].question);
      qElement.append(question);
  
      var radioButtons = createRadios(index);
      qElement.append(radioButtons);
  
      return qElement;
    }
  
    // Creates a list of the answer choices as radio inputs
  
  
  
  
  
  
  
    function createRadios(index) {
      var radioList = $('&lt;div&gt;');
      var item;
      var input = '';
      for (var i = 0; i &lt; questions[index].choices.length; i++) {
        item = $('&lt;label class="radio"&gt;&lt;span class="icons"&gt;&lt;span class="first-icon fa fa-circle-o fa-base"&gt;&lt;/span&gt;&lt;span class="second-icon fa fa-dot-circle-o fa-base"&gt;&lt;/span&gt;&lt;/span&gt;');
        input = '&lt;input type="radio" data-toggle="radio" name="answer" value=' + i + ' /&gt;&lt;i&gt;&lt;/i&gt;';
        input += questions[index].choices[i];
        item.append(input);
        radioList.append(item);
      }
      return radioList;
    }
  
    // Reads the user selection and pushes the value to an array
    function choose() {
      selections[questionCounter] = +$('input[name="answer"]:checked').val();
    }
  
    // Displays next requested element
    function displayNext() {
      quiz.fadeOut(function() {
        $('#question').remove();
  
        if(questionCounter &lt; questions.length){
          var nextQuestion = createQuestionElement(questionCounter);
          quiz.append(nextQuestion).fadeIn();
          if (!(isNaN(selections[questionCounter]))) {
            $('input[value='+selections[questionCounter]+']').prop('checked', true);
          }
  
          // Controls display of 'prev' button
          if(questionCounter === 1){
            $('#prev').show();
          } else if(questionCounter === 0){
  
            $('#prev').hide();
            $('#next').show();
          }
        }else {
          var scoreElem = displayScore();
          quiz.append(scoreElem).fadeIn();
          $('#next').hide();
          $('#prev').hide();
          $('#start').show();
        }
      });
    }
  
    // Computes score and returns a paragraph element to be displayed
    function displayScore() {
      var score = $('&lt;p&gt;',{id: 'question'});
  
      var numCorrect = 0;
      for (var i = 0; i &lt; selections.length; i++) {
        if (selections[i] === questions[i].correctAnswer) {
          numCorrect++;
        }
      }
  
     score.append('&lt;center&gt;&lt;h5&gt;Your score is&lt;/h5&gt; &lt;br&gt;&lt;h1&gt;' + numCorrect / questions.length * 100 + '%&lt;/h1&gt;&lt;/center&gt;&lt;br&gt;');
      score.append('&lt;center&gt;&lt;h5&gt;That\'s &lt;b&gt;' + numCorrect + ' &lt;/b&gt;questions out of &lt;b&gt;' + questions.length + '&lt;/b&gt; correct&lt;h5&gt;&lt;/center&gt;');
      return score;
    }
  })();
  </code></pre>