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="test2"> test2 </li> 
    <li><input type="radio" name="remember2" value="test4"> test3 </li> 
    <li><input type="radio" name="remember2" value="test5"> test4 </li> 
</ol>
<div id="js-answer-key">
<p class="answer" id="js-answer-1">all of the above</p>
<p class="answer" id="js-answer-1">test2</p>
</div>

JavaScript

(function() {
    
var allQuestions = new Array();
jQuery("input[type=radio]").each(function(index) {
    allQuestions[index] = jQuery(this).val();
});
    
var quizNumber = window.location.pathname;
var pathIndex = quizNumber.lastIndexOf("/");
quizNumber = quizNumber.substring(pathIndex);
var nextActivity = quizNumber + 1;
var quizError = "<p style='background: red; padding: 5px;'> There is a problem with this quiz. Please contact <a href='mailto:[email protected]'>[email protected]</a> if you continue to experience these errors </p>";
var congrats = "<h3>You have finished this activity!</h3><p>You can now move on to the <a href='/quiz/" + nextActivity + "'>next activity<a/></p>";

var radio_groups = new Array();
var groupsInd = 0;
var groupName;
jQuery("input[type=radio]").each(function() {
    if(jQuery(this).attr("name") != groupName) {
        radio_groups[groupsInd] = jQuery(this).attr("name");
        groupsInd++;
    }
    groupName = jQuery(this).attr("name");
});

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

var groupAnswers = 0;
for (i in allQuestions) {
    for (f in answers) {
        if (allQuestions[i] == answers[f]) {
        groupAnswers++;
        }
    }
}
if (groupAnswers != answers.length || groupAnswers != radio_groups.length) {
    if(jQuery(".quiz").length > 0) {
        jQuery(".quiz").prepend(quizError)
    }
}
else  {
    jQuery("input[type=radio]").click(function() {
    var clickedGroup = jQuery(this).attr("name");
    var clickedIndex = radio_groups.indexOf(clickedGroup);
    if(clickedIndex > answers.length -1) {
    alert(quizError);
    }
    else {
        if (answers[clickedIndex] == jQuery(this).val()) 
        {
        alert("Correct");
            jQuery(this).parent().css("background","#B9FFC1");
            if...