This time I will share jQuery Plugin and tutorial about Cookie-enabled Exam Wizard Plugin With jQuery – examWizard.js, hope it will help you in programming stack.
A full-featured and cookie-enabled jQuery exam wizard plugin that helps you create online mock exams, tests, homework, surveys with ease.
Key features:
- Supports as many questions.
- Stores the answers in the cookies and restore them when needed.
- Next/Prev buttons.
- Allows you to set questions using any form fields: checkbox, radio button, select box, text field, etc.
- Displays answers in a quick access menu.
- Allows to mark questions.
- Callback functions.
How to use it:
1. Load the minified version of the jQuery examWizard.js plugin after jQuery.
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
5 |
<script src="js/examwizard.min.js"></script> |
2. Create an HTML form for the exam wizard and insert your own questions to the form as follows:
02 |
<div class="question" data-question="1"> |
04 |
<input type="radio" data-alternatetype="radio" name="fieldName[0]" data-alternateName="answer[0]" data-alternateValue="A" value="1" id="answer-0-1"/> |
05 |
<label for="answer-0-1" class="answer-text"><span></span>BE 1 PREPARED YOUR EXAM WILL START SOON</label> |
07 |
<input type="radio" data-alternatetype="radio" name="fieldName[0]" data-alternateName="answer[0]" data-alternateValue="B" value="2" id="answer-0-2"/><label for="answer-0-2" class="answer-text"><span></span>BE 1 PREPARED YOUR EXAM WILL START SOON</label> |
09 |
<input type="radio" data-alternatetype="radio" name="fieldName[0]" data-alternateName="answer[0]" data-alternateValue="C" value="3" id="answer-0-3"/> |
10 |
<label for="answer-0-3" class="answer-text"><span></span>BE 1 PREPARED YOUR EXAM WILL START SOON</label> |
16 |
<div class="question" data-question="2"> |
24 |
<input type="hidden" value="1" id="currentQuestionNumber" name="currentQuestionNumber" /> |
25 |
<input type="hidden" value="18" id="totalOfQuestion" name="totalOfQuestion" /> |
26 |
<input type="hidden" value="[]" id="markedQuestion" name="markedQuestions" /> |
3. Create a quick access panel to display question numbers and anwsers.
01 |
<div id="quick-access-section"> |
03 |
<thead class="question-response-header"> |
05 |
<th class="text-center">Question</th> |
06 |
<th class="text-center">Response</th> |
10 |
<tr class="question-response-rows" data-question="1"> |
12 |
<td class="question-response-rows-value">-</td> |
14 |
<tr class="question-response-rows" data-question="2"> |
16 |
<td class="question-response-rows-value">-</td> |
22 |
<a href="javascript:void(0)" id="quick-access-prev">< Back</a> |
23 |
<span id="quick-access-info"></span> |
24 |
<a href="javascript:void(0)" id="quick-access-next">Next ></a> |
4. Create the footer containing navigation & pagination controls for the exam wizard.
01 |
<div class="exams-footer"> |
02 |
<div class="back-to-prev-question-wrapper text-center"> |
03 |
<a href="javascript:void(0);" id="back-to-prev-question"> |
07 |
<div class="footer-question-number-wrapper"> |
08 |
<span id="current-question-number-label">1</span> |
