Tutorial on building a

‘Fill in the blank

blanks’’ Quiz in Flash
Actionscript 3

flashbynight.com
What you will learn:

• how to build a simple fill-in-the-blanks quiz using Flash AS3

• storing data in a simple array
• adding an object to the screen from the library

Prerequisites:

• working copy of Flash version 8 or above

• working knowledge of how to use the Flash interface
• basic knowledge of AS3
• knowledge of document classes (link given below)

* You can download the completed source files

from here: http://www.flashbynight.com/tutes/blanksquiz

Step 1
We want to make a simple fill-in-the-blanks quiz using Flash AS3. The first step is to prepare the
documents that we will need. We need to create a Flash file named Quiz.fla and we need to create a
document class called Main.as, where we will hold all of our code.
*If you are unfamiliar with document classes, there is a quick guide here:
http://www.flashbynight.com/tutes/doc_class

Step 2
Let’s deal with the flash file first. We’ll just use one frame for this quiz. On the screen, we need to place:
1 A dynamic text box. This will hold our questions. Name the box question_display

2 An input text box. This will be the space where the user answers the questions. We can name this
inputbox
3 A CHECK button. This will be what the user clicks to check the answer. Name it chkbutton.

You can use mine, from the source file. If you wish to design your own, draw the button, select it, right-
click on it and select Convert to Symbol. You can use either a movieclip or a button for this.
To make it a bit more attractive, let’s draw a border around where the question will appear. Here’s
mine:

The dotted lines won’t appear in our final flash movie.

Step 3

Now let’s tend to our document class Main.as. Our ‘empty’ class should look like this:
package {
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.MouseEvent;
public class Main extends MovieClip {

public function Main() {

}
}
}

I call it an empty class because it doesn’t do anything at the moment.

Step 4

We need to store our data somewhere, don’t we? Data in this case means the questions and the
answers for our quiz. We could store it in the flash movie itself, we could store it in XML files or we could
store it in our document class.
In this case, we’ll store it in Main.as, since we’ll be dealing with only a small amount of data. If you want
to know how to store the data using XML, you could read up on this tutorial:
http://www.flashbynight.com/tutes/quiz/

