JSFiddle - React, Tailwind, and code Playground

by boazmier

HTML

<body>
<div id=contain>
    <div class="inner">
    <h4 id="Numq">

    </h4>
    <h3 id="Theq">
    </h3>
    <div id="ch">


    </div>
    </div>
    <button id = "button">Next</button>
</div>
</body>

JavaScript

(function () {

//all questions are set here
    var allQuestions = [
        {question: "Who is Prime Minister of the United Kingdom?",
            choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
            correct: "Winston"},

        {question: "How old i am?",
            choices: ["21", "19", "30", "15"],
            correct: "21"},

        {question: "What do i do?",
            choices: ["Web App", "Sleeping", "God", "knows"],
            correct: "Web"},

        {correctAnswer: 0}
    ];

    var storeAns = allQuestions[3].correctAnswer;

    var compare_to_allQ = 0;

    var Cans;

    var b;

    var loadQ;

    var CalcT;

    var loadr;

    var newq;

    var loadc;


    loadQ = function (n) {

        $("#Theq").append("<p>" + allQuestions[n].question + "</p>");

        loadc = function () {

            var c = allQuestions[n].choices;
            var len = c.length;
            for (i in c) {
                $("#ch").append("<p><input type='radio' name=" + n + " value=" + c[i] + ">" + c[i] + "</p>");
            }
        }

        loadc();
        Cans;
        b;

        $("input[name=" + n +"]").click(function () {
            b = $("input[name=" + n +"]");
            if (b.is(':checked')) {
                Cans = $('input[name=' + n + ']:checked').val();
                console.log(Cans);
            }
            console.log(Cans);
        });
    }
    CalcT = function () {
        $("#button").click(function () {
            if (Cans === allQuestions[n].correct) {
                storeAns++;
            }
        });
    }

    loadr = function () {
        $("#contain").html("Your score is " + storeAns + "/3");
    }

    newq = function () {
        $(".inner").children().fadeOut();
        compare_to_allQ += 1;
        CalcT();
        if (compare_to_allQ < allQuestions.length) {
            loadQ(compare_to_allQ);
        }
        else if (compare_to_allQ >= allQuestions.length) {
           ...