JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<h1><span id="timerText">--:--</span> Remaining</h1>
<form name="myquiz" id="myquiz" method="post" action="">
<label class="content_question">What is the best IDE?</label>
<fieldset class="answers">
<input id="464" name="answer_id_01" type="radio" value="464">Option 1
<input id="465" name="answer_id_01" type="radio" value="465">Option 2
<input id="466" name="answer_id_01" type="radio" value="466">Option 3
<input id="467" name="answer_id_01" type="radio" value="467">Option 4</fieldset>
<label class="content_question">What is linear programming?</label>
<fieldset class="answers">
<input id="468" name="answer_id_01" type="radio" value="468">Option 1
<input id="469" name="answer_id_01" type="radio" value="469">Option 2
<input id="470" name="answer_id_01" type="radio" value="470">Option 3
<input id="471" name="answer_id_01" type="radio" value="471">Option 4</fieldset>
<input type="submit" name="save" id="save" value="Submit Test">
</form>
CSS
fieldset {
padding: 0 15px 20px;
}
JavaScript
$(function () {
// Config
var mins = 5; // Min test time
var secs = 0; // Seconds (In addition to min) test time
var timerDisplay = $('#timerText');
//Globals:
var timeExpired = false;
// Test time in seconds
var totalTime = secs + (mins * 60);
// This sourced from: http://stackoverflow.com/questions/532553/javascript-countdown
var countDown = function (callback) {
var interval;
interval = setInterval(function () {
if (secs === 0) {
if (mins === 0) {
timerDisplay.text('0:00');
clearInterval(interval);
callback();
return;
} else {
mins--;
secs = 60;
}
}
var minute_text;
if (mins > 0) {
minute_text = mins;
} else {
minute_text = '0';
}
var second_text = secs < 10 ? ('0' + secs) : secs;
timerDisplay.text(minute_text + ':' + second_text);
secs--;
}, 1000, timeUp);
};
// When time elapses: submit form
var timeUp = function () {
alert("Time's Up!");
timeExpired = true;
document.getElementById('myquiz').submit();
};
// Start the clock
countDown(timeUp);
$('#myquiz').submit(function () {
// User time still yet to elapse and form was submitted by user: check if all questions were answered
if (!timeExpired) {
var errors = [];
$('.content_question').each(function () {
var answer = $(this).next();
var inputs = answer.find('input[type=radio], input[type=checkbox]');
if (inputs.length > 0) {
var groupChecked = false;
inputs.each(function () {
if ($(this).is(':checked')) {
...