Tutorial 4: Writing A Quiz

Tutorial 4: Writing A Quiz

The following tutorial presupposes that you have some familiarity with HTML authoring.
This an example of a quiz that gives the score and marks the wrong answers..
This exercise presents a simple quiz, but it can be adapted for other grammatical or communicational goals.
Click here to see the finished product: template4.html

Some points to remember:

The JavaScript in this tutorial is optimized for Netscape Navigator 2 and higher. Performance using other browsers may vary.
JavaScript is case sensitive, so you will have to be consistent using lower case or capital letter when naming your functions or calling values from forms. That applies also to accented words.
Do not repeat names for functions or forms; if you do, you will get JavaScript alerts or just plain confusion in your feedback.
Although we haven't covered it here, it's always good practice to comment your scripts by inserting two slashes // next to your lines of coding.
Test often, as you create your functions, rather that waiting until you have written all of them. That way you can control better the debugging process.
If you are nesting JavaScript into HTML, you have to alternate between single quotes and double quotes. Like in step 10 of Tutorial 1: onClick = "getExplanation('Explanation')"

Remember that all the functions of the JavaScript code must be placed between the <HEAD></HEAD> tags of your HTML document.
Like any other JavaScript coding, start by inserting these two lines right after the <HEAD> tag:

<SCRIPT LANGUAGE = "JavaScript">
<!--
This script has only one function: by clicking the button labeled "Send", the script marks the incorrect answers in a checkbox and calculates the score of right answers in a percentage at the end of the HTML. There is an additional button labeled "Try again" that reloads the page.
The naming of the function of this script is quiz.
The functions starts by defining a variable for each one of four selections of the pull-down menu. The first selection is referred to as 0 and corresponds to the visible selection ("--Choose an option--") of the pull-down menu:

function quiz(form) {
var i = 0
var result1=document.form1.answer1.selectedIndex
var result2=document.form2.answer2.selectedIndex
var result3=document.form3.answer3.selectedIndex

We have three questions in the quiz and three variables for their pull-down menus and their forms and options. Thus, taking the second line of the script above, we identify:
-form1: the name of the form in the HTML corresponding to the first pull-down menu.
-answer1: the name of the pull-down menu of the first question in the HTML; and
-selectedIndex: a property of the pull-down menu. This property changes to the number that corresponds to the option selected from the pull-down menu (0, 1, 2, 3).
After this we have a condition by which an alert box with the message "Answer Question number_of_question" is displayed when the user leaves without answering a question and clicks on the "Send" button:

if (result1==0){
alert("Answer Question 1");
}
if (result2==0){
alert("Answer Question 2");
}
if (result3==0){
alert("Answer Question 3");
}

Since we have three questions, we have three if statements that read: "if the selected option is number 0, that is, the one that is visible on the web page--"--Choose an Option--"--, then make an alert box to pop up with the message: "Answer Question number_of_question".
Then we complete the second part of the condition by filling the else statements.

else {
if (result1==2){i++}
if (result2==1){i++}
if (result3==3){i++}

Here we are identifying the correct answer for each one of the questions of the quiz with a number after the == sign or operator; so, for question number 1, the right answer is option number 2, etc.
Then the script adds up the number of right answers and calculates the score or grade in a percentage:

document.total.score.value = i
var per = ((i / 3) * 100)
document.total.percent.value = per;

-The counting is done with i, a variable which was assigned a value of O at the very beginning of the script. The two ++ signs or operators attached to i increase by one this counting of right answers. So, now in this portion of the script we are instructing to put the total number of right answers inside a text field named score, an element of the form total.

-Then we write a variable per that helps to calculate the percentage: / is the multiplying sign or operator, * is the dividing sign or operator, and 3 is the total number of questions. You will have to change this number if you change the number of questions for your quizzes.

-After this, the script passes that number (per) or score to the other text field of the web page, the one named percent.
The last part of the script consists of the statements that write a checkmark into the checkboxes to the left of each question. If the answer is wrong, the checkbox gets checked off; if it is right, the checkmark does not appear or gets erased, depending on whether or not the user to retry the question. Let's see the condition for the first answer:

if (result1 != 2) document.form1.check1.checked = "yes";
else document.form1.check1.checked = false;
...
...
}
}

-The first line of this code reads like this: the checkbox named check1 of the form named form1 will be checked (checked == "yes") if the answer to the first question (result1) is not (!=) the second choice (2), that is, if the answer is incorrect.

-In the second line we have: If this condition is not met (else)--that is, if the answer is correct--, then the checkbox mark will be erased (checked == false).
-You will now add as many statements as questions there are in your quiz, changing the names of the forms and their elements (checkboxes) accordingly.
Now you can close your script with the customary lines:

// -->
</SCRIPT>
</HEAD>