Technology Lesson

An expression is something that computes or evaluates into a single value. In a very simple form, a reference to a variable is already an expression. For example:

var quantity:Number = 5;
trace(quantity);

Here, the variable quantity evaluates to a value of 5.

An expression can also be made up of multiple values that are manipulated in some kind of operation. For example:

trace(10 + 5);

Here, we have two values: 10 and 5. The values in this expression are referred to as operands. These operands are going to be added together, as signified by the plus symbol. The plus symbol is referred to as the operator in this expression. Operators are special characters that are used to perform operations between values or operands. And once the operation in this example is complete, the expression evaluates to a value of 15.

Lets take a look at some of the operators you can use in ActionScript 3.

Arithmetic Operators

• Plus (+)
• Minus (-)
• Multiply (*)
• Divide (/)
• Modulo (%)

Examples:

trace(10 + 5);
trace(5 - 3);
trace(2 * 2);
trace(8 / 4);

The plus, minus, multiply, and divide operators are pretty self-explanatory. As for the Modulo operator, this will return the remainder from a division operation.

Example:

trace(7 % 2);

7 divided by 2 is equal to 3 remainder 1. A modulo operation will return the remainder, so 7 % 2 will return 1.

When performing an arithmetic operation on expressions that have more than two different operators, use parentheses to group the operands and operators that you would like to compute for first.

Example:

var nCompute:Number = (4 + 20) / (3 * 2);
trace(nCompute);

In this example, the operations within the parentheses will be computed first, and then the results will be divided.

Without the parentheses, the division and multiplication operations will be calculated first, followed by the addition operation, resulting in a different value.

So the following expression, which doesnt make use of parentheses, will actually have a different outcome even though it uses the same values:

var nCompute2:Number = 4 + 20 / 3 * 2;
trace(nCompute2);

Assignment Operators

• Assignment (=)
• Addition Assignment (+=)
• Subtraction Assignment (-=)
• Multiplication Assignment (*=)
• Division Assignment (/=)

Lets take a look at the Assignment operator first. The Assignment operator is represented by the equals sign (=). It can be used to assign a value to an operand.

Example:

var nScore:Number = 10;

In this example, the Assignment operator is used to assign a value of 10 to the nScore variable. The operand to the right of the equals sign is assigned to the operand to the left of the equals sign.

The other assignment operators (Addition Assignment, Subtraction Assignment, Multiplication Assignment, and Division Assignment) allow you to write shorthand versions of arithmetic and assignment operations combined.

Example:

var nScore:Number = 10;
trace(nScore += 5); 
// Outputs a value of 15

In this example, nScore += 5 is just the shorthand version of writing nScore = nScore + 5. This means that you are adding 5 to whatever the current value of nScore is.

Comparison Operators

• Equality (==)
• Inequality (!=)
• Greater than (>)
• Less than (<)
• Greater than or equal (>=)
• Less than or equal (<=)

Comparison operators are used to compare values. An expressions that uses comparison operators will evaluate to either true or false.

Examples:

trace(4 == 4);  
// This expression tests if 4 is equal to 4. 
// This evaluates to true since 4 really is equal to 4.  

trace(6 != 6);  
// This expression tests if 6 is NOT equal to 6. 
// This evaluates to false since the two operands  
// have the same value and are therefore equal.  

trace(10 > 7); 
// This expression tests if 10 is greater than 7.
// Since 10 really is greater than 7,
// then this expression evaluates to true.

Logical Operators

• And (&&)
• Or (||)

The And and Or logical operators allow you to combine two or more sets of comparison expressions.

If you use the And operator, the comparison expressions you are combining ALL have to be true in order for the entire expression to return a value of true.

Examples:

trace(4 == 4 && 5 == 5);
// This evaluates to true since both comparison expressions are true. 
// 4 is equal to 4 AND 5 is equal to 5.

trace(4 == 4 && 5 == 6);
// This evaluates to false. Even if 4 is equal to 4,
// the second comparison expression is false;
// So the whole thing becomes false.

If you use the Or operator, only one of the expressions needs to be true in order to return a value of true.

Example:

trace(4 == 4 || 5 == 6);
// This still evaluates to true. 
// Even if the second comparison expression is false,
// the first one is still true, so the whole expression
// evaluates to true.

The Not Operator

• Not (!)

The Not operator expresses the opposite of a Boolean.

