1.3.1. Quiz Overview

Figure 1-4. A Flash quiz

1.3.2. Building the Layer Structure

Start building your quiz by creating and naming the following layers and arranging them in the order that they appear here:

scripts

labels

quiz end

question 2

question 1

housing

Figure 1-5. Quiz timeline initial setup

1.3.3. Creating the Interface and Questions

Here are the steps you should follow:

Figure 1-6. Quiz title and Question 1

Figure 1-7. Quiz timeline with two questions

1.3.4. Initializing the Quiz

// This is a comment

Notice that comments can be placed on the same line as your code, like this:

x = 5; // This is also a comment

WARNING

Observe, again, the use of the comment before the stop( ) function call. That comment explains the intended effect of the code that follows. Comments are optional, but they help clarify our code if we leave it for a while and need a refresher when we return or if we pass our code to another developer. Comments also make code easy to scan, which is important during debugging.

Now that you know what our init code does, let's add it to our quiz movie:

Variable Naming Styles By now you've seen quite a few variable names, and you may be wondering about the capitalization. If you've never programmed before, a capital letter in the middle of a word, as in firstName, or totalCorrect, may seem odd. Capitalizing the second word (and any following words) of a variable name visually demarcates the words within that name. We use this technique because spaces and dashes aren't allowed in a variable name. But don't capitalize the first letter of a variable name -- an initial capital letter is conventionally used to name object classes, not variables. If you use underscores instead of capital letters to separate words in variables, as in first_name and total_correct, be consistent. Don't use firstName for some variables and second_name for others. Use one of these styles so that other programmers will find your code understandable. Variable names in some languages are case-sensitive, meaning that firstName and firstname would be considered two different variables. ActionScript, however, treats them as the same thing. But it's bad form to use two different cases to refer to the same variable; if you call a variable xPOS, don't refer to it elsewhere as xpos. Always give your variables and functions meaningful names that help you remember what they are for. Avoid useless names like "foo," and use single-letter variables, such as "x" or "i" only for simple things like the index (i.e., counting variable) in a loop.

1.3.5. Adding Frame Labels

gotoAndStop(10);

The flexibility of frame labels is indispensable. I hardly ever use frame numbers with playback-control functions like gotoAndStop( ). Let's add all the labels we'll need for our quiz now, so that we can use them later to walk the user through the quiz questions:

1. On the labels layer, click frame 1.

2. Select Modify Frame. The Frame panel appears.

3. In the Label text field, type init.

4. At frame 10 of the labels layer, add a blank keyframe.

5. In the Frame panel, in the Label text field, type q2.

6. At frame 20 of the labels layer, add a blank keyframe.

7. In the Frame panel, in the Label text field, type quizEnd.

1.3.6. Scripting the Answer Buttons

Figure 1-8. The answer buttons

The button code consists of two statements (lines 2 and 3) that are executed only when a mouseclick is detected. In natural language, the code for each button says, "When the user clicks this button, make a note that he chose answer 1, 2, or 3, then proceed to Question 2." Here's how it works.

on (release) {

The event handler waits patiently for the user to click button 1. Recall that an event handler listens for things (such as mouseclicks) that happen while the movie is running. When an event occurs, the code contained in the appropriate handler is executed.

Let's dissect the event handler that begins on line 1. The keyword on signals the start of the event handler. (If the word on seems a little awkward to you, think of it as when until you're comfortable with it.) The keyword release, enclosed in parentheses, indicates the type of event that the event handler is listening for; in this case, we're listening for a release event, which occurs when the user clicks and releases the mouse over the button. The opening curly brace ({) marks the beginning of the block of statements that should be executed when the release event occurs. The end of the code block is marked by a closing curly brace (}) on line 4, which is the end of the event handler.

Line 2 is the first of the statements that will be executed when the release event occurs. The code in line 2 should be getting quite familiar to you:

q1answer = 1;

It sets the variable q1answer to 1 (the other answer buttons set it to 2 or 3). The q1answer variable stores the user's answer for the first question. Once we have recorded the user's answer for Question 1, we advance to Question 2 via line 3 of our button code:

gotoAndStop ("q2");

Line 3 calls the gotoAndStop( ) function, passing it the frame label "q2" as an argument, which advances the playhead to the frame q2 where Question 2 appears.

Now that you know how the button code works, let's add it to the Question 1 buttons:

We use the variable q2answer instead of q1answer because we want the buttons to keep track of the user's selection for Question 2. We use "quizEnd" as the argument for our gotoAndStop( ) function call to advance the playhead to the end of the quiz (i.e., the frame labeled quizEnd) after the user answers Question 2.

Let's add the button code for the Question 2 buttons:

1.3.7. Building the Quiz End

Our quiz is nearly complete. We now have two questions working with an answer-tracking script that lets the user answer the questions and progress through the quiz. We still need a quiz-ending screen where we tell the user how well he fared.

To build our quiz-end screen, we need to do some basic Flash production and some scripting. Let's do the production first:

Figure 1-9. Judgment day

In the calculation script, we first determine the user's score, and then we display that score on the screen:

// Tally up the user's correct answers
if (q1answer == 3){
  totalCorrect = totalCorrect + 1;
}
if (q2answer == 2){
  totalCorrect++;
}
// Show the user's score in an on-screen text field
displayTotal = totalCorrect;

if (q1answer == 3){

But how exactly does the condition q1answer == 3 work? Well, let's break the phrase down. We recognize q1answer as the variable in which we've stored the user's answer to Question 1. The number 3 indicates the correct answer to Question 1, because movie clips first appeared in Flash 3. The double equal sign (==) between our variable and the number 3 is the equality comparison operator, which compares two expressions. If the expression on its left (q1answer) equals the one on its right (3), our condition is met, and the statements within the curly braces are executed. If not, our condition is not met, and the statements within the curly braces are skipped.

Flash has no way of knowing the right answers to our quiz questions. Checking if q1answer is equal to 3 is our way of telling Flash to check if the user got Question 1 right. If he did, we tell Flash to add one to his total score as follows:

totalCorrect = totalCorrect + 1;

Line 3 says, "Make the new value of totalCorrect equal to the old value of totalCorrect plus one," (i.e., increment totalCorrect). Incrementing a variable is so common that it has its own special operator, ++.

So instead of using this code:

totalCorrect = totalCorrect + 1;

We normally write:

totalCorrect++;

which does exactly the same thing, but more succinctly.

At line 4, we end the block of statements to execute if our first condition is met:

}

Lines 5 through 7 are another condition:

if (q2answer == 2){
  totalCorrect++;
}

Here we're checking whether the user answered Question 2 correctly (MP3 audio support first appeared in Flash 4). If the user chose the second answer, we add one to totalCorrect using the increment operator ++.

Because there are only two questions in our quiz, we're done tallying the user's score. For each question that the user answered correctly, we added one to totalCorrect, so totalCorrect now contains the user's final score. The only thing left is to show the user his score, via line 9, the last line of our quiz-end script:

displayTotal = totalCorrect;

1. Select the Text tool.

2. On the quiz end layer, click frame 20.

3. Place your pointer just before the text "/2" that you created earlier, then click the Stage.

4. Drag out a text box big enough to hold a single number.

5. Choose Text Options.

6. In the Text Options panel, change Static Text to Dynamic Text.

7. In the Variable text field, type displayTotal.

The variable displayTotal now has a screen representation. If we change displayTotal in our script, the corresponding text field variable will be updated on the screen.

1.3.8. Testing Our Quiz

Well, that's it. Our quiz is finished. You can now check whether the quiz works using Control Test Movie. Click on the answers in different combinations to see if your quiz is keeping score correctly. You can even create a restart button by attaching the following code to a new button:

on (release) {
  gotoAndStop("init");
}

Because totalCorrect is set to in the code on the init frame, the score will reset itself each time you send the playhead to init.