JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



JavaScript Quiz

JavaScript Quiz and see how you do. Select the correct answers by using the drop down menus. Once you are done, Click submit to see your score! The ones that you get wrong will have a check! QUESTION #1 QUESTION #2 QUESTION #3 You got out of correct. Your Score: %


Insert into <HEAD>
<script language="JavaScript"> <!-- Hide from old browsers function quiz(form) { var i = 0 var result1=document.form1.answer1.selectedIndex var result2=document.form2.answer2.selectedIndex var result3=document.form3.answer3.selectedIndex // Addition #1 Goes Here if (result1==0){ alert("Question #1 was not answered");} if (result2==0){ alert("Question #2 was not answered");} if (result3==0){ alert("Question #3 was not answered");} // Addition #2 Goes Here else { if (result1==3){i++} // In form1 the correct answer is the third OPTION VALUE if (result2==2){i++} // In form2 the correct answer is the second OPTION VALUE if (result3==2){i++} // In form3 the correct answer is the second OPTION VALUE // Addition #3 Goes Here document.total.score.value = i var per = Math.round((i / 3) * 100) // Addition #5 Goes Here (change the number "3") document.total.percent.value = per if (result1 != 3){ // In form1 the correct answer is the third OPTION VALUE document.form1.check1.checked = true} else {document.form1.check1.checked = false} if (result2 != 2){ // In form2 the correct answer is the second OPTION VALUE document.form2.check2.checked = true} else {document.form2.check2.checked = false} if (result3 != 2){ // In form3 the correct answer is the second OPTION VALUE document.form3.check3.checked = true} else {document.form3.check3.checked = false} // Addition #4 Goes Here } } //--> </SCRIPT>

Insert into <BODY>
<FORM NAME="form1"><INPUT TYPE="CHECKBOX" NAME="check1"> <STRONG>QUESTION #1</STRONG> <SELECT NAME="answer1" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="1">ANSWER #1 <OPTION VALUE="2">ANSWER #2 <OPTION VALUE="3">ANSWER #3 </SELECT></FORM> <FORM NAME="form2"><INPUT TYPE="CHECKBOX" NAME="check2"> <STRONG>QUESTION #2</STRONG> <SELECT NAME="answer2" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="1">ANSWER #1 <OPTION VALUE="2">ANSWER #2 <OPTION VALUE="3">ANSWER #3 </SELECT></FORM> <FORM NAME="form3"><INPUT TYPE="CHECKBOX" NAME="check3"> <STRONG>QUESTION #3</STRONG> <SELECT NAME="answer3" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="1">ANSWER #1 <OPTION VALUE="2">ANSWER #2 <OPTION VALUE="3">ANSWER #3 </SELECT></FORM> <form name="total"> <INPUT TYPE="BUTTON" VALUE="Submit" onClick="quiz()"> <INPUT TYPE="button" VALUE="Reload Quiz" onClick='parent.location="javascript:location.reload()"'><BR><HR><BR> You got <INPUT TYPE="TEXT" NAME="score" VALUE="" SIZE=5> out of <INPUT TYPE="TEXT" NAME="outof" VALUE="3" SIZE=5> correct.<BR><BR> Your Score: <INPUT TYPE="TEXT" NAME="percent" VALUE="" SIZE=3> %<BR><HR><BR><BR> </FORM>

Other Options
Part 1: The following lines go in your <head></head> tag. This part of the code determines if the answer is correct. Read the comments within the code to see how to determine the right answer. (Example: Question 1: the correct answer is "George Washington". That is the THRID choice and a number "3" will be placed where Addition #3 and #4 are). Making additions will be explained at the end of this document. <script language="JavaScript"> <!-- Hide from old browsers function quiz(form) { var i = 0 var result1=document.form1.answer1.selectedIndex var result2=document.form2.answer2.selectedIndex var result3=document.form3.answer3.selectedIndex // Addition #1 Goes Here if (result1==0){ alert("Question #1 was not answered");} if (result2==0){ alert("Question #2 was not answered");} if (result3==0){ alert("Question #3 was not answered");} // Addition #2 Goes Here else { if (result1==3){i++} // In form1 the correct answer is the third OPTION VALUE if (result2==2){i++} // In form2 the correct answer is the second OPTION VALUE if (result3==2){i++} // In form3 the correct answer is the second OPTION VALUE // Addition #3 Goes Here document.total.score.value = i var per = Math.round((i / 3) * 100) // Addition #5 Goes Here (change the number "3") document.total.percent.value = per if (result1 != 3){ // In form1 the correct answer is the third OPTION VALUE document.form1.check1.checked = true} else {document.form1.check1.checked = false} if (result2 != 2){ // In form2 the correct answer is the second OPTION VALUE document.form2.check2.checked = true} else {document.form2.check2.checked = false} if (result3 != 2){ // In form3 the correct answer is the second OPTION VALUE document.form3.check3.checked = true} else {document.form3.check3.checked = false} // Addition #4 Goes Here } } //--> </SCRIPT> Part 2: These lines are the questions and answers. They can go anywhere in your page. Change the values: QUESTION # and ANSWER # <FORM NAME="form1"><INPUT TYPE="CHECKBOX" NAME="check1"> <STRONG>QUESTION #1</STRONG> <SELECT NAME="answer1" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="1">ANSWER #1 <OPTION VALUE="2">ANSWER #2 <OPTION VALUE="3">ANSWER #3 </SELECT></FORM> <FORM NAME="form2"><INPUT TYPE="CHECKBOX" NAME="check2"> <STRONG>QUESTION #2</STRONG> <SELECT NAME="answer2" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="1">ANSWER #1 <OPTION VALUE="2">ANSWER #2 <OPTION VALUE="3">ANSWER #3 </SELECT></FORM> <FORM NAME="form3"><INPUT TYPE="CHECKBOX" NAME="check3"> <STRONG>QUESTION #3</STRONG> <SELECT NAME="answer3" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="1">ANSWER #1 <OPTION VALUE="2">ANSWER #2 <OPTION VALUE="3">ANSWER #3 </SELECT></FORM> Part 3: This part of the code is the button and the score. They as well can go anywhere. (You don't have to change any values in these lines of code) <form name="total"> <INPUT TYPE="BUTTON" VALUE="Submit" onClick="quiz()"> <INPUT TYPE="button" VALUE="Reload Quiz" onClick='parent.location="javascript:location.reload()"'><BR><HR><BR> You got <INPUT TYPE="TEXT" NAME="score" VALUE="" SIZE=5> out of <INPUT TYPE="TEXT" NAME="outof" VALUE="3" SIZE=5> correct.<BR><BR> Your Score: <INPUT TYPE="TEXT" NAME="percent" VALUE="" SIZE=3> %<BR><HR><BR><BR> </FORM> -------------------------------------------------------------------------------- Making Additions I will now describe how to make additional questions and answers. I will describe this by adding a Fourth question. Part 1: In the first part of the code, the one that goes in thy head tag, there are four additions that need to be made. They are marked by comment tags ==> "//" and say "Addition #1 Goes Here." Add the appropriate line to the code by copying the text in purple. Addition #1 = var result4=document.form4.answer4.selectedIndex Addition #2 = if (result4==0){ alert("Question #4 was not answered");} Addition #3 = if (result4==1){i++} - "1" is the correct answer Addition #4 = if (result4 != 1){ document.form4.check4.checked = true} - "1" is the correct answer Addition #5 = var per = Math.round((i / 4) * 100) - The "4" is the number of questions Part one should now look like this: <script language="JavaScript"> <!-- Hide from old browsers function quiz(form) { var i = 0 var result1=document.form1.answer1.selectedIndex var result2=document.form2.answer2.selectedIndex var result3=document.form3.answer3.selectedIndex var result4=document.form4.answer4.selectedIndex // Addition #1 Goes Here if (result1==0){ alert("Question #1 was not answered");} if (result2==0){ alert("Question #2 was not answered");} if (result3==0){ alert("Question #3 was not answered");} if (result4==0){ alert("Question #4 was not answered");} // Addition #2 Goes Here else { if (result1==3){i++} // In form1 the correct answer is the third OPTION VALUE if (result2==2){i++} // In form2 the correct answer is the second OPTION VALUE if (result3==2){i++} // In form3 the correct answer is the second OPTION VALUE if (result4==1){i++} // In form4 the correct answer is the first OPTION VALUE // Addition #3 Goes Here document.total.score.value = i var per = Math.round((i / 4) * 100) document.total.percent.value = per // If the answer is not the correct value, check the box if (result1 != 3){ // In form1 the correct answer is the third OPTION VALUE document.form1.check1.checked = true} else {document.form1.check1.checked = false} if (result2 != 2){ // In form2 the correct answer is the second OPTION VALUE document.form2.check2.checked = true} else {document.form2.check2.checked = false} if (result3 != 2){ // In form2 the correct answer is the second OPTION VALUE document.form3.check3.checked = true} else {document.form3.check3.checked = false} if (result3 != 1){ // In form4 the correct answer is the first OPTION VALUE document.form4.check4.checked = true} else {document.form4.check4.checked = false} // Addition #4 Goes Here } } //--> </SCRIPT> Part 2: For part two, all you need to do is insert these lines after the question and answer number 3 (after what you all ready copied) <FORM NAME="form4"><INPUT TYPE="CHECKBOX" NAME="check4"> <STRONG>QUESTION #4</STRONG> <SELECT NAME="answer4" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="1">ANSWER #1 <OPTION VALUE="2">ANSWER #2 <OPTION VALUE="3">ANSWER #3 </SELECT></FORM> Part 3: No Change