Example:

var compare:Boolean = 10 < 5;
// This evaluates to false since 10 is, in fact,
// not less than 5.

trace(!compare);
// This will output true.

The value of compare is false. In the trace statement however, the variable is being negated by the Not operator, so the trace statement is actually going to output the opposite of false, which is true.

The Concatenation Operator

The Concatenation operator, which also uses the plus (+) sign, allows you to concatenate or combine String values.

Example:

var sFName:String = "John";
var sLName:String = "Doe";
trace(sFName + " " + sLName);
// This outputs John Doe

In this example, the Concatenation operator combines the String values together. In between sFName and sLName are two quotation marks with nothing but a single empty space inside. This is an empty string that just adds a space in between the other two String values.

The Increment and Decrement Operators

• Increment (++)
• Decrement (--)

The Increment operator increments a numeric value by one (plus 1). The Decrement operator decrements a numeric value by one (minus 1).

Example:

var nScore:Number = 10;
nScore++;
trace(nScore); 
// Outputs 11 (10 + 1)

In this example, nScore++ is the same as writing nScore = nScore + 1 or nScore += 1.

NOTE: If you try to trace nScore++ immediately like so:
This will still output a value of 10. When using the increment and decrement operators, the variable will be traced first, so the original value will come out. Only after that will it be incremented or decremented. To avoid that, you can put the operator before the variable like so:
trace(++nScore);

And that concludes this lesson on expressions and operators in ActionScript 3.

Exercise File
Start_Quiz_App.fla

In this tutorial, we are going to learn how to create a quiz in Flash using ActionScript 3. Were going to make use of arrays and for loops in order to complete this project.

This tutorial comes with an exercise file (the download link can be found at the top of the article). Lets go ahead and open it and take a look at its contents. This Flash movie has 2 frames. The first frame contains the elements needed for the user to take the quiz. The second frame contains elements that will display the results (answers and scores). The Flash movie should start at frame 1, and stay there until the user finishes answering all the questions. Once the user is done, the Flash movie goes to frame 2 where the answers are checked and the score is given. Since the quiz and the results are separated into two different frames, then the code will be separated as well. Frame 1 will contain the code that is needed to run the quiz (displaying questions and storing the answers submitted by the user), while frame 2 will contain the code that is needed to check the answers, compute the results and display them.

So first, lets go ahead and work on frame 1. Frame 1 contains 3 objects:

1. questions_txt - This is a Dynamic TextField that will be used to display the questions. In the Properties Inspector, this TextField has been set to be multilined.
2. answers_txt - This is an Input TextField where the user will type in the answer. In the Properties Inspector, this TextField has been set to have a border and to be a single line TextField.
3. submit_btn - This button will be used by the user to submit each answer.

The first thing well do is to stop the Flash movie on frame 1. If we dont, then the movie will just continue looping between frames 1 and 2. So select frame 1 of the actions layer, then go to the Actions Panel and put in a stop action.

stop();

Next, lets create a couple of objects:

stop();

var nQNumber:Number = 0;
var aQuestions:Array = new Array();
var aCorrectAnswers:Array = new Array("Jupiter", "Mars", "war", "Titan");
var aUserAnswers:Array = new Array();

What are these instances for?
nQNumber
We will be storing the quiz questions in an array. Each question will therefore be numbered starting at 0. This nQNumber variable will be used to move through each of those quiz questions. After the user answers one question, we will have this number increase by one and use that number to retrieve the next question.

aQuestions
This is the array that will be used to store the questions.

aCorrectAnswers
This is the array that stores all the correct answers. Of course we will have to be the ones to provide what the correct answers are, which is why this array is already populated with values. When the array was created, the values were also declared in the array constructor, therefore populating the array. The first value will have an index of 0, the second value will have an index of 1, and so on... You will notice that the aQuestions array, which is supposed to store the questions, has not been given any values yet. Dont worry, well provide those values shortly using array access notation instead.

aUserAnswers
This array will be used to store the answers given by the user. Each time the user (the quiz taker) submits an answer, then that answer will go into this array. So we just create this array first, but we dont put any values in it initially. Well have to wait for what the user will input in the answer field and use those to populate this array instead.

Next, lets go ahead and create the questions. Weve provided 4 answers when the aCorrectAnswers array was created, so well need to provide 4 questions as well. Make sure that the order of the questions corresponds to the order of the answers as well (question index 0 should match answer index 0, question index 1 should match answer index 1, and so on...). We will populate the aQuestions array using Array Access Notation:

