JSFiddle - React, Tailwind, and code Playground

by Mark McFadden

HTML

<body>
    <div id="createAccountArea" style="display: none;">
        <label for="usersName">Your Name:</label>
        <input type="text" id="usersFullName" />
        <br/>New User Name:
        <input type="text" name="newUsername" id="newUsername">
        <br/>Password:
        <input type="password" name="newPassword" id="newPassword">
        <br/>Confirm Password:
        <input type="password" name="confirmPassword" id="confirmPassword">
        <br/>
        <input type="button" id="submitAccount" value="Create Account">
        <div id="passwordConfirmError" style="display: none;"></div>
    </div>
    <div id="loginForm">User name:
        <input type="text" name="theUsername" id="theUsername">
        <br/>Password:
        <input type="password" name="thePassword" id="thePassword">
        <br/>
        <input type="button" id="login" value="Login">
        <br/>Don't have an account?
        <input type="button" id="createAccount" value="Create Account">
        <br/>
        <div id="loginError" style="display: none;"></div>
    </div>
    <div id="questionArea" style="display: none;">
        <div id="theUsersName">User's Name Here</div>
        <div id="question"></div>
        <div id="answers"></div>
        <div id="score" style="display: none;"></div>
        <div id="buttonDiv">
            <input type="button" id="backButton" value="< Back">&nbsp;&nbsp;
            <input type="button" id="nextButton" value="Next >">
        </div>
    </div>
</body>

JavaScript

var questionNumber = 0;
var answersText = "";
var correctAnswerCount = 0;
var theScore = 0;
var answerArray = [];

var allQuestions = [{
    question: "What does 2+2 = ?",
    choices: ["1", "4", "6", "7"],
    correctAnswer: 1
}, {
    question: "What is the price of eggs in China?",
    choices: ["$3.95", "$1.99", "$5.55", "It would not be in US Currency anyway!"],
    correctAnswer: 3
}, {
    question: "Why is the sky blue?",
    choices: ["Because it is.", "Light refraction", "Don't know."],
    correctAnswer: 1
}];

var nextQuestion = function (questionNumber) {
    //clear content divs
    $("#question").html("");
    answersText = "";
    //form the answers           
    $.each(allQuestions[questionNumber]['choices'], function (i, obj) {
        answersText += "<input type='radio' name='selection' value=" + i;
        if (answerArray[questionNumber]) {
            if (answerArray[questionNumber].answer == i) {
                //console.log("matched!");
                answersText += " checked ";
            }
        }
        answersText += "> " + obj + " <br>";
    });

    //popluate div#question
    $("#question").hide().html("Question " + (questionNumber + 1) + " : " + allQuestions[questionNumber]['question']).fadeIn(1500);

    //populate div#answers
    $("#answers").html(answersText);
};

$("#nextButton").click(function () {
    $("#backButton").show();

    if (!isSelectionRecorded()) {
        alert("Please make a selection.");
        return;
    }

    //see if they are done
    if (questionNumber < allQuestions.length - 1) { //not done
        questionNumber += 1;
        nextQuestion(questionNumber);
    } else { //done
        //now score the quiz and show the results
        theScore = 0;

        //getthe number of correct answers
        for (i = 0; i < answerArray.length; i++) {
            if (answerArray[i].isCorrect == true) {
                correctAnswerCount++;
            }
        }

        theScore = correctAnswerCount /...