I have a quiz section on a webpage, all the questions get loaded at once, (like Google Forms). I want to show one question at a time, so after choosing an option we can move to the next question using the Next/Previous buttons.
So far I have, all the divs hidden by default, except the first one.
$(document).ready(function() {
$("#quiz .section").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function() {
if ($("#quiz div.section:visible").next().length != 0)
if ($('.form-group input:checked').length == 0) {
alert('Please select and Option');
} else {
$("#quiz div.section:visible").next().show().prev().hide();
}
else {
$("#quiz div.section:visible").hide();
$("#quiz div.section:first").show();
}
return false;
});
$("#prev").click(function() {
if ($("#quiz div.section:visible").prev().length != 0)
$("#quiz div.section:visible").prev().show().next().hide();
else {
$("#quiz div.section:visible").hide();
$("#quiz div.section:last").show();
}
return false;
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form method="post" action="online-mcqs-submit.asp" autocomplete="off" id="validator">
<input type="hidden" name="mcqs" value="submit">
<div id='quiz'>
<div class='section' id='sec1'>
<div class='col-md-8 col-md-offset-2' style='padding:20px;border:1px solid #ccc;background:#fff'>
<div class='col-md-2 text-center'>
<h3><span class='label label-info'>1</span></h3>
</div>
<div class='col-md-10'>
<h4>In preparing a program, one shoud first</h4>
<div class='form-group'>
<label><input type="radio" name="sans_1" value="1" required> plan the solution</label><br>
<label><input type="radio" name="sans_1" value="2" required> document the program</label><br>
<label><input type="radio" name="sans_1" value="3" required> code the program</label><br>
<label><input type="radio" name="sans_1" value="4" required> define the problem</label>
</div>
</div>
</div>
</div>
<div class='section' id='sec2'>
<div class='col-md-8 col-md-offset-2' style='padding:20px;border:1px solid #ccc;background:#fff'>
<div class='col-md-2 text-center'>
<h3><span class='label label-info'>2</span></h3>
</div>
<div class='col-md-10'>
<h4>Which of the following is used to design a program using English-like statements?</h4>
<div class='form-group'>
<label><input type="radio" name="sans_2" value="1" required> Algorithm</label><br>
<label><input type="radio" name="sans_2" value="2" required> program flowchart</label><br>
<label><input type="radio" name="sans_2" value="3" required> control structure</label><br>
<label><input type="radio" name="sans_2" value="4" required> None of the above</label>
</div>
</div>
</div>
</div>
<div class='section' id='sec3'>
<div class='col-md-8 col-md-offset-2' style='padding:20px;border:1px solid #ccc;background:#fff'>
<div class='col-md-2 text-center'>
<h3><span class='label label-info'>3</span></h3>
</div>
<div class='col-md-10'>
<h4>Compilers and interpreters are types of _______________</h4>
<div class='form-group'>
<label><input type="radio" name="sans_3" value="1" required> Programming languages</label><br>
<label><input type="radio" name="sans_3" value="2" required> language translators</label><br>
<label><input type="radio" name="sans_3" value="3" required> alpha testers</label><br>
<label><input type="radio" name="sans_3" value="4" required> application generators</label>
</div>
</div>
</div>
</div>
<div class='section' id='sec4'>
<div class='col-md-8 col-md-offset-2' style='padding:20px;border:1px solid #ccc;background:#fff'>
<div class='col-md-2 text-center'>
<h3><span class='label label-info'>4</span></h3>
</div>
<div class='col-md-10'>
<h4>Which of the following type of error is detected by a language translator?</h4>
<div class='form-group'>
<label><input type="radio" name="sans_4" value="1" required> program design</label><br>
<label><input type="radio" name="sans_4" value="2" required> logic</label><br>
<label><input type="radio" name="sans_4" value="3" required> syntax</label><br>
<label><input type="radio" name="sans_4" value="4" required> both b and c</label>
</div>
</div>
</div>
</div>
<div class='section' id='sec5'>
<div class='col-md-8 col-md-offset-2' style='padding:20px;border:1px solid #ccc;background:#fff'>
<div class='col-md-2 text-center'>
<h3><span class='label label-info'>5</span></h3>
</div>
<div class='col-md-10'>
<h4>You test a program to find which of the following?</h4>
<div class='form-group'>
<label><input type="radio" name="sans_5" value="1" required> flowcharting errors</label><br>
<label><input type="radio" name="sans_5" value="2" required> logic errors</label><br>
<label><input type="radio" name="sans_5" value="3" required> algorithmic errors</label><br>
<label><input type="radio" name="sans_5" value="4" required> syntax errors</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6"><a id="prev" class="btn btn-default">Previous</a></div>
<div class="col-md-6"><a id="next" class="btn btn-default">Next</a></div>
</div>
<div class='col-md-8 col-md-offset-2' style='margin-top:20px;margin-bottom:20px;'>
<input type="hidden" value="23" name="rowcount">
<input type='submit' value='SUBMIT' class='btn btn-lg btn-block btn-success'>
</div>
</div>
</form>The Problem:
Right now when I click on the Next button, it gives the alert to choose an option, but for all other questions, the validation is not working.
- I want to apply validation on each question/div before going to the next question/div.
- I want to show submit button on the last question/div.
- I want to disable the previous button on the last question/div.