라디오 값을 저장하는 방법 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> 요소입니다. 그 클래스도 변경해야합니다.

이 라인을 displayNext()에있는 $('input[value="'+selections[questionCounter]+'"]').parent().addClass('checked');의 기능을 exam.js에 추가하면됩니다.

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