JSFiddle - React, Tailwind, and code Playground

by Paul Vervoort

HTML

<div id="css-script-menu">
       <div class="css-script-clear"></div>
  </div>

<h1 style="margin-top: 175px; color:#fff" align="Center">Quiz</h1>

<div class="card0">
<h2 style="margin-top: 20px; margin-bottom: 40px; color:##f08b3b" align="center">Look at my?</h2>
<p><input type="radio" id="cat" name="card1" value="Cat, my cat is fluffy." /> Cat, my cat is fluffy.</p>
<p><input type="radio" id="rabbit" name="card1" value="Rabbit, my rabbit is cute." /> Rabbit, my rabbit is cute.</p>
<p><input type="radio" id="horse" name="card1" value="Horse, my horse is amazing." /> Horse, my horse is amazing.</p>
<p><input type="radio" id="monkey" name="card1" value="Monkey, my monkey is cool." /> Monkey, my monkey is cool.</p>
</div>

<div class="card1">
<h2 style="margin-top: 20px; margin-bottom: 40px; color:##f08b3b" align="center">How does one cut down the mightiest tree in the forrest?</h2>
<p><input type="radio" id="saw" name="card2" value="With a saw." /> With a saw.</p>
<p><input type="radio" id="apple" name="card2" value="With an apple." /> With an apple.</p>
<p><input type="radio" id="tea spoon" name="card2" value="With a tea spoon." /> With a tea spoon.</p>
<p><input type="radio" id="herring" name="card2" value="With a herring." /> With a herring.</p>
</div>

<div class="card2">
<h2 style="margin-top: 20px; margin-bottom: 40px; color:##f08b3b" align="center">"I did not hit her! I did naaaaaht.."?</h2>
<p><input type="radio" id="ok" name="card2" value="Ok." /> Ok.</p>
<p><input type="radio" id="Good for you" name="card2" value="Good for you." /> Good for you.</p>
<p><input type="radio" id="Oh, hi Mark!" name="card2" value="Oh, hi Mark!" /> Oh, hi Mark!</p>
<p><input type="radio" id="monkey" name="You're my favorite customer." value="You're my favorite customer." /> You're my favorite customer.</p>
</div>

<div class="card3">
<h2 style="margin-top: 20px; margin-bottom: 40px; color:##f08b3b" align="center">You've finished the quiz! You scored <div...

CSS

/* Variables
 ------------------------------------------------------------- */

/* Animation from Animate.css
 ------------------------------------------------------------- */
 @-webkit-keyframes cardEnter {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
    }
}
@keyframes cardEnter {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
/* Foundation
 ------------------------------------------------------------- */
 body {
    background-color: #0c70b4;
    color: #546775;
    font: normal 400 18px"PT Sans", sans-serif;
   ...

JavaScript

// initialize values on window object to make universally available

window.val = "";
window.userScore = 0;
window.questionIndex = 0;

var allQuestions = [{
    question0: "Look at my?",
    choices: ["Rabbit, my rabbit is cute.", "Cat, my cat is fluffy.", "Horse, my horse is amazing.", "Monkey, my monkey is cool."],
    correctAnswer: 2
}, {
    question1: "How does one cut down the mightiest tree in the forrest?",
    choices: ["With a saw.", "With an apple.", "With a tea spoon.", "With a herring."],
    correctAnswer: 3
}, {
    question2: "I did not hit her! I did naaaaaht..?",
    choices: ["Ok.", "Good for you.", "Oh, hi Mark!", "You're my favorite customer."],
    correctAnswer: 2
}

];

var main = function () {

    $('.card1').hide();
    $('.card2').hide();
    $('.card3').hide();

};

$('input:radio').click(function () {
    window.val = $('input:radio:checked').val()
});

$('.next').click(function () {

    if (!$('input:radio:checked').val()) {
        alert("You did not provide input!")
    } else {

        $('input:radio').prop("checked", false); // uncheck radiobuttons for next radio selection
        var answerIndex = allQuestions[window.questionIndex].correctAnswer;
        var thisAnswer = allQuestions[window.questionIndex].choices[answerIndex];

        if (window.val == thisAnswer) {
            window.userScore++;
        } else {
            // do nothing
        }

        var compiler = '$(\'.card' + window.questionIndex + '\')';
        var currentCard = eval(compiler);
        var nextCard = currentCard.next();

        if (window.questionIndex < 2) {

            currentCard.hide();
            nextCard.show();
        } 	else if (window.questionIndex == 2 ) {
	  	currentCard.hide();
	  	nextCard.show();
		$('.next').hide();
		window.questionIndex ++;
		var finalScore = window.questionIndex + " out of 3 questions!";
		$('div#userscoreHTML').html(finalScore);

        } else {
            // do nothing
        }

       ...