JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<ol class="quiz" style="list-style-type: lower-alpha;"> 
    <p>What other things can your planner help you remember?</p> 
    <li><input type="radio" name="remember" value="school assignments"> school assignments</li> 
    <li><input type="radio" name="remember" value="after-school activities"> after-school activities</li> 
    <li><input type="radio" name="remember" value="birthdays"> birthdays</li> 
    <li><input type="radio" name="remember" value="all of the above"> all of the above</li> 
</ol>
<ol class="quiz" style="list-style-type: lower-alpha;"> 
    <p>Test 2</p> 
    <li><input type="radio" name="remember2" value="test"> test </li> 
    <li><input type="radio" name="remember2" value="test3"> test2 </li> 
    <li><input type="radio" name="remember2" value="test4"> test3 </li> 
    <li><input type="radio" name="remember2" value="test5"> test4 </li> 
</ol>

<input type="button" id="js-quiz-submit" value="check answers" />
<div id="js-answer-key">
<p class="answer" id="js-answer-1">all of the above</p>
<p class="answer" id="js-answer-2">test2</p>
</div>

JavaScript

var answers = new Array();
jQuery("#js-answer-key p").each(function(index) {
    answers[index] = jQuery(this).text();
});

jQuery("#js-quiz-submit").click(function() {
    
    jQuery("input[type=radio]:checked").each(function(index) {
    var check = jQuery(this).val();
    var question = jQuery(this).parents("ol").find("p").text();
        if (check == answers[index]){
        var correctResponse = "<p class='answer'>
        }
        else {
               
        }
    });
    

});