JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<div id='questionId'></div>
<div class='answerholder'>
    <span class='answer box' id='left'></span>
    <span class='answer box' id='right'></span>
</div>
<div id='nextquestion' class='box'>Go to next question...</div>

CSS

.box {
    border: 1px solid black;
}

JavaScript

var questions = new Array();
    questions[0] = "This is the first question";
    questions[1] = "This is the second question";
    questions[2] = "This is the third question";
    questions[3] = "This is the fourth question";

    var answers = new Array();
    answers[0] = "first answer";
    answers[1] = "second answer";
    answers[2] = "third answer";
    answers[3] = "fourth answer";

    var garbage = new Array();
    garbage[0] = "first garbage";
    garbage[1] = "second garbage";
    garbage[2] = "third garbage";
    garbage[3] = "fourth garbage";

    var k = 0;
    var q = document.getElementById("questionId");
    var a = document.getElementById("left");
    var g = document.getElementById("right");
    var nxtquestion = document.getElementById('nextquestion');

    nxtquestion.addEventListener('click', nextquestion, false);
    a.addEventListener('click', rightwrong, false);
    g.addEventListener('click', rightwrong, false);


    function nextquestion() {
        for (var i = 0; i < questions.length; i++) {
            q.innerHTML = questions[k];
        }
        randomize(k);
        k++;
        currentQuestion = k;
        if (k > questions.length) {
            q.innerHTML = "Great, you have finished.  Please reload the page to play again!";
            a.innerHTML = "";
            g.innerHTML = "";
            nxtquestion.style.display = "none";
        }
        return;
    }

    var rightAnswerId;
    function rightwrong(e) { 
        if (e.target.id == rightAnswerId) {
            alert("CORRECT");
        } else { 
            alert("WRONG");
        }
    }
    

    function randomize(k) {
        var randomizer = Math.floor((Math.random() * 10) + 1);

        
        if (randomizer <= 5) {
            a.innerHTML = answers[k];
            g.innerHTML = garbage[k];
            rightAnswerId = 'left';
        } else {
            g.innerHTML = answers[k];
            a.innerHTML = garbage[k];
            rightAnswerId = 'right';
     ...