JSFiddle - React, Tailwind, and code Playground

by Chad Drummond

HTML

<div class='content'>
		<div class='quiz-landing'>
			<p class='intro'>It's time for a quiz about the</p>
			<h1 class='header'>COLUMBIAN EXCHANGE</h1>
			<div class='start-quiz'>
				<h2 class='start-button'>Start Quiz</h2>
			</div>
		</div>
		<div class='score-div clearfix'>
			<p class='question-count' id='question-count'></p>
			<p class='score-count' id='score-count'></p>
		</div>
		<div class='quiz-main-body'>
			<div class='questions-header'><h2>COLUMBIAN EXCHANGE QUIZ</h2></div>
			<div class='question-div clearfix'>
				<h2 class='big-q'>Q:</h2>
				<p class='question-p' id='question-p'></p>
			</div>
			<div class='answers-div clearfix'>
				<div class='a button' id='a'></div>
				<div class='b button' id='b'></div>
				<div class='c button' id='c'></div>
				<div class='d button' id='d'></div>
			</div>
		</div>
		<div class='feedback-main-body'>
			<div class='feedback-header'>
				<h1 class='feedback-h1 correct'>CORRECT!</h1>
				<h1 class='feedback-h1 incorrect'>INCORRECT!</h1>
				<h2 class='next-question' id='next-question'>(PROCEED)</h2>
			</div>
			<div class='explanation'>
				<p class='explanation-p' id='explanation-p'></p>
			</div>
		</div>
		<div class='final-main-body'>
			<div class='final-header'>
				<h1 class='final-h1'>FINAL</h1>
			</div>
			<div class='score-summary'>
				<h1 class='rating' id='rating'></h1>
				<h2 class='final-score' id='final-score'></h2>
				<p class='analysis' id='analysis'></p>
				<h2 class='next-question'>Click to restart quiz</h2>
			</div>
		</div>	
	</div>

CSS

/**
  - 
*/

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	padding-top: 0;
}

body {
	background: linear-gradient(
				rgba(221, 204, 170, 0.35),
				rgba(221, 204, 170, 0.35)
		),
	url('../img/World_Map_1689.JPG');
	background-position: center;
   	color: white;
   	margin-top: 0;
}

h1,
h2 {
	margin-top: 0;
}

.content {
	width: 97%;
	margin: 0 auto;
}


/******** CLEARFIX ***********/
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }
.clearfix { display: block; }


/******** TEXT STYLES *********/

.intro,
.start-button {
	font-family: 'Questrial', sans-serif;
	text-align: center;
}

.questions-header h2 {
	font-family: 'Old Standard TT', serif;
	font-size: 2em;
}

.header {
	font-family: 'Old Standard TT', serif;
	text-align: center;
	font-size: 6em;
	
}

.intro {
	font-size: 3.25em;
}

.start-button {
	font-size: 4em;
}

.start-button:hover,
.next-question:hover,
.button:hover {
	color: #222;
	cursor: pointer;
}

.big-q {
	display: inline-block;
	font-family: 'Old Standard TT', serif;
	font-size: 4em;
	background-color: #995544;
	border: solid 1px white;
	margin-right: 0.5em;
	margin-bottom: 0.5em;
	padding-top: 0.15em;
	padding-left: 0.1em;
	width: 1.1em;
	height: 1.15em;
}

.question-p {
	display: inline;
	font-size: 2.5em;
}

.feedback-h1 {
	font-size: 8em;
	text-align: center;
	text-shadow: 2px 2px #222;
	animation: blinker 0.75s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0.0; }
}

.correct {
	color: #555511;
	display: none;
}

.incorrect {
	color: #995544;
	/*display: none;*/
}

.explanation-p {
	font-size: 2.5em;
	text-align: justify;
}

.final-h1 {
	margin-bottom: .5em;
	text-shadow: 2px 2px #222;
}

.final-score {
	text-align: center;
	font-size: 2em;
	margin-bottom: 2em;
}

.analysis {
	font-size: 2em;
}

.rating {
	font-size: 7em;
	text-align: center;
	margin:...

JavaScript

$(document).ready(function(){
	
	var userAnswer;
	var answer;
	var questionNumber = 0;
	var score = 0;
	var questions = [
		{
			question: 'Which of these domesticated fruits was first brought to the Americas by European settlers during the period of Colonization?',
			choices: ['Tomatoes', 'Bananas', 'Blueberries', 'Sugarplums'],
			answer: 'b',
			explanation: 'Bananas are a fruit native to Southeast Asia and were brough to the Americas by European settlers during the period of colonization.'
		}, {
			question: 'Who was first to discover the Americas?',
			choices: ['Christopher Columbus', 'Leif Ericson', 'Amerigo Vespucci', 'Ice-age nomads whose descendents would become Native Americans'],
			answer: 'd',
			explanation: 'Ancient nomads. Duh.'
		}, {
			question: 'What Native American political group was cited by the Congress as an influence on the Constitution and Bill of Rights?',
			choices: ['Iriquois League', 'Sioux Nation', 'Creole Clan', 'Navajo Nation'],
			answer: 'a',
			explanation: 'The Iriquois Leage was cited as an influence on the Constitution by a 1988 Congressional resolution, but this assertion is challenged by some historians.'
		}, {
			question: 'Which of these foods was imported by Europeans and, initially, only valued in Italy for its ornamental appeal?',
			choices: ['Wheatgrass', 'Basil', 'Tomatoes', 'Raspberries'],
			answer: 'c',
			explanation: 'The Italians did not incorporate tomatoes into their many famous sauces until many years after their import from the Americas.'
		}, {
			question: 'Which of these famous diseases was brought to the Americas by Europeans, with devastating consequences for the native population?',
			choices: ['Syphillis', 'Small Pox', 'The common cold', 'All of the above'],
			answer: 'd',
			explanation: 'All of the above. The European immune system, subject to untold centuries of filth and disease, was simply more equipped to fight off these maladies than the cleanly, geographically isolated Native...