var nQNumber:Number = 0;
var aQuestions:Array = new Array();
var aCorrectAnswers:Array = new Array("Jupiter", "Mars", "war", "Titan");
var aUserAnswers:Array = new Array();

aQuestions[0] = "What is the biggest planet in our solar system?";
aQuestions[1] = "Which planet in our solar system is the 4th planet from the sun?";
aQuestions[2] = "Mars is named after the Roman god of ___.";
aQuestions[3] = "What is the name of Saturns largest moon?";

So now that weve created all the needed objects and have added all the questions and answers for this first part of our project, lets now go ahead and create the actual quiz functionality.

The first thing well do is display the first question in the questions_txt TextField. So what we can do is get aQuestions[0] (the 0 index corresponds to the first item in the array, and therefore the first question) and assign it to the text property of our TextField like so: questions_txt.text = aQuestions[0] . But the problem here is that wed like to be able to update to the next question after the user finishes answering the first one. So instead of manually inputting the index number, we can make use of a variable instead. And then we can just update that variable whenever needed. This is where our nQNumber variable comes in. Initially, it has a value of 0, so typing in questions_txt.text = aQuestions[nQNumber] will be the the same as typing in questions_txt.text = aQuestions[0] . And then later on, well add some code that will increment the value of nQNumber every time the user submits an answer, thereby updating to the next question. But first, update your code so that the first question will be displayed in the questions_txt TextField:

aQuestions[0] = "What is the biggest planet in our solar system?";
aQuestions[1] = "Which planet in our solar system is the 4th planet from the sun?";
aQuestions[2] = "Mars is named after the Roman god of ___.";
aQuestions[3] = "What is the name of Saturns largest moon?";

questions_txt.text = aQuestions[nQNumber];

So now, if you test the movie, you should see the first question displayed in the TextField.

And now that we have that, the next thing we need to fix is how our Flash movie is going to respond whenever a quiz taker types an answer in the input field and clicks on the submit button. So lets break it down. When the user clicks on the submit button, our flash movie should:

1. get the users answer (what he or she inputs in the answer field) and add it to the aUserAnswers array
2. update to the next question

Since we want all this to happen whenever the user clicks on the button, well have to create a CLICK event handler for submit_btn. And lets give the event listener function the name quiz.

questions_txt.text = aQuestions[nQNumber];

submit_btn.addEventListener(MouseEvent.CLICK, quiz);

function quiz(e:MouseEvent):void 
{
     // This function will be responsible for:
     // 1. pushing the users answers to the aCorrectAnswers array
     // 2. updating to the next question
}

Lets first work on how to get the users answer and add it to the aUserAnswers array. To do that, well use the push() method of the array class. Well get the contents of the answers_txt TextField using the text property, and then well pass that to the push() method like so: aUserAnswers.push(answers_txt.text) . So whatever text is inside the answers_txt TextField at the time the submit button is clicked will be added to the aUserAnswers array (the first value that is pushed to the array gets an index of 0, the next one after that will get an index of 1, and so on...). Then after each answer is pushed to the array, make the input TextField blank again, clearing it for the next question. So heres how the updated event listener function will look like:

function quiz(e:MouseEvent):void 
{
     aUserAnswers.push(answers_txt.text);
     answers_txt.text = ""; // This line puts an empty string, making the TextField appear empty again
}

So after the user submits the answer, the next question should then be displayed. To display the next question, well need to retrieve it from the aQuestions array and assign it to the questions_txt TextField. Recall that we used questions_txt.text = aQuestions[nQNumber] (where nQNumber is initially equal to 0) in order to display the first question. The next question that follows has an index of 1. So in order to retrieve that next question, we will need to increment the value of nQNumber by 1 so that it goes from 0 to 1. Once it is incremented, well then assign aQuestions[nQNumber] to the questions_txt TextField once again. And then the next time the user clicks on the submit button, then nQNumber gets incremented by one again, allowing us to retrieve the item with the next index, and so on... Heres the updated event listener function:

function quiz(e:MouseEvent):void 
{
     aUserAnswers.push(answers_txt.text);
     answers_txt.text = "";
     nQNumber++;
     questions_txt.text = aQuestions[nQNumber];
}

