Creating a ‘Fill in the blanks’ Quiz in Flash
Actionscript 3
What you will learn:
Prerequisites:
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.