JSFiddle - React, Tailwind, and code Playground

by Chad Drummond

HTML

<div class=" quiz quiz1">

</div>
<div class="quiz quiz2">

</div>

CSS

/**
  - Make a jQuery plugin and move original code inside
    $.fn.jQuiz = function(options) { ... };
  - Move HTML into template variable and replace with quiz div
  - Move questions out to jQuery plugin initializer
  - Store the element for later `var $el = $(this);`
  - Write template to element `$el.html(template);`
  - Convert `document.getElementById(..)` to `$el.find(..).html(value)`
  - Convert all `$(selector)` to `$el.find(selector)`
  - WORKING CODE, NOW TO ADD MUTLIPLE OPTIONS
  - Create a second quiz div
  - Wrap all inside code with `this.each(function() { .. })`
  - WORKING WITH MULTIPLE
  - Swap out any additional text strings with IDs and write it's values with `options.valueName`
*/

* {
  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;
 ...

JavaScript

$.fn.jQuiz = function(options) {
  var template = "\
  	<div class='content'>\
		<div class='quiz-landing'>\
			<p class='intro'>It's time for a quiz about the</p>\
			<h1 class='header' id='quiz-title'></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 id='questions-header'></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>\
  ";

  // this == jQuery Objects
  this.each(function() {

    var userAnswer;
    var answer;
    var questionNumber = 0;
    var score = 0;
    var questions = options.questions;

    // this == element
    var $el = $(this);
    $el.html(template);

    function setQuestion() {
      $el.find('#question-p').html(questions[questionNumber].question);
 ...