JSFiddle - React, Tailwind, and code Playground

by sammie85

HTML

<div><span id="timerText"></span> (Remaining test time)</div>

<br><br>

<form name="myquiz" id="myquiz" method="post" action="">
    
    <div>
    <div class="content_question"><p>What is the best IDE?</p></div>
      
    <div class="answers">
      <div class="answer_contents">
            <span><input id="464" name="answer_id_01" type="radio" value="464"></span>
            <span><label for="464"><p>Option 1</p></label></span>
      </div>
      <div class="answer_contents">
            <span><input id="465" name="answer_id_01" type="radio" value="465"></span>
            <span><label for="464"><p>Option 2</p></label></span>
      </div>
      <div class="answer_contents">
            <span><input id="466" name="answer_id_01" type="radio" value="466"></span>
            <span><label for="464"><p>Option 3</p></label></span>
      </div>
      <div class="answer_contents">
            <span><input id="467" name="answer_id_01" type="radio" value="467"></span>
            <span><label for="464"><p>Option 4</p></label></span>
      </div>
      </div>
    </div>
    
    
    <div>
    <div class="content_question"><p>What is linear programming?</p></div>
    <div class="answers">
      <div class="answer_contents">
            <span><input id="564" name="answer_id_02" type="radio" value="564"></span>
            <span><label for="564"><p>Option 1</p></label></span>
      </div>
      <div class="answer_contents">
            <span><input id="565" name="answer_id_02" type="radio" value="565"></span>
            <span><label for="565"><p>Option 2</p></label></span>
      </div>
      <div class="answer_contents">
            <span><input id="566" name="answer_id_02" type="radio" value="566"></span>
            <span><label for="566"><p>Option 3</p></label></span>
      </div>
      <div class="answer_contents">
            <span><input id="567" name="answer_id_02" type="radio" value="567"></span>
            <span><label for="567"><p>Option 4</p></label></span>
  ...

JavaScript

$(document).ready(function(){
    	
    	var mins = 5;    // Time set for test
        var secs = mins * 60;
        var currentSeconds = 0;
        var currentMinutes = 0;
    	Decrement = function(){
    		
            currentMinutes = Math.floor(secs / 60);
            currentSeconds = secs % 60;
            if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
            secs--;
    		var htmlVar = currentMinutes + ":" + currentSeconds;
    		$('#timerText').html(htmlVar);   
            if(secs !== -1) setTimeout(function(){},1000); 
    		if(currentSeconds == 00 && currentMinutes==0){
    			
    /************** If User time has elapse: Submit form  ****************/
    
    			        document.getElementById('myquiz').submit();					
    					//document.myquiz.submit();
    
    /************** If User time has elapse: Submit form  ****************/
    
    		}
    		else{
    			
    /************** User time still yet to elapse and form was submitted by user: check if all questions were answered  ****************/
    
        $('#myquiz').submit(function(){
    
            var errors = [];
    
            $('.content_question').each(function(){
    
                var answerCont = $(this).next();
                var inputs = $(answerCont).find('input[type=radio], input[type=checkbox]');
    
                if(inputs.length > 0)
                {
                    var groupChecked = false;
    
                    $(inputs).each(function(){
                        if($(this).is(':checked'))
                        {
                            groupChecked = true;
                        }
                    });
    
                    if(!groupChecked)
                    {
                        errors.push($(this).text().trim());
                    }
                }
            });
    
            if(errors.length > 0)
            {
                var errorMessage = "You forgot to attempt " + errors.length + " questions:...