JSFiddle - React, Tailwind, and code Playground

by slopeofhope81

HTML

<div id="question"></div>
<div id="answer"></div>

JavaScript

var questionNo = 0;
    var score = 0;
    var allQuestions = [{
        question: "what is 2 + 2",
        choices: [1, 2, 3, 4],
        correctAnswer: 3
    }, {
        question: "what is 2*2",
        choices: [1, 2, 3, 4],
        correctAnswer: 3
    }, {
        question: "what is 2/2",
        choices: [1, 2, 3, 4],
        correctAnswer: 0
    }];
    setQuestion(questionNo);

    function setQuestion(n) {
        var questionLocation = document.getElementById("question");
        var answer = document.createTextNode(allQuestions[n].question);
        questionLocation.appendChild(answer);
        displayChoices(n);
    }

    function displayChoices(n) {
        if (questionNo > allQuestions.length) {
            questionLocation.style.display = "none";
            displayScore();
        } else {
            for (var i = 0; i < allQuestions[n].choices.length; i++) {
                var input = document.createElement("input");
                input.type = "radio";
                input.name = "choices";
                input.value = "choice" + i;
                var answer = document.getElementById("answer");
                var option = document.createTextNode(allQuestions[n].choices[i]);
                input.appendChild(option);
                answer.appendChild(input);
            }

        }
    }