Create a Quiz Application Using AS3 Classes
The QuizApp Class (the Document Class) Part One
package {
import flash.display.Sprite;
public class QuizApp extends Sprite {
public function QuizApp() {
trace("this is the document class");
}
}
}
The first order of business will be to create an array, and this array will be an array of--guess what? QuizQuestion instances! Yep! You may not have realized it yet, but an array can hold any type of data. Right here I should clarify something. We often talk about storing data in arrays, or we might say we stored an object or a variable in an array. Actually the array doesn't physically contain the data, but rather references to the data. An array is just a handy way to group things, like a list. An analogy might be putting my house and your house in an array. The array wouldn't be a huge container that enveloped our houses. The array would be more like a list that simply had my address and your address on it.
Our array of QuizQuestion instances is going to be known as "quizQuestions." We will declare it in the variables list, and then instantiate it in the constructor (replacing the trace statement that was previously there):
package {
import flash.display.Sprite;
public class QuizApp extends Sprite {
private var quizQuestions:Array;
public function QuizApp() {
quizQuestions = new Array();
}
}
}
This class file will rely heavily on a kind of division of labor. The tasks that need to be carried out will be listed in the constructor as various function calls. We know that we need to instantiate a group of QuizQuestions, and store them in our array. This task we will call "createQuestions." We know that we need to create buttons (like "Previous" and "Next" buttons, and maybe something like "Finish"?) for navigation. This task we will call "createButtons." It's maybe still a little bit vague at this point, but we know that flash is event driven, so the final thing the constructor should do is take us to the first question. We'll call this task "firstQuestion." From there, clicking on the "next" button could take us to the second question, and so on. Like I said, it's still kind of vague conceptually, but you do know that you need a variable of some kind that will keep track of the identity or index of the current question.
So, we'll create a variable that's an integer, and call it currentIndex. This variable will keep track of the index number of whatever the current question is. We can use this index in combination with the array of QuizQuestions to move to the previous or next question.
And at this point, I'd like to introduce you to an interesting technique. It involves creating a variable. Nothing new about that, except one thing: the variable we'll create will be of the QuizQuestion type. That's right! When you create a custom class, you're also creating a custom data type at the same time. This took me a long time to understand, but I'm giving you a crash course. We can declare a variable, and datatype it to QuizQuestion! We'll call it "currentQuestion" and add it to the variable list just like any other variable:
var currentQuestion:QuizQuestion;
We will treat this variable a little differently than other variables we might make. Having declared its type, we won't set it equal to a new instance of QuizQuestion. Instead, we're going to be setting it equal to one of the QuizQuestions that are stored in the quizQuestions array, as needed. For example, writing a statement like:
currentQuestion = quizQuestions[0]
...accomplishes a lot! It basically gives us another name by which we can refer to the first element of the quizQuestions array, but there's more to it than that. "currentQuestion" becomes like a re-usable container (or if you prefer, pointer) that we can use to refer to any of the quizQuestions in the array. However, instead of giving it a hard-coded number for an index, we'll use it like this:
currentQuestion = quizQuestions[currentIndex]
That way, the code is much more dynamic. To move to another question, it's as easy as changing the value of currentIndex, then executing the above line. The questions in the array can thus take turns being the current question. Here's the updated class file with this new variable listed:
package {
import flash.display.Sprite;
public class QuizApp extends Sprite {
private var quizQuestions:Array;
private var currentQuestion:QuizQuestion;
public function QuizApp() {
quizQuestions = new Array();
createQuestions();
createButtons();
firstQuestion();
}
}
}
The functions listed in the constructor haven't been written yet, and that's what we'll get to next, starting with createQuestions. Now, I know that we could create a bunch of questions and store them in an XML file, but I just want to keep this tutorial simple. So, the createQuestions function is going to contain all the data to create all the questions. To add more questions later, you'll have to go back and edit your QuizApp file and type in more questions. But QuizApp will be flexible enough to allow you to add any number of questions you want. And you can add XML capabilities on your own later on if you want.
Here's the createQuestions function:
private function createQuestions() {
quizQuestions.push(new QuizQuestion("What color is an orange?",
1,
"Orange",
"Blue",
"Purple",
"Brown"));
quizQuestions.push(new QuizQuestion("What is the shape of planet earth?",
3,
"Flat",
"Cube",
"Round",
"Shabby"));
quizQuestions.push(new QuizQuestion("Who created SpiderMan?",
2,
"Jack Kirby",
"Stan Lee and Steve Ditko",
"Stan Lee",
"Steve Ditko",
"none of the above"));
quizQuestions.push(new QuizQuestion("Who created Mad?",
2,
"Al Feldstein",
"Harvey Kurtzman",
"William M. Gaines",
"Jack Davis",
"none of the above"));
}
These are a combination of some nonsensical questions I made up, and some tidbits of trivia from comic book history. Feel free to change these around and/or use your own questions if you want. You're not limited to 4 questions by any means, either. Put in 10, 20, 50, or however many you want. Notice that each new instance of QuizQuestion is not assigned to a variable name, but is instead immediately pushed into the quizQuestions array. It could be done either way, but there is really no need to name a variable. The array's name and the index number in brackets become our way of referring to individual quiz questions.
Next, let's go on to writing the createButtons function:
private function createButtons() {
var yPosition:Number = stage.stageHeight - 40;
prevButton = new Button();
prevButton.label = "Previous";
prevButton.x = 30;
prevButton.y = yPosition;
prevButton.addEventListener(MouseEvent.CLICK, prevHandler);
addChild(prevButton);
nextButton = new Button();
nextButton.label = "Next";
nextButton.x = prevButton.x + prevButton.width + 40;
nextButton.y = yPosition;
nextButton.addEventListener(MouseEvent.CLICK, nextHandler);
addChild(nextButton);
finishButton = new Button();
finishButton.label = "Finish";
finishButton.x = nextButton.x + nextButton.width + 40;
finishButton.y = yPosition;
finishButton.addEventListener(MouseEvent.CLICK, finishHandler);
addChild(finishButton);
}
It's going to be necessary that we import the Button class, now, too, and also the MouseEvent class, so add these items to the import block:
import fl.controls.Button;
import flash.events.MouseEvent;
Also, add the variables for the buttons to the variable list:
private var prevButton:Button;
private var nextButton:Button;
private var finishButton:Button;
The temporary variable "yPosition" is obviously for setting the y position of all the buttons. They are going to be in a row across the bottom of the screen, so their y positions will all be the same. stage.stageHeight was used as a base, so that if you later change the size of the flash application's stage area, this code will not need to be changed. Similarly, hard coded numbers were mostly avoided, and the buttons' x properties are all expressed in terms of the previous one.
Each button is added to the display list, and each also has an event listener assigned to it. Let's go ahead and write some empty handler functions, one for each button:
private function prevHandler(event:MouseEvent) {
trace("previous");
}
private function nextHandler(event:MouseEvent) {
trace("next");
}
private function finishHandler(event:MouseEvent) {
trace("finish");
}
The dummy actions inside these handler functions just give us some feedback that our buttons are working, and also allow us to test the movie without getting errors. Later, we will fill in the real actions, which will be whatever we want to have happen whenever one of those buttons is clicked.
Next, we'll write the remaining function referred to in the constructor, firstQuestion:
private function firstQuestion() {
currentQuestion = quizQuestions[0];
addChild(currentQuestion);
}
If you've added all these things, here's the entire file so far:
package {
import flash.display.Sprite;
import fl.controls.Button;
import flash.events.MouseEvent;
public class QuizApp extends Sprite {
private var quizQuestions:Array;
private var currentQuestion:QuizQuestion;
private var prevButton:Button;
private var nextButton:Button;
private var finishButton:Button;
public function QuizApp() {
quizQuestions = new Array();
createQuestions();
createButtons();
firstQuestion();
}
private function createQuestions() {
quizQuestions.push(new QuizQuestion("What color is an orange?",
1,
"Orange",
"Blue",
"Purple",
"Brown"));
quizQuestions.push(new QuizQuestion("What is the shape of planet earth?",
3,
"Flat",
"Cube",
"Round",
"Shabby"));
quizQuestions.push(new QuizQuestion("Who created SpiderMan?",
2,
"Jack Kirby",
"Stan Lee and Steve Ditko",
"Stan Lee",
"Steve Ditko",
"none of the above"));
quizQuestions.push(new QuizQuestion("Who created Mad?",
2,
"Al Feldstein",
"Harvey Kurtzman",
"William M. Gaines",
"Jack Davis",
"none of the above"));
}
private function createButtons() {
var yPosition:Number = stage.stageHeight - 40;
prevButton = new Button();
prevButton.label = "Previous";
prevButton.x = 30;
prevButton.y = yPosition;
prevButton.addEventListener(MouseEvent.CLICK, prevHandler);
addChild(prevButton);
nextButton = new Button();
nextButton.label = "Next";
nextButton.x = prevButton.x + prevButton.width + 40;
nextButton.y = yPosition;
nextButton.addEventListener(MouseEvent.CLICK, nextHandler);
addChild(nextButton);
finishButton = new Button();
finishButton.label = "Finish";
finishButton.x = nextButton.x + nextButton.width + 40;
finishButton.y = yPosition;
finishButton.addEventListener(MouseEvent.CLICK, finishHandler);
addChild(finishButton);
}
private function firstQuestion() {
currentQuestion = quizQuestions[0];
addChild(currentQuestion);
}
private function prevHandler(event:MouseEvent) {
trace("previous");
}
private function nextHandler(event:MouseEvent) {
trace("next");
}
private function finishHandler(event:MouseEvent) {
trace("finish");
}
}
}
Press CTRL-Enter to test your movie. You should get the display of the first quiz question, and when you click the buttons, you get the trace output for each one. Naturally, we want the next button to take us to the next question, the previous button to take us to the previous question, and the finish button to compute the score when all the questions have been answered. We'll take all that on next.
