JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div>
    <p id="start_end_message">Welcome to my game...Press next to begin</p>
    <div id="question" style="display:none">
        <p>Question 1....What is my favourite colour?</p>
    </div>
    <br />
    <div id="answers" style="display:none">
        <div id="ans1"></div>
        <input type="radio" name="an" value="" />
        <div id="ans2"></div>
        <input type="radio" name="an" value="" />
        <div id="ans3"></div>
        <input type="radio" name="an" value="" />
        <div id="ans4"></div>
        <input type="radio" name="an" value="" />
    </div>
    <br />
    <div id="nextbuttondiv">
        <button id="nextbutton" class="nextQ" onclick="nextQ()">Next</button>
    </div>
</div>

JavaScript

var allQuestions = [
    ["Who is Prime Minister of the United Kingdom?",
        "What is my favourite colour?",
        "What shape is the moon?",
        "What year was the car invented?",
        "What day do catholics go to mass?"],
    [
        ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
        ["Red", "Blue", "Green", "Another"],
        ["Square", "Rectangle", "Pentagon", "Round"],
        ["1914", "1924", "1934", "None of the above"],
        ["Never", "Sunday", "Tuesday", "Monday"]
    ],
    [0, 1, 3, 3, 1]
];

var questionIndex = 0;

function nextQ() {
    questionIndex += 1;

    if (questionIndex <= 5) {

        //hide welcome message 
        document.getElementById("start_end_message").style.display = "none";

        // change question part here
        document.getElementById("question").style.display = "inline-block";
        document.getElementById("question").innerHTML = "<b>Question " + questionIndex + "</b>: " + allQuestions[0][questionIndex - 1];

        // change answer part here 
        document.getElementById("answers").style.display = "inline-block";
        //document.getElementById("ans1").style.display = "inline-block";
        document.getElementById("ans1").innerHTML = allQuestions[1][questionIndex - 1][0]; //change the innerHTML(the text that 	
        document.getElementById("ans2").innerHTML = allQuestions[1][questionIndex - 1][1]; //appear in the browser) of id=rd*
        document.getElementById("ans3").innerHTML = allQuestions[1][questionIndex - 1][2];
        document.getElementById("ans4").innerHTML = allQuestions[1][questionIndex - 1][3];

        //change button part here
        //document.getElementById("nextbutton").innerHTML = "test";
        
        document.querySelector('input[type="radio"]:checked').checked = false;

    } else if (questionIndex === 6) {

        //hide welcome/end message 
        document.getElementById("start_end_message").style.display = "inline-block";
       ...