How to Create a Quiz in Flash - ActionScript 3 Tutorial - PART 1

Exercise File
Start_Quiz_App.fla

In this tutorial, we are going to learn how to create a quiz in Flash using ActionScript 3. We're 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). Let's 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, let's 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 we'll do is to stop the Flash movie on frame 1. If we don't, 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, let's 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. Don't worry, we'll 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 don't put any values in it initially. We'll have to wait for what the user will input in the answer field and use those to populate this array instead.

Next, let's go ahead and create the questions. We've provided 4 answers when the aCorrectAnswers array was created, so we'll 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 Saturn's largest moon?";

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

The first thing we'll 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 we'd 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, we'll 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 Saturn's 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 let's break it down. When the user clicks on the submit button, our flash movie should:

1. get the user's 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, we'll have to create a CLICK event handler for submit_btn. And let's 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 user's answers to the aCorrectAnswers array
     // 2. updating to the next question
}

Let's first work on how to get the user's answer and add it to the aUserAnswers array. To do that, we'll use the push() method of the array class. We'll get the contents of the answers_txt TextField using the text property, and then we'll 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 here's 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, we'll 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, we'll 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... Here's 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 aren't 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?
We'll 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 let's 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 don't want our code to retrieve any more questions. So we can type in if(nQNumber < 4) as our condition. But... that's actually not what we'll do. Instead of typing in 4, we'll 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 can't 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 won't 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 you'll 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 we're telling our Flash movie is that if nQNumber is no longer less than aQuestions.length, then it means that we don't 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 user's score.

Here's 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 Saturn's 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