JSFiddle - React, Tailwind, and code Playground

HTML

<div id="quiz-container"></div>
<button id="back" type="button">Back</button>
<button id="next" type="button">Next</button>

CSS

#quiz-container {
				position: relative;
			}

			.question-number {
				font-size: 2.5em;
				display: inline-block;
				vertical-align: middle;
				padding-right: 5px;
				color: #ccc;
			}

			.question-text {
				font-size: 1.5em;
				display: inline-block;
				vertical-align: middle;
			}

			.choices > .choice {
				padding: 5px 0;
				margin: 5px 0;
				border: 1px dotted #000;
				text-align: center;
				font-size: 0.8em;
				display: block;
				width: 100%;
				pointer: cursor;
			}

			.choices > input[type="radio"] {
				display: none;
			}
			
			.choices > .choice:hover, .choices > input[type="radio"]:checked+label{
				background-color: #ff9200;
				color: #fff;
				cursor: pointer;
			}
			
			#score-total, #score-percentage {
				left: 25%;
				position:absolute;
			}
			
			#score-total {
				font-size: 3.5em;
				width: 100%;
				z-index: 5;
			}
			
			#score-percentage {
				font-size: 10em;
				color: #eee;
				z-index: 0;
			}

			button {
				font-size: 2.5em;
				border-style: none;
				width: 49%;
				display: inline-block;
				cursor: pointer;
				background-color: #009acd;
			}

			button:hover {
				background-color: #00b2ee;
			}

JavaScript

//-------------------%*QUIZ NAMESPACE*%----------------------
var quiz = window.quiz || {};

(function(ns) {
	var currentIndex = 0;
	var parent, back, next;
	var selectedChoices = [];
	
	ns.version = '1.0.0';
	
	ns.author = 'Anonymous Hands';
	
	ns.parentId = function(id) { parent = document.getElementById(id); };
	
	ns.nextButtonId = function(id) { next = document.getElementById(id); next.onclick = moveNext; };
	
	ns.backButtonId = function(id) { back = document.getElementById(id); back.onclick = moveBack; };
	
	ns.questions = [];
	
	ns.render = 
		function() {
			renderQuestion(0);
		};
		
	//Pass results and missed questions?
	ns.onComplete = function(results){};
	
	function moveNext(){
		saveState();
	
		if (!atEnd()){
			currentIndex++;
			renderQuestion(currentIndex);
			restoreState();
			
			return;
		}
		
		renderComplete();
	}
	
	function moveBack(){
		saveState();
	
		if(!atBeginning()){
			currentIndex--;
			renderQuestion(currentIndex);
			restoreState();
		}
	}
	
	function renderQuestion(index){
		clearParent();
	
		var questionNum = index + 1;
		var node = ns.questions[index];
		
		var questionNumDiv = makeElement({type: "div", class: "question-number" ,html: questionNum});
			
		var questionText = makeElement({type: "div", class: "question-text" ,html: node.question});

		var choicesDiv = makeElement({type: "div", class: "choices"});

		var l = node.choices.length;
		
		for(var i = 0; i < l; i++){
			var choiceRadio = makeElement({
				type: "input", 
				subtype: "radio", 
				name: "choices", 
				id: "choice-" + i
				});
			
			var choiceLabel = makeElement({type: "label", class: "choice", html: node.choices[i], for: "choice-" + i});
			
			choicesDiv.appendChild(choiceRadio);
			choicesDiv.appendChild(choiceLabel);
		}
		
		parent.appendChild(questionNumDiv);
		parent.appendChild(questionText);
		parent.appendChild(choicesDiv);
	}
	
	function renderComplete(){
		clearParent();
		
		var n = getTotalCorrect();
		var d =...