JSFiddle - React, Tailwind, and code Playground

by Lonnie Wibberding

HTML

<body>
<h1>A Quiz About Stuff</h1>
<div id="main">
<form>
	<h2 id="question">Are you ready for the first question?</h2>
	<div class="center">
	<h3>
		<input type="radio" id="a0" name="quiz" value="0"><span id="c0"> Yes I am!</span></input><br/>
		<input type="radio" id="a1" name="quiz" value="1"><span id="c1"> Sure, why not?</span></input><br/>
		<input type="radio" id="a2" name="quiz" value="2"><span id="c2"> Of course.</span></input><br/>
		<input type="radio" id="a3" name="quiz" value="3"><span id="c3"> I don't have a better choice.</span></input><br/><br/>
	</h3></div>
	<input type="button" value="Next">
</form>
</div>
</body>

JavaScript

//Create the questions object and load the questions into it.
var allQuestions = [];


allQuestions[0] = {
					question: "1. Who flew the first airplane?", 
					choices: ["George Bush", "The Wright Brothers", "The Rong Brothers", "Issac Newton"], 
					correctAnswer:1
};
allQuestions[1] = {
					question: "2. Which is the biggest state in the United States?", 
					choices: ["Texas", "Rhode Island", "Tennessee", "Alaska"], 
					correctAnswer:3
};
allQuestions[2]	= {
					question: "3. How long is a foot?", 
					choices: ["As long as a hand", "Fifteen inches", "Twelve inches", "Half a yard"], 
					correctAnswer:2
};
allQuestions[3]	= {
					question: "4. What is the value of Pi?", 
					choices: ["Apple", "Blueberry", "3.14159", "Peach"], 
					correctAnswer:2
};
allQuestions[4]	= {
					question: "5. With the exception of water, which state of matter has the highest density?", 
					choices: ["Solid", "Liquid", "Gas", "Really big rocks"], 
					correctAnswer:0
};
allQuestions[5]	= {
					question: "6. Which is faster?", 
					choices: ["Speed of sound", "Speed of light", "Jeff Gordon", "Money leaving my wallet or purse"], 
					correctAnswer:1
};
allQuestions[6]	= {
					question: "7. At what temperature does water freeze?", 
					choices: ["45 F", "212 F", "21 F", "32 F"], 
					correctAnswer:3
};
allQuestions[7]	= {
					question: "8. How do you make a car go?", 
					choices: ["Turn the ignition to 'Start'", "Say 'Vroom, vroom!' and bounce in your seat.", "Jump up and down on the hood.", "Get behind and push."], 
					correctAnswer:0
};
allQuestions[8]	= {
					question: "9. What do cats like to do?", 
					choices: ["Ride horses", "Drive cars", "Sleep", "Jump on trampolines"], 
					correctAnswer:2
};
allQuestions[9]	= {
					question: "10. What do dogs like to do?", 
					choices: ["Climb trees", "Bark", "Drive cars", "Join the circus"], 
					correctAnswer:1
};

var score=0; // Keeps track of the total score.
var questionNumber = 0; // Keeps track of...