But wait! We arent done yet. There are still some fixes that we need to put in this function. Recall that we have a limited number of questions. In this example, we only have 4. A problem will arise when the user clicks on the submit button for the fourth time.

Why will there be a problem? There are 4 questions, so naturally, the user will end up clicking the submit button for a total of 4 times.
Yes that is true. But the 4th time the user clicks on the button, nQNumber will be increased to 4. And recall that our array index numbers start at 0, not at 1. So the last question is actually at aQuestions[3]. And aQuestions[4] is actually for a fifth question. But there is no fifth question, and trying to retrieve one from the array will cause an error.

So what do we do then?
Well need to put an if statement that will tell our Flash movie to no longer try to retrieve any more questions, once we get to the last one.

So lets do that now. We need to get the line questions_txt.text = aQuestions[nQNumber]; and place it in an if statement. The if statement needs to check if nQNumber is less than 4. If nQNumber is still less than 4, then go ahead and retrieve the next question. If it is no longer less than 4, then we dont want our code to retrieve any more questions. So we can type in if(nQNumber < 4) as our condition. But... thats actually not what well do. Instead of typing in 4, well use aQuestions.length instead. The length property of the array class tells us how many items there are in the array. So if an array has 5 items, then the array length will be 5. If it has 6 items, then the length will be 6. In this particular example, our array has 4 items, and therefore has an array length of 4.

Why cant I just type in 4? Is there a benefit to using the length property instead?
Well, no one is stopping you from hard-coding in a value of 4, but the great thing about making use of the length property instead is that if you decide to add more questions (or maybe remove some questions), then you wont have to go back to the if statement and hard-code in a new value. The length property will automatically update itself once you add or reduce items in the array. This will be especially useful if you had numerous items in your code that need to reference how long your array is. Imagine if you hard-coded the data numerous times in different parts of your code. Then every time you decide to add or subtract items to the array, then youll have to go back to all those hard-coded parts of your code, and manually change the value. That would not be very efficient.

So our updated event listener function will now look like this:

function quiz(e:MouseEvent):void 
{
     aUserAnswers.push(answers_txt.text);
     answers_txt.text = "";
     nQNumber++;
     if(nQNumber < aQuestions.length) 
     {
          questions_txt.text = aQuestions[nQNumber];
     }
}

Great! So once the user gets through all the questions, what do we do next?
We then tell the Flash movie to go to the next frame where the user will get the quiz results. To do that, we just add an else clause to our if statement that will instruct our Flash movie to go the the next frame. We will use the nextFrame() method of the MovieClip class to move the playhead to the next frame. So basically, what were telling our Flash movie is that if nQNumber is no longer less than aQuestions.length, then it means that we dont have anymore questions and the quiz is done, and it can now move to frame 2 where the results will be displayed. So finally, our updated event listener function will look like this:

function quiz(e:MouseEvent):void 
{
     aUserAnswers.push(answers_txt.text);
     answers_txt.text = "";
     nQNumber++;
     if(nQNumber < aQuestions.length) 
     {
          questions_txt.text = aQuestions[nQNumber];
     }
     else 
     {
          nextFrame();
     }
}

In the next part of this tutorial, we will work on the code that will display the answers that the user submitted alongside the correct answers. We will also work on the code that will check the answers and calculate and display the users score.

Heres the frame 1 code in full:

stop();

var nQNumber:Number = 0;
var aQuestions:Array = new Array();
var aCorrectAnswers:Array = new Array("Jupiter", "Mars", "war", "Titan");
var aUserAnswers:Array = new Array();

aQuestions[0] = "What is the biggest planet in our solar system?";
aQuestions[1] = "Which planet in our solar system is the 4th planet from the sun?";
aQuestions[2] = "Mars is named after the Roman god of ___.";
aQuestions[3] = "What is the name of Saturns largest moon?";

questions_txt.text = aQuestions[nQNumber];

submit_btn.addEventListener(MouseEvent.CLICK, quiz);

function quiz(e:MouseEvent):void 
{
     aUserAnswers.push(answers_txt.text);
     answers_txt.text = "";
     nQNumber++;
     if(nQNumber < aQuestions.length) 
     {
          questions_txt.text = aQuestions[nQNumber];
     } 
     else 
     {
          nextFrame();
     }
}

NEXT: How to Create a Quiz in Flash - ActionScript 3 Tutorial - PART 2