JSFiddle - React, Tailwind, and code Playground

by pookguy88

HTML

<div id='main'>
    <div id='question'><h1></h1></div>
 <form id='choices'>   
  
 </form>
    <button id='next'>Next</button>   
    <p></p>
</div>

JavaScript

var allQuestions = [{question: "Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer:0},
                    {question: "Who is the President of the United States?", choices: ["Barack Obama", "Gordon Gecko", "Bill Clinton", "George W. Bush", "Steven Harper"], correctAnswer: 0},{question: "Who is the Superbowl champ?", choices:["Broncos","Seahawks"], correctAnswer: 1}];

//alert(allQuestions[0].choices.length);
//alert(allQuestions.length);

var i = 0;
var score = 0;

DisplayChoices = function () {
for (j=0;j<allQuestions[i].choices.length;j++) {
          var choice =  $('<input type ="radio" name="choice" value="'+j+'" />');  
          $('#choices').append(choice).append(allQuestions[i].choices[j]).append('<br />');         
        };    
};

$(document).ready(function() {
    $('#question').find('h1').text(allQuestions[i].question);
    DisplayChoices();
    $('#next').on('click',function() {   
        if (i==allQuestions.length) {i=0;} 
        else {
          if (allQuestions[i].correctAnswer==$('input[name=choice]:checked','#choices').val()) {
           score++;
          }
          i++;
        }
        if (i<(allQuestions.length)){
          $('#question').find('h1').text(allQuestions[i].question); 
          $('#choices').empty();
          DisplayChoices();
        } else {
            $('#question').find('h1').text('Your score is: ' + score + '/3');
            $('#choices').empty();
            score=0;
          } 
    });
});