JSFiddle - React, Tailwind, and code Playground

by abustamam

HTML

<!DOCTYPE html>
    <title>Quiz</title>
<body>

<header>
    <h1>Quiz</h1>
</header>

    <h2 id="question">Question 1</h2>
    <input type="radio" value="choice1" name="choice"><span id="li0"></span>
    <br>
    <input type="radio" value="choice2" name="choice"><span id="li1"></span>
    <br>
    <input type="radio" value="choice3" name="choice"><span id="li2"></span>
    <br>
    <button id="back" type='submit'>&larr; Back</button>
    <button id="next" type="submit">Next &rarr;</button>

JavaScript

$(document).ready(function(){
    var Questions = [{
        Question: "What is 1 + 1?",
        Answers: ["1","2","3"],
        Correct: 1
    }, {
        Question: "What is 2 + 2?",
        Answers: ["2","4","6"],
        Correct: 1
    }, {
        Question: "What is 3 + 3?",
        Answers: ["3","6","9"],
        Correct: 1
    }];
    var questLen = Questions.length;
    var numRight = 0;
    var counter = 0;

    var showQuestion = function(q) {
        $("#question").text(Questions[q].Question);
        var ansLen = Questions[q].Answers.length;
        var idx = "";
        for (var i = 0; i < ansLen; i++){
            idx = "#li" + i;
            $(idx).text(Questions[q].Answers[i]);
        }
    };

    var showQuestions = function(){
        while (counter < questLen){
            counter++;
        }
    };



    showQuestion(0);

});