如何保存单选值js？

Question

我创建了一个 js 测验。我添加了“上一个”和“下一个”按钮来浏览测验。但是，在选择一个答案选项并按“上一个”按钮然后下一个后，所选答案选项变为空。我的文件的链接是http://gnorybeta.net16.net/examples/al1jan16.html 这是测验的代码

(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

您的收音机被隐藏了。这里显示的收音机是一个<label> 元素。你也必须改变它的类。

在exam.js 的displayNext() 函数中添加这一行$('input[value="'+selections[questionCounter]+'"]').parent().addClass('checked');，就像下面一样。

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