JSFiddle - React, Tailwind, and code Playground

by alxers

HTML

<div id="wrapper">
    <form id="loginForm">
        <input type="text" placeholder="username" id="userName">
        <input type="text" placeholder="password" id="userPassword">
        <button id="login" type="button">Login</button>
    </form>
     <h3 id="questionHeader"></h3>

    <form id="quizForm">
        <br>
        <input type="radio" name="choice" value="0" id="choice1">
        <label id="answ1" for="choice1"></label>
        <br>
        <input type="radio" name="choice" value="1" id="choice2">
        <label id="answ2" for="choice2"></label>
        <br>
        <input type="radio" name="choice" value="2" id="choice3">
        <label id="answ3" for="choice3"></label>
        <br>
        <button id="back" type="button">Back</button>
        <button id="next" type="button">Next</button>
        <p id="allQuestionNum"></p>
    </form>
</div>

CSS

body {
    margin: 0;
    border-top: 4px solid #606060;
    font-family: helvetica;
}
#wrapper {
    margin: 0 auto;
    width: 600px;
}
#loginForm {
    margin: 0;
}
h3 {
    margin-top: 10px;
    font-size: 22px;
    height: 40px;
    color: #404040;
}
h4 {
    margin-top: 16px;
    margin-bottom: 0px;
    height: 40px;
    color: #505050;
}
label {
    color: #505050;
}
button {
    border: 0;
    padding: 5px;
    margin: 15px 5px;
    font-size: 14px;
    background: #606060;
    color: #FFFFFF;
}

JavaScript

(function () {
    var allQuestions = [{
        question: "Which company first implemented the JavaScript language?",
        choices: ["Microsoft", "Sun Microsystems", "Netscape Communications"],
        correctAnswer: 2
    }, {
        question: "Which of the following browsers was the first to support JavaScript?",
        choices: ["Microsoft Internet Explorer", "Netscape Navigator", "Opera"],
        correctAnswer: 1
    }, {
        question: "The JavaScript international standard is called",
        choices: ["ECMA-262 Standard", "JavaScript 1.3 Standard", "IEEE-262 Standard"],
        correctAnswer: 0
    }];

    var questionCount = 0,
        score = 0,
        answers = [],
        allQuestionsLen = allQuestions.length,
    // initialize DOM elements
        doc = document,
        div = doc.getElementById("wrapper"),
        loginForm = doc.getElementById("loginForm"),
        userName = doc.getElementById("userName"),
        userPassword = doc.getElementById("userPassword"),
        loginButton = doc.getElementById("login"),
        questionHeader = doc.getElementById("questionHeader"),
        quizForm = doc.getElementById("quizForm"),
        backButton = doc.getElementById("back"),
        nextButton = doc.getElementById("next"),
    // create additional elements
        startButton = doc.createElement("button");

    // textContent is not supported in IE
    startButton.textContent = "Start Quiz",
    startButton.id = "start",
    startButton.type = "button";

    // Set header and answer choices

    function setAnswer(idEl, questionNum, choiceNum) {
        var choiceEl = doc.getElementById(idEl);
        choiceEl.innerHTML = allQuestions[questionNum].choices[choiceNum];
    }


    function showQuestion() {
        if (questionCount <= allQuestionsLen - 1) {
            questionHeader.innerHTML = allQuestions[questionCount].question;
            setAnswer("answ1", questionCount, 0);
            setAnswer("answ2", questionCount, 1);
        ...