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 .

Demo of Quiz script

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.

Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    More on Period button & JavaScript

    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer