The JavaScript Goodies Book

By Joe Burns

and Andree Growney A Quiz Script
From Chapter Eight: Arrays

The Concept

     This is a quiz. There are five form element drop-down boxes with three answers each. The user will choose the answers they feel are correct and click the button to see their score. The beauty of this script is that it uses two arrays to get the final score. The first array consists of the correct answers. The second array consists of the answers given by the user. One by one, the answers are checked against each other. If the answer is correct, one is added. If not, the score remains the same. The results of the script are then displayed in an alert box.


The Script

Click To See It


The Script's Effect

#1: What is 2 + 2?

#2: Trees have:

#3: This book is about:

#4: Who sang "Yesterday?"

#5 What color is blue?


Deconstructing The Script

     Okay, this is a long script and it looks scary, but don't be put off. It's a lot of the same elements again and again and again. There are form elements in this script so we will start at the bottom.

The Form Elements

     Rather than display all five drop-down boxes, let's only look at the first one. The other four work exactly the same way. Hopefully, you can get the answer to this one.

<FORM NAME="quiz">

<b>#1: What is 2 + 2?</b>
<SELECT NAME="q1">
<OPTION SELECTED>Choose One
<OPTION>4
<OPTION>2
<OPTION>22
</SELECT>

     The name of the entire form is "quiz". Remember that the entire form will contain all five drop-down menu boxes. You are only seeing the first one here. Look back at the full script if you need to. The name of the first drop-down menu box is "q1". We decided on that because it represented question one. That makes sense. The next four drop-down menu boxes all are set up the same, except they are names "q2" through "q5," respectively.

Remember!

     JavaScript counts everything and it starts counting at zero. In each of these drop-down menu boxes, each selection is assigned a number by the JavaScript. The first is zero and it counts up from there. Notice the first select choice, the one that will receive the number zero, is not a viable answer. It simply displays "Choose One" so that the user knows to click to choose an answer.

     Finally, there is a form button after the five drop-down menu boxes.

<INPUT TYPE="button" VALUE="Grade Me" onClick="Gradeit()">

That button will trigger a function named "Gradeit()".

Still with us? Good.

The Script

The script is a little long, but there's nothing new in it and its inner workings are pretty straightforward.

function Gradeit()
{

     The script begins by being surrounded by the function "Gradeit()". This is the function that the HTML form button will trigger when the user clicks.

function getselectedIndex(){
return document.quiz.q1.selectedIndex
return document.quiz.q2.selectedIndex
return document.quiz.q3.selectedIndex
return document.quiz.q4.selectedIndex
return document.quiz.q5.selectedIndex

}


     This function is making a point of bringing up the answers the user chose so that the data can be manipulated in this script. Notice the "q1" through "q5" names in the hierarchy statements. Notice how I am not asking for the value the user entered because the input devise is not a text box. It's a drop-down menu box and the command you use to return that value is selectedIndex.

var Answers=new Array(1,2,2,3,1)

     These are the answers. The array was created as a key. The answers that are taken from the drop-down menu boxes will be tested against these numbers. If the numbers returned from the menu boxes are the same, the user gets 5/5. If not, the user gets a lower score.

var UserAnswers = new Array(document.quiz.q1.selectedIndex,
document.quiz.q2.selectedIndex,
document.quiz.q3.selectedIndex,
document.quiz.q4.selectedIndex,
document.quiz.q5.selectedIndex)


     Here are the results of the quiz as given by the user. Yes, the format is a little long setting it up in the single line array format, but the answers are in the single line format, so we felt this should be, too. We could have also made this line shorter by assigning variable names to the long hierarchy statements. However, we're only writing the statement once, so assigning variable names would be a step that just isn't required.

Grade the Test

     Grading is achieved by comparing the "Answers" array and the "UserAnswers" array, one array item at a time. The zero items in both arrays will be compared. If they match, add one. If not, do nothing and go on to the next one. Each time you grade another answer, you have to change out the variable name. It gets a little confusing, but follow it along.

var count0 = 0

     First a variable "count0" is created and assigned a zero value. You have to do this in case the user doesn't get any of the answers right. Without setting the count to zero to start with, the JavaScript would throw an error if the result was 0/5. Now we move to the grading itself. Let's look at only the first two questions being graded:

if (Answers[0] == UserAnswers[0])
{count0 = count0 + 1}
else
{count0 = count0}

if (Answers[1] == UserAnswers[1])
{count1 = count0 + 1}
else
{count1 = count0}


     The first "if" statement compares the two numbers in the zero position in the Answers and UserAnswers arrays. If they are the same, "count0" gets one added. If not, "count0" keeps the same value, zero. The next two numbers in both arrays, the numbers in the one position, are now compared. If they are the same, "count1", a new variable, equals "count0" plus one. If not, "count1" equals "count0", or still zero.

     The process continues this way, creating a new variable name to coincide with each new question's grade. It looks like this. Follow the new variable names along.

if (Answers[2] == UserAnswers[2])
{count2 = count1 + 1}
else
{count2 = count1}

if (Answers[3] == UserAnswers[3])
{count3 = count2 + 1}
else
{count3 = count2}

if (Answers[4] == UserAnswers[4])
{count4 = count3 + 1}
else
{count4 = count3}

     When all is said and done, "count4", will have the final score out of five. An alert is set to pop up with the "count4" displayed as a grade. It looks like this:

alert("You got " + count4 + "/5 right.")

Altering the Display

     Okay, we agree that displaying the score on an alert box is a little cheesy. The point of showing you this script was to provide an example of getting a JavaScript to grade a quiz. The display is up to you. You easily have enough knowledge at this point to take the "count4" variable and post it all over the place. In fact, look back through the script.

     You can pretty easily display the user's choices right along with their score. You can even make that all pop up in a new browser window. All we provided here was a way to get the math done. Now it's up to you to make it pretty. Think about it for a moment. There have to be 50 ways to get this to display the results. Maybe in the status bar? Nah. That's not as nice as the alert box.

Back to the JavaScript Goodies Index Page


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date