How to save radio values js?

Question

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 http://gnorybeta.net16.net/examples/al1jan16.html And this is the code for the quiz

(function() {
  var questions = [{

    question: "In the function <i>f</i>(x) = (x - 2)<sup>2</sup> + 4, the minimum value occurs when <i>x</i> is",
    choices: [2, -4, 4, -2],
    correctAnswer: 0
  }, {
    question: "The graph below was created by an employee at a gas station.<br><center><img src='../assets/img/aljan20162.jpg'></center><br>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 <i>y</i> = 119.67(0.61)<sup>x</sup> models the revenue earned, <i>y</i>, in millions of dollars each week, <i>x</i>, for several weeks after its release.<br><br>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:<br><center><img src='../assets/img/aljan20164.jpg'></center><br>",
    choices: ['I, III, IV', 'III, only', 'II, only', 'II III IV'],
    correctAnswer: 2
  },{
    question: "Which inequality is represented by the graph below?<br><center><img src='../assets/img/aljan20165.jpg'></center><br>",
    choices: ['<i>y</i> &ge; 2x -3', '<i>y</i> &le; -3x + 2', '<i>y</i> &le; 2x -3', '<i>y</i> &ge; -3x + 2'],
    correctAnswer: 0
  },{
    question: "Michael borrows money from his uncle, who is charging him simple interest using the formula <i>I</i> = <i>Prt</i>. To figure out what the interest rate, <i>r</i>, is, Michael rearranges the formula to find <i>r</i>. His new formula is <i>r</i> equals",
    choices: [20, 30, 40, 50, 64],
    correctAnswer: 4
  },{
    question: "Which equation is equivalent to <i>y</i>",
    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 = $('<div>', {
      id: 'question'
    });

    var header = $('<p>Question ' + (index + 1) + ' of ' + questions.length + ':</p>');
    qElement.append(header);

    var question = $('<p>').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 = $('<div>');
    var item;
    var input = '';
    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<label class="radio"><span class="icons"><span class="first-icon fa fa-circle-o fa-base"></span><span class="second-icon fa fa-dot-circle-o fa-base"></span></span>');
      input = '<input type="radio" data-toggle="radio" name="answer" value=' + i + ' /><i></i>';
      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 < 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 = $('<p>',{id: 'question'});

    var numCorrect = 0;
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
      }
    }

   score.append('<center><h5>Your score is</h5> <br><h1>' + numCorrect / questions.length * 100 + '%</h1></center><br>');
    score.append('<center><h5>That\'s <b>' + numCorrect + ' </b>questions out of <b>' + questions.length + '</b> correct<h5></center>');
    return score;
  }
})();

Answer 1

Your radio was hidden. The radio shown here is a <label> element. You have to change its class also.

Add this line $('input[value="'+selections[questionCounter]+'"]').parent().addClass('checked'); in your displayNext() function in exam.js just like following.

function displayNext() {
  quiz.fadeOut(function() {
    $('#question').remove();

    if(questionCounter < questions.length){
      var nextQuestion = createQuestionElement(questionCounter);
      quiz.append(nextQuestion).fadeIn();
      if (!(isNaN(selections[questionCounter]))) {
        $('input[value="'+selections[questionCounter]+'"]').attr('checked', true);
        $('input[value="'+selections[questionCounter]+'"]').parent().addClass('checked');
      }

      // 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();
    }
  });
}