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() {
    function gatherQuestions() {    
        var allQuestions = new Array();
        jQuery("input[type=radio]").each(function(index) {
        allQuestions[index] = jQuery(this).val();
        });
            return allQuestions;
    }
    function getRadioGroups() {    
        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");
        });
    return radio_groups;        
    }
    function getAnswers() {
        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();
        return answers;
    }
    
    
var allQuestions2 = gatherQuestions();
var radio_groups2 = getRadioGroups();
var answers2 = getAnswers();
addClick(answers2, radio_groups2, allQuestions2);

    
    
    for (g in answers) {
    console.log(answers[g] + " " + answers.length);
    }

function addClick (answers, radio_groups, allQuestions) {
    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 groupAnswers = 0;
    for (i in allQuestions) {
        for (f in answers)...