JSFiddle - React, Tailwind, and code Playground

by Atlas_

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Quiz</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="App.js"></script>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
</body>
</html>

CSS

body {
    background-image: url('http://www.wallng.com/images/2013/10/background-backgrounds-176711.jpg');
    font-size: 62.5%;
    color: #dde9ff;
    left: 0;
    right: 0;
    top: 0;
    font-family: monospace;

}
.answer {
    margin-top: 1%;
    margin-left: 3%;
}
#quizArea {
    font-size: 2em;
    color: #e9ffdd;
    margin-left: 21%;
}
#ask {
    margin-top: 28%;
}
#next,#again {
    margin-top: 3%;
    margin-left: 70%;
    position: absolute;
    bottom: 5%;
    font-size: 1.5em;
    cursor: pointer;
}
#prev {
    margin-top: 3%;
    margin-left: 30%;
    position: absolute;
    bottom: 5%;
    font-size: 1.5em;
    cursor: pointer;
}
#total {
    font-size: 3.5em;
    margin-top: 23%;
    text-align: center;
    color: plum;
}
.warnBox {
    position: absolute;
    border-radius: 10%;
    background-color: red;
    width: 25%;
    height: 5%;
    left:0;
    right:0;
    margin-top: -15%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    color: black;
    font-size: 2em;
}

JavaScript

/*function Quiz(question, choices, correctAnswerIndex) {
 'use strict';
 this.question = question;
 this.choices = choices;
 this.correctAnswerIndex = correctAnswerIndex;
 }
 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 publicly executed by hanging?', ['fish', 'pig', 'hawk', 'snake'], 1);
 theQuiz[4] = new Quiz('Dolphins sleep with how many eyes open?', ['2', '1', '0', '3'], 1);

 var myJsonString = JSON.stringify(theQuiz);
 console.log(myJsonString);*/
//theQuiz = $.getJSON("package.json");
var theQuiz;

$.getJSON("package.json", function (json) {
    console.log(theQuiz);
    theQuiz = json;
    console.log(json);
    console.log(theQuiz);
});
/*var theQuiz = (function () {
    theQuiz = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': "/package.json",
        'dataType': "json",
        'success': function (data) {
            theQuiz = data;
        }
    });
    return theQuiz;
})();*/

/*$.ajax({
    'async': false,
    'global': false,
    'url': "/package.json",
    'dataType': "json",
    'success': function (data) {
        theQuiz = data;
    }
});*/

//console.log(theQuiz);
//var myJsonString = JSON.stringify(theQuiz);
//console.log(myJsonString);

//theQuiz = JSON.parse(package.json);
//console.log(theQuiz);

$(function () {
    'use strict';
    var totalScore = 0,
        i = 0,
        selectedAnswers = [],
        $body = $('body'),
        p = '<p></p>',
        quiz,

        quizLength = theQuiz.length;
    quiz = {
        config: {
            animateSpeed: 1000
        },
        showQuestion: function () {
            var...