JSFiddle - React, Tailwind, and code Playground

by William Engeler

HTML

<body>
    <h1>Quiz Time!</h1>
        <h2>A quiz simulation to waste your time.</h2>
    <p class="message" hidden>Select the best answer, then click "next"</p>
    <p class="message2"> Click READY when you are ready to go.</p>
    <button class="rdy button">Ready</button>
    <div class="feedback"> </div>
    <div class= "quiz hidden">
    <p class="ques">ZZZ</p>
        <input type="radio" id="aa" name="response" value=0><span id="c0"> wwww</span></input><br>
         <input type="radio" id="bb" name="response" value=1><span id="c1"> xxx</span></input><br>
 <input type="radio" id="cc" name="response" value=2><span id="c2"> yyy</span></input></p><br/>
</div>
    <button class="button sendAnswer invis" id="foo">Submit my answer</button>
    <button class="button next invis">Go to the next answer</button>  
    <br> 
        <p class= "tally hidden">Your score is <span id="score"> </span> out of <span id=numOfQuestions> </span>!</p>
        <footer>    <small>A project for the reddit learn js course - Feb 2014</small></footer>
</body>

CSS

body {font-family : sans-serif; background-color : #eee;}
.hidden {visibility : hidden;}
.invis {display: none;}
small {position : absolute; bottom: 0; font-size : .5em;}

JavaScript

$(document).ready(function() {
    var allQuestions = [ 
    {question:"What is the currency of Madagascar?", choices:["rupi", "ariary", "franc"], correctAnswer:1},
    {question : "Who was the second man on the moon?", choices:["Neil","Buzz", "Michael"], correctAnswer:1},
    {question : "Where is the White Sea?", choices:["Europe", "Asia", "America"],correctAnswer:0}
    ];
      var x= 0; 
     var counter = 0;
    
 
     //remove the introduction and presents the first question
    $('.rdy').on('click', function(){
        $(".quiz").removeClass('hidden');
        $(".message2").remove();
        $(this).remove();
        $(".sendAnswer").removeClass("invis");
        $(".ques").text(allQuestions[x].question);
        $("#c0").text(allQuestions[x].choices[0]);
        $("#c1").text(allQuestions[x].choices[1]);
        $("#c2").text(allQuestions[x].choices[2]);      
      }); 
       
    
    //this checks the correctness when answer is entered, and responds
           $("#foo").on('click',function() { 
                $(this).addClass("invis");
                $(".next").toggleClass("invis");
                 y = x+1;
                  $(".quiz").addClass('hidden');
               if ($('input[name="response"]:checked').val() == allQuestions[x].correctAnswer)
               $(".feedback").text("Good job, that's correct!") ;
               else 
                $(".feedback").text("Sorry, that is the wrong answer.");
                     //this keeps score
               if ($('input[name="response"]:checked').val() == allQuestions[x].correctAnswer)
                   //the if clauses are duplicated, but it doesnt work when combined
               {$("#score").text(counter+1);
                counter++;}
               else
                $("#score").text(counter);
                $(".tally").toggleClass("hidden");
               $("#numOfQuestions").text(allQuestions.length);
                if (y == allQuestions.length)                
               ...