We generally use the space after the line public class Main extends MovieClip { to hold our variable
definitions. Fill in the following line:
var QuestionList:Array; var AnswerList:Array;

This lets Flash know that we will be using arrays with these names. Then, after public functionMain(){
let’s add our data:
QuestionList =["A banana is a _________","A tomato is a _________","Milk comes from ________"];
AnswerList =["fruit","vegetable","cows"];
You can add whatever questions you like, but they must be in quotations and they must be separated by
commas. The answers must be in the same order.
I’ve only put three questions here, but you can have as many as you like. We will add some code so that
Flash automatically knows when the last question has been reached.

Step 5
You know what we need? We can’t just jump right into the quiz, but we need to welcome the user first.
Let’s go back to our Quiz.fla file and design a welcome message. Here is mine:

Now, I want to create a welcome screen. I am going to add a white background to the text above and
save it as a Move Clip. The size of the white background should match the size of the canvas we are
using. Mine is 800 x 600. (To modify or check this, click CTRL + J.)
So, I draw a small white box:

Select it and change the dimensions:

… and then center the welcome message. Then select the box and the text (make sure both are
selected), right click and select Convert to Symbol. Name the clip welcome and give it the Class Name
Welcome (with a capital W). Make sure the registration point is top-left or you’ll need to mess with the
alignment later on.
Then delete it from the screen. Don’t worry, it will remain in the library; that’s where we want it.

Step 6
Back to Main.as. We need to add our welcome message when the movie begins and add a listener to it
so that we know when the user clicks to begin the quiz. Here’s how we do that:
In our variable list (after the arrays), add the line:
var welcome:Welcome;

In our Main() function, add the line:

welcome=new Welcome; addChild(welcome);
What we’ve done is to declare a class called Welcome and name a child (an instance) of the class
welcome with a small w. Then we added it to the screen. Test the movie now (CTRL + ENTER).

Does it work? Great. Let’s make the welcome screen clickable with these lines:

welcome.addEventListener(MouseEvent.CLICK, begin);
function begin(EventObject:MouseEvent){NewQuestion();removeChild(welcome);}

The first line adds an event listener, which listens for a mouse click on the welcome movie clip. When it
detects this, it will run the function begin. Our function begin, in turn calls the function NewQuestion(),
which we will write next. In addition, it removes the welcome message from the screen.

Step 7
As much as possible, everything should have its own function. That’s good programming technique. Let’s
write a function to display a new question.
But first, we need a variable to track the question number. It’ll need to be a variable.
var QNum:int;
Next we need to set it to 0 in the Main() function:
QNum=0;
Now we can write our NewQuestion() function. So far, you should have this:
package {
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.text.TextField;
import flash.events.MouseEvent;

public class Main extends MovieClip {

var QuestionList:Array;var AnswerList:Array;
var welcome:Welcome;
var QNum:int;
 public function Main() {

QNum=0;
QuestionList =["A banana is a _________","A tomato is a _________","Milk
comes from ________"];
AnswerList =["fruit","vegetable","cows"];

welcome=new Welcome; addChild(welcome);

welcome.addEventListener(MouseEvent.CLICK, begin);
function
begin(EventObject:MouseEvent){NewQuestion();removeChild(welcome);}

}//main

public function NewQuestion(){

}

Step 8
Our NewQuestion() function simply needs to increase the question number and then use the question
number to get the correct data from our array.
This should do the trick:
public function NewQuestion(){
QNum++;
question_display.text=QuestionList[QNum-1];
}//newquestion
When we get the data from our array, we use QNum-1 because the array index begins from 0, but we
are counting the question number from 1.
Step 9
It’s coming together now. What we need next is a way to check the answer. So we need to attach an
event listener to our CHECK button. Let’s start by putting this code in our Main() function:
Chkbutton.addEventListener(MouseEvent.CLICK, Mycheck);

Somewhere outside the Main() function, such as after our NewQuestion() function, we can set up the
framework for our Mycheck() function:
function Mycheck(EventObject:MouseEvent){
}//Mycheck

Now let’s flesh this out. We want this function to check whether the text in the input box is correct, and
then display feedback. We’ll design an image of a tick and a cross for feedback in a moment. Finally, we
wish to have a way for the user to move onto the next question. So we need to also design a NEXT
button.
It’s useful to sometimes write pseudocode, which we can then replace later with actual code. Let’s do it:

function Mycheck(EventObject:MouseEvent){
if(inputbox.text==AnswerList[QNum-1]){display a tick}
else{display a cross}
chkbutton.visible=false;
Display the NEXT button
}//Mycheck

We have used psuedocode for ‘display a tick’, ‘display a cross’ and ‘Display the next button’ because we
haven’t designed these elements yet. But at least we have the structure in place.
Step 10
We need more stuff. You can use mine or design your own, but here are mine:
I gave the NEXT button the instance name ‘nxtbutton’. Then I created a new movie clip (CTRL + F8), with
three frames. The first frame is empty, the next frame contains the ‘correct’ graphic, and the third frame
contains the ‘wrong’ graphic. You must add the actionscript code stop(); to each frame (this is the only
code not in the document class) to keep it playing through by itself, and the graphics must be aligned
with each other:
Name the move clip instance ‘feedback’ and align in with the other buttons:

Yes, it is invisible, but you can select it by clicking on the circle. We want it to remain invisible until it’s
time to give the feedback. Now that our graphics are done, we can replace our pseudocode:

function Mycheck(EventObject:MouseEvent){
if(inputbox.text==AnswerList[QNum-1]){feedback.gotoAndStop(2);}
else{feedback.gotoAndStop(3);}
chkbutton.visible=false;
nxtbutton.visible=true;
}//Mycheck
Now the CHECK button gives feedback properly. The NEXT button doesn’t work yet, but we’ll fix that in
just a second. Also, why have we made the NEXT button visible when it was never invisible? We’ll look at
all of that right now.
What we want is for the CHECK button to be visible when the user is prompted to key in the answer, but
invisible when the feedback is displayed. On the other hand, we want the NEXT button only to be visible
when the feedback is displayed. To achieve this, in the NewQuestion() function, we need these lines:
chkbutton.visible=true;
nxtbutton.visible=false;

Step 11
Now we need to add functionality to the NEXT button. We’ll add a listener in the Main() function:
nxtbutton.addEventListener(MouseEvent.CLICK, nxt);

…and we’ll write a function for this listener:

function nxt(EventObject:MouseEvent){
inputbox.text="";
feedback.gotoAndStop(1);
NewQuestion();}

This function clears the input text box, clears the feedback and goes onto the next question. Test out
what we have so far (CTRL + ENTER). You should see that everything is working until we get to the last
question and click CHECK. Then we get an error message because we have run out of questions – our
program is looking for data from our array that doesn’t exist. Let’s fix that now.

Step 12
We can finish the same way we started; with a message screen. I’m going to use the slightly flippant
message:

…and I’m going to repeat what I did in Step 5, except I’ll name my Movie Clip ‘Goodbye’ (note the capital
G).
Now, I’ll need this line where I declare my variables:
var goodbye:Goodbye;
And we need to change the function we did in Step 11. We want it to detect when there are no
questions left and instead of moving on to the next question, displaying the goodbye message. This
should do the trick:

function nxt(EventObject:MouseEvent){
inputbox.text="";
feedback.gotoAndStop(1);
if(QNum==QuestionList.length){goodbye=new Goodbye; addChild(goodbye); }
else{NewQuestion();}
}//nxt

Like the message said, we’re all done here. Please do whatever you like with the code. Obviously these
are the basicsl we’ve left out the bells and whistles. You could add a scoring system for instance; most of
the mechanics are already in place. Here is the code in full:

package {
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.text.TextField;
import flash.events.MouseEvent;

public class Main extends MovieClip {

var QuestionList:Array;var AnswerList:Array;
var welcome:Welcome;
var goodbye:Goodbye;
var QNum:int;

public function Main() {

QNum=0;
 QuestionList =["A banana is a _________","A tomato is a _________","Milk
comes from ________"];
AnswerList =["fruit","vegetable","cows"];

welcome=new Welcome; addChild(welcome);

welcome.addEventListener(MouseEvent.CLICK, begin);
function
begin(EventObject:MouseEvent){NewQuestion();removeChild(welcome);}

chkbutton.addEventListener(MouseEvent.CLICK, Mycheck);
nxtbutton.addEventListener(MouseEvent.CLICK, nxt);

}//main

public function NewQuestion(){

chkbutton.visible=true;
nxtbutton.visible=false;
QNum++;
question_display.text=QuestionList[QNum-1];
}//newquestion

function Mycheck(EventObject:MouseEvent){
if(inputbox.text==AnswerList[QNum-1]){feedback.gotoAndStop(2);}
else{feedback.gotoAndStop(3);}
chkbutton.visible=false;
nxtbutton.visible=true;
}//Mycheck

function nxt(EventObject:MouseEvent){
inputbox.text="";
feedback.gotoAndStop(1);
 if(QNum==QuestionList.length){goodbye=new Goodbye;
addChild(goodbye);}else{NewQuestion();}
}//nxt

If you enjoyed this tute, there are plenty more at flashbynight.com/tutes , all with source code. Help
yourself. There are plenty of finely crafted games (I hope) at flashbynight.com; please try them out and
please give flashbynight some linkloving if you have a blog, or an account with Facebook, Twitter, Digg
or Stumbleupon.