| |
|
JavaScript Quiz Script |
We can develop a quiz script using client side JavaScript. We will start with a simple quiz where we will ask one question with four options to select. One of them will be the correct answer and other three wrong. We will display correct or wrong message based on the selection of the options by the user. This is a simple quiz where one question is asked and with the understanding of this we will develop more complex quiz with more than one questions and displaying the results.
Here we will use div layers to give the message on the result of the selection of the quiz. We will keep two layers one for displaying correct answer message and other for displaying wrong answer message. These two layers we will keep hidden by default. Once the correct options is clicked then the layer with correct message will be displayed. Same way for other three options we will display the layer having the wrong answer message .
Here is the demo .
 Correct  Wrong
Read how the layers are connected to radio buttons here.
We will use a form with one group of radio buttons having four options. All the radio buttons will have onclick event to trigger the javaScript validate function. One more function setVisibility we will use to manage the visibility of the layers. To control the layers we will call the setVisibility function within the validate function. Here is the javascript functions with in head tags.
<script type="text/javascript">
function validate(form) {
// Checking if at least one period button is selected. Or not.
if (document.form1.q[0].checked ){
setVisibility('sub1', 'inline');
setVisibility('sub2','none');
}else{
setVisibility('sub2', 'inline');
setVisibility('sub1','none');
}
}
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
Above this line we will declare the div layers in a style sheet.
<style type="text/css">
div {
position: absolute;
left: 350px;
top: 20px;
width: 180px;
padding: 10px;
color: Black;
display: none;
}
</style>
Now with all the above code we will display the four options
<table border='0' width='50%' cellspacing='0' cellpadding='0' ><form name=form1 method=post action=action_page.php onsubmit='return validate(this)'>
<tr bgcolor='#ffffff'><td align=center ><font face='verdana' size='2'><b>Here is the question </b><br>
<input type=radio name=q value='1' onClick="validate(this)";>Answer 1<br>
<input type=radio name=q value='2' onClick="validate(this)";>Answer 2<br>
<input type=radio name=q value='3' onClick="validate(this)";>Answer 3<br>
<input type=radio name=q value='4' onClick="validate(this)";>Answer 4<br>
</td></tr>
<tr bgcolor='#ffffff'><td align=center ><input type=submit value=Submit> <input type=reset value=Reset></td></tr>
</table></form>
<div id="sub1"><img src=correct.jpg> Correct</div>
<div id="sub2"><img src=wrong.jpg> Wrong</div>
You can download the total quiz file here.
Found anything wrong or wants to improve the code by adding more features? Post your short comment here or use the Forum
| |
|
|
|
