JSFiddle - React, Tailwind, and code Playground

by MBDeane

HTML

<div id="questionGroup">
    <h2 id="mainTitle">Pick the surf spot</h2>
</div>

CSS

body {
    background-color: cornsilk;
    color: #222;
    font-family: "Helvetica Nue", Helvetica;
    font-size: 100%;
    line-height: 24px;/* 18px */
    overflow-y: scroll;
}
#questionGroup {
    background-color: rgba(248, 248, 255, 1);
    padding: 1em 1.5em 1.5em;
}
#mainTitle {
    color: salmon;
    font-size: 0.75em;/* 12px */
    font-style: italic;
    font-weight: bold;
    line-height: 27px;   
}
#Question {
    font-size: 1.5em;/* 24px */
    line-height: 30px;
}
p {
    font-size: 1.125em;/* 18px */
}
#choices {
    border: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#choices label {
    background-color: white;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    float: left;
    padding: 1.5em 0;
    position: relative;
    text-align: center;
    -webkit-transition: background-color 0.15s linear;
    -moz-transition: background-color 0.15s linear;
    -o-transition: background-color 0.15s linear;
    transition: background-color 0.15s linear;
    vertical-align: top;
    width: 49%;
}
#choices label:nth-child(2n+1){
    margin: 0 1px 2px 0;
}
#choices label:nth-child(2n){
    margin: 0 0 2px 1px;
}
#choices label:hover {
    background-color: yellow;
    -webkit-transition: background-color 0.15s linear;
    -moz-transition: background-color 0.15s linear;
    -o-transition: background-color 0.15s linear;
    transition: background-color 0.15s linear;
}
#choices label.selected {
    background-color: #98fb98;
    font-weight: bold;
}
#choices input[type=radio] {
    cursor: pointer;
    display: block;
    position: absolute;
    left: -100em;
}
.nav {
    background-color: yellow;
    border: none;
    border-radius: 3px;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    font-family: "Helvetica Nue", Helvetica;
    font-size: 1em;
    font-weight: bold;
    margin: 1.5em auto 0;
    padding: 1.5em 0;
    text-transform: capitalize;
    -webkit-transition:...

JavaScript

var DynamicQuiz = ( function(){
    
    var qGroup = [],
        qIndex = 0,
        qChecked = [],
        confirm = false,
        qAnswer = [],
        qChoice = [],
        qTotal = 0;
    
    //Question Object
    var Question = function(question, choices, correctAnswer){
        this.question = question;
        this.choices = choices;
        this.correctAnswer = correctAnswer;
    };
    
    // question view
    var qView = function(){
        var qLabel = [];
        var $qConatiner = $("#questionGroup");
        
        var qForm = ['<form method="post" id="' + 'f' + qIndex + '">'];
        var qHeader = ['<h3 id="Question">' + qGroup[qIndex].question + '<\/h3>'];
        var qFieldset = ['<fieldset id="choices" class="clearfix">'];
        
        var qButton = ['<button class="nav">Submit Answer<\/button>'];
        $qConatiner.append(
            qForm +
            qHeader + 
            qFieldset +
            '<\/fieldset>' +
            qButton
        );
        
        var lLoop = function(){
            
            var lChoices = qGroup[qIndex].choices;
            var $cFieldset = $("#choices", "#f" + qIndex);
            var j = 0;
            
            for(;j<lChoices.length;j++){
                $cFieldset.append('<label for="' + lChoices[j] + '"><input type="radio" name="answer" id="' + lChoices[j] + '" \/>' + lChoices[j] + '<\/label>');
            }
            
        };
        
        lLoop();
        
    };
    
    //checked radio loop
    var qLoop = function(){
        var $answer = $("input[name=answer]"); 
        var aLength = $answer.length;
        var i = 0;
        for(;i<aLength;i++){
            if($answer[i].checked){
                qChecked = $answer[i].id;
                confirm = true;
            }
        }
    };
    
    //get number from correctAnswer - 1
    //get correct answer from choices
    var qChoices = function(){
        qAnswer = qGroup[qIndex].correctAnswer - 1;
        qChoice =...