JSFiddle - React, Tailwind, and code Playground

by gnemeth

HTML

<div id="question__holder"></div>

    <div id="answer__holder"></div>

    <button id="next">Next</button>
    <h2 id="score"></h2>

JavaScript

(function () {
    var quizApp = {
        init: function () {
            this.questionCount();
            this.cacheDOM();
            this.cacheDOM();
            this.render(this.actualQuestion);
            this.addListener();
        },
        allQuestions: [{
                question: "Who is Prime Minister of the United Kingdom?",
                choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
                correctAnswer: 0
        },
            {
                question: "What used to be the currency of Italy?",
                choices: ["Euro", "Lira"],
                correctAnswer: 1
        }
        ],
        questionCount: function () {
            return this.allQuestions.length - 1
        },
        actualQuestion: 0,
        correctAnswerCount: 0,
        notChecked: true,
        question: '',
        answers: '',
        cacheDOM: function () {
            this.question__holder = document.getElementById('question__holder');
            this.answer__holder = document.getElementById('answer__holder');
            this.nextButton = document.getElementById('next');
        },
        render: function (questionNum) {
            this.question = '<p class="question">' + this.allQuestions[questionNum].question + '</p>';
            for (var i = 0; i <= (this.allQuestions[questionNum].choices.length - 1); i++) {
                this.answers += '<input id="answer-' + i + '" type="radio" name="answer" data-answer="' + i + '"><label for="answer-' + i + '">' + this.allQuestions[questionNum].choices[i] + '</label><br />';
            }

            this.question__holder.innerHTML = this.question;

            this.answer__holder.innerHTML = this.answers;

            this.notChecked = true;
        },
        checkAnswer: function (node) {
            var nodeChildsCount = node.childElementCount;
            for (var i = 0; i < nodeChildsCount; i++) {
                if (node.children[i].checked == true) {
           ...