JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

HTML

<div class="quiz">
    <ul>
        <li>
            <span class="answer"></span>
            <p>Writing Object Oriented JavaScript is not a FUN.</p>
            <div class="options">
                <a href="" class="flag">True</a>
                <span>or</span>
                <a href="" class="flag">False</a>
            </div>                        
            <a href="" class="next">Next</a>
        </li>
        <li>
            <span class="answer"></span>
            <p>Let's give it a try! No harm in learning anything NEW.</p>
            <div class="options">
                <a href="" class="flag">True</a>
                <span>or</span>
                <a href="" class="flag">False</a>
            </div>
            <a href="" class="next">Next</a>
        </li>
        <li>
            <span class="answer"></span>
            <p>Some code running !</p>
            <div class="options">
                <a href="" class="flag">True</a>
                <span>or</span>
                <a href="" class="flag">False</a>
            </div>
        </li>
    </ul>
    <a href="" class="CTAtry">Try Again!</a>
</div>

CSS

.next, .answer { display: none; }
.quiz { width: 200px; overflow: hidden; border: 1px solid #ccc; height: 200px;   position:relative;}
li { width: 200px; float:left; position: relative; height: 200px; }
.options { position: absolute; bottom: 10px; right: 10px; }
.options span { display: inline-block; padding: 0 2px; }
.next { position: absolute; bottom: 10px; right: 10px; }

.CTAtry { display: none; position:absolute; bottom: 10px; right: 10px;}

JavaScript

scalpQuiz = {
    currentQuestion : 0,
    nextQuestion : ('.next'),
    options : ('.flag'),
    resetButton : ('.CTAtry');
    moveToNextQuestion : function() {
        var obj = this;
        console.log('Next Click Init');
    },
    chooseOption : function() {
        var obj = this;
        console.log('Choose Option Init');
    },
    resetQuizModule : function() {
        var obj = this;
        console.log('Quiz Reset Init');
    },
    init : function() {
        var obj = this,
        next = $(obj.nextQuestion),
        chooseOption = $(obj.options),
        resetQuiz = $(obj.resetButton);
        
        console.clear();
        console.log('Scalp Quiz Init');
        
        next.click(function(e) { e.preventDefault(); obj.moveToNextQuestion() });
        chooseOption.click(function(e) { e.preventDefault(); obj.chooseOption() });
        resetQuiz.click(function(e) { e.preventDefault(); obj.resetQuizModule() });
    }
}
        
   
   // CALL INIT()            
   scalpQuiz.init();