JSFiddle - React, Tailwind, and code Playground

HTML

<div class="quiz">
    <ul>
        <li>
            <span class="answer"></span>
            <p>The hair on your head is there to cushion your head and attract others who are interested in mating.</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>The average person loses about 10-20 strands per day.</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>You shouldn’t wash your hair too often because frequent shampooing can make hair fall out.</p>
            <div class="options">
                <a href="" class="flag">True</a>
                <span>or</span>
                <a href="" class="flag">False</a>
            </div>
        </li>
        <li>
            <span class="answer"></span>
            <p>Rain can swell your hair up to 30%.</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

(function ($, undefined) {
    var currentPosition = 0,
        currentQuestion = 0,
        slideWidth = 200
        optionsWrapper = $('.options'),
            tryCTA = $('CTAtry'),
        answer = $('span.answer')
        questionWrapper = $('.quiz ul'),
        totalQuestions = $('.quiz ul li').length,
        answers = ["False","False","False","True"];
    
    questionWrapper.width(totalQuestions*slideWidth)
            

    $('.flag').on('click',function(e) {
        e.preventDefault();
        var nextCTA = $(this).parent().next(nextQuestion).length,
            optionWrapper = $(this).parent(),
            selectedAnswer = $(this).html(),
            actualAnswer = answers[currentQuestion],
            displayOptionText = "";

        if(nextCTA) {
            optionWrapper.next(nextQuestion).show();
        } else {
            tryCTA.show(); 
        }

        displayOptionText = (selectedAnswer == actualAnswer) ? "Correct" : "Incorrect";
        optionWrapper.hide().parent().find(answer).html(displayOptionText).show();
    });
    
    nextQuestion.on('click',function(e){
        e.preventDefault();
        currentPosition = currentPosition+1;
        $(this).parent().parent().animate({
            'marginLeft' : slideWidth*(-currentPosition)
        });
        currentQuestion++;
    });

    tryCTA.on('click',function(e) {
        e.preventDefault();
        resetQuiz(e);
        $(this).hide();
    })
        
        function resetQuiz(e) {
        questionWrapper.animate({
             opacity: 0
        },0)
        .animate({
             opacity: 1            
         },500)
        
        answer.html(" ");
        questionWrapper.css('margin-left','0');
        optionsWrapper.show();    
        nextQuestion .hide();
        currentPosition = 0;
        currentQuestion = 0;
   }
        
} (jQuery));