JSFiddle - React, Tailwind, and code Playground

by Atlas_

HTML

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body></body>

CSS

body {
    background-image: url('http://www.wallng.com/images/2013/10/background-backgrounds-176711.jpg');
    font-size: 175%;
    color: #dde9ff;
}
.answer {
    margin-top: 4%;
    margin-left: 3%;
}
#ask {
    margin-left: 20%;
    margin-top: 23%;
}
#next {
    margin-left: 60%;
    position: absolute;
    bottom: 5%;
    font-size: 70%;
}
#total {
    font-size: 250%;
    margin-top: 23%;
    text-align: center;
    color: plum;
}

JavaScript

function Quiz(question, choices, indexofCorrectAnswer) {
    this.question = question;
    this.choices = choices;
    this.indexofCorrectAnswer = indexofCorrectAnswer;
}
var theQuiz = [];
theQuiz[0] = new Quiz('How many times your heart beats in a day?(choose the closest)', ['over 9000', 'over 100000', 'over 250000', 'over 500000'], 1);
theQuiz[1] = new Quiz("How many continents have a city named Rome?", ['only 1', '4!', 'All of them', '2?'], 3);
theQuiz[2] = new Quiz("Which mammal can't jump?", ['giraffe', 'hedgehog', 'elephant', 'squirrel'], 2);
theQuiz[3] = new Quiz('Which animal was once publicty executed by hanging?', ['fish', 'pig', 'hawk', 'snake'], 1);
theQuiz[4] = new Quiz('Dolphins sleep with how many eyes open?', ['2', '1', '0', '3'], 1);
$(function () {
    var totalScore = 0;
    var i = 0;

    function showQuestion() {
        $('body').append("<p id='ask'>" + theQuiz[i].question + "</br> </p>");
        for (var j = 0; j < theQuiz[i].choices.length; j++) {
            $('#ask').append("<input type='radio' name='choices' class='answer' value='" + j + "'/>" + theQuiz[i].choices[j] + "</br>");
        }
    }

    function checkQuestion() {
        var indexofChoosenAnswer = $("input[name=choices]:checked").val();
        if (indexofChoosenAnswer == theQuiz[i].indexofCorrectAnswer) {
            totalScore++;
        }
    }

    function clear() {
        $('.answer, #ask').remove();
    }

    function showResult() {
        $('#ask, input').remove();
        $('body').append("<p id='total'> Your total score: " + totalScore + "</p>");
    }
    showQuestion();
    $('body').append('<input type="button" value="Next" id="next" />');
    $('#next').on('click', function () {
        checkQuestion();
        i++;
        clear();
        if (i < theQuiz.length) {
            showQuestion();
        } else {
            showResult();
        }
    });
});