Wie Radiowerte js speichern?

Question

Ich habe ein js Quiz erstellt. Ich habe "vorherige" und "nächste" Schaltflächen hinzugefügt, um durch das Quiz zu navigieren. Nach der Auswahl einer Antwortauswahl und dem Drücken der Taste "Zurück" und danach wird die ausgewählte Antwortauswahl leer. Der Link zu meiner Datei ist http://gnorybeta.net16.net/examples/al1jan16.html Und dies ist der Code für das 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

Ihr Radio versteckt war. Das hier gezeigte Radio ist ein <label> Element. Sie müssen auch seine Klasse ändern.

Fügen Sie diese Zeile $('input[value="'+selections[questionCounter]+'"]').parent().addClass('checked'); in Ihrer displayNext() Funktion in exam.js wie folgt.

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