JSFiddle - React, Tailwind, and code Playground

by Zubair Mushtaq

HTML

<form class="form-horizontal" role="form" id='quiz_form' method="post" action="example.php">
    <input type="hidden" value="4">
    <div class='cont' id='question_splitter_1'>
        <h1> Remaining Time : <span id='timer_1'></span> </h1>
        <script>
    

                // Config
                var time_count  = 184; // Min test time
                var time_out;
                timedCount();

                function timedCount() {

                    var hours = parseInt(time_count  / 3600) % 24;
                    var minutes = parseInt(time_count  / 60) % 60;
                    var seconds = time_count % 60;

                    var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);

                    $('#timer_1').html(result);
                    if (time_count  == 0) {
                        setConfirmUnload(false);
                        $("#quiz_form").submit();
                    }
                    time_count  = time_count  - 1;
                    time_out = setTimeout(function() {
                        timedCount()
                    }, 1000);
                }

        </script>

        <div id='question1'>


            <p class='questions' id="qname1"> 1.
                <p>The father said to him,&quot;what are you doing&quot;</p>
           

            <input type="radio" value="1" id='radio1_34' name='34' />the father asked him what he is doing
            <br/>
            <input type="radio" value="2" id='radio1_34' name='34' />the father asked him what he was doing
            <br/>

            <input type="radio" value="3" id='radio1_34' name='34' />the father asked him what he was doing?
            <br/>

            <input type="radio" value="4" id='radio1_34' name='34' />the father asked him what he are doing
            <br/>

            <input type="radio" checked='checked' style='display:none' value="smart_quiz"...

CSS

.hide {
    display: none!important;
}

JavaScript

$( document ).ready(function() {
		$('.cont').addClass('hide');
		$('#question_splitter_1').removeClass('hide');
		$(document).on('click','.next',function(){
		    last=parseInt($(this).attr('id'));  console.log( last );   
		    nex=last+1;
		    $('#question_splitter_'+last).addClass('hide');
		    
		    $('#question_splitter_'+nex).removeClass('hide');
		});
		
		$(document).on('click','.previous',function(){
		    last=parseInt($(this).attr('id'));     
		    pre=last-1;
		    $('#question_splitter_'+last).addClass('hide');
		    
		    $('#question_splitter_'+pre).removeClass('hide');
		});



});