Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Create a Quiz (1)

VCB424 Advanced Interactive Design IV

Create a Flash Quiz (1)

Create a simple quiz on a topic of your choosing in Flash. The quiz should count the number of correct answers and return a score to the user. Here is a sample.

Part One: Layout

1. Choose a topic for your quiz (preferably you know something about). Create ten multiple-choice questions and answers.
2. Launch Flash. Create a new file (no bigger than 760 x 420).
3. Create a pretty interface (you can come back to this later).
4. Create one a button symbol. Make sure you give it an "over state."
5. Place three or more instances of your button symbol on the stage.
6. Give each button an instance name. Call the first "choice1," the second "choice2," and the third—you guessed it—"choice3." (Obviously, if you have more buttons, name them accordingly).
7. Create a new layer. On this layer write your first question. Use regular static text.
8. Write your multiple choices to the first question next to the buttons. Put them on the same layer that holds the questions.
9. Add a new layer called "labels." Add a label to frame 1 and call it "q1" (for "question 1").
10. Create a new layer; call it "actions." Leave it blank for now; we'll get to the actions later.
11. At about frame 50 add a blank keyframe to all four layers (function-F7).
12. In the question & answer layer, labels layer, and actions layer add ten new keyframes (function-F6) about five frames apart (at 5, 10, 15, etc.). Leave the buttons frame alone except for the final frame (50); the last frame should have a (blank) keyframe on all four layers (see step 11 above).
13. Add a new label at each keyframe: "q2," "q3," "q4"..."q10" and "end."
14. Change your questions and answers at each keyframe (through q10).
15. Leave "end" blank (make sure there are no buttons or text fields on it).

Part Two: Actionscript

Now it would be a simple matter to put a script on each button that gives you instant feedback as to whether on not the answer is correct, but we're going to be a bit more tricky. We're going to collect the answers, tabulate them and then give the user a final score at the end.

1. In the Actions layer click on the keyframe in frame 1(make sure it says "frame" in the properties window, not button).
2. Open the ActionScript editor window (make sure it's set for Actionscript 2, not 3) and write the following script:

stop();

var totalCorrect=0;

choice1.onRelease = function () {
this._parent.q1answer = 1;
this._parent.gotoAndStop ("q2");
}

choice2.onRelease = function () {
this._parent.q1answer = 2;
this._parent.gotoAndStop ("q2");
}

choice3.onRelease = function () {
this._parent.q1answer = 3;
this._parent.gotoAndStop ("q2");
}

 

You should know what stop(); does. The next line resets the total number of correct answers to zero (especially important if you want people to try the quiz again). Then the script basicaly says "if the user chooses "choice 1," then set the value of variable "g1answer" to 1; after that go to frame q2. If the user chooses choice 2...." etc.

3. Place the playhead on the frame that contains the keyframe for question 2 (frame 5). Add a keyframe (F6) on the "Actions" layer. Now add this code:

choice1.onRelease = function () {
this._parent.q2answer = 1;
this._parent.gotoAndStop ("q3");
}

choice2.onRelease = function () {
this._parent.q2answer = 2;
this._parent.gotoAndStop ("q3");
}

choice3.onRelease = function () {
this._parent.q2answer = 3;
this._parent.gotoAndStop ("q3");
}

Notice the code is nearly identical to the code in step 3 above, except we'ver dropped the stop; (not needed), and var totalCorrect=0; (otherwise the user's score will always remain zero). We've also changed "q1answer" to "q2answer" in all three statements and the gotoAndStops now go to "q3."

4. Repeat the process for each question (add a keyframe, paste in the code, change the "q" numbers). Note that the final question (10) should gotoAndStop to "end."
5. Finally add a keyframe on the "Actions" layer at the "end" label. Add the following code:

if (q1answer==1) {
totalCorrect = totalCorrect +1;
}

if (q2answer==1) {
totalCorrect=totalCorrect +1;
}

if (q3answer==1) {
totalCorrect=totalCorrect +1;
}

if (q4answer==1) {
totalCorrect=totalCorrect +1;
}

if (q5answer==1) {
totalCorrect=totalCorrect +1;
}

if (q6answer==1) {
totalCorrect=totalCorrect +1;
}

if (q7answer==1) {
totalCorrect=totalCorrect +1;
}

if (q8answer==1) {
totalCorrect=totalCorrect +1;
}

if (q9answer==1) {
totalCorrect=totalCorrect +1;
}

if (q10answer==1) {
totalCorrect=totalCorrect +1;
}

 

this.createTextField("totalOutput_txt", 1, 250, 150, 250, 20);

totalOutput_txt.text="Your Final Score is: " + totalCorrect + " out of 12";

var formatObj = new TextFormat();
formatObj.size = 16;
formatObj.color = 0xFFFFFF;
formatObj.font = "Arial";
totalOutput_txt.setTextFormat(formatObj);

}

Here are a series of "if" statements. Each one checks the value of the answers selected against the actual correct answers. If they are the same then the "totalCorrect" increases by one.

Very important: in this example all of the correct answers are choice 1 (for example, q1answer==1). Obviously, you'll need to change the answers for your quiz.

This does something else: it creates a text field (the four numbers are its x & y position followed by width and height), and then writes the results of the quiz in that text field. The formatObj items set font family, size, color, etc.

Part Three: Finishing Touches.

1. Try it out, does it work? Okay you may ask, what happens when I reach the end? Can I go back and try it again? Well, you have to add one more button, a button on the last page that sends you back to frame one. However, if you do this you have to do two things:
1. Make sure the button isn't placed under the text box that will appear with the results, and
2. Add quizTimeline.totalOutput_txt.text = ""; to the button script to erase the text box (otherwise it will stay on the screen even when you jump back to the first frame).
2. Back at step 3 under "Layout" I suggested you make your interface pretty. If you haven't yet, do that now.
3. Export a .swf file.
4. Embed the .swf file into an html page (called quiz1.html for example).
5. FTP the .swf, .html, and .fla files to your server space. Make a link to the html file from your home page.

One More Thing...

The code presented here works, but it's kinda' clunky; it's spread out over multiple frames. I also have a version of this same exercise that is more elegant—all of the code for the entire quiz is contained within one script in one frame! What's that catch? It's a lot harder to understand for a novice; it makes use of more advanced techniques that might cause you to scratch your head and say "huh?" Check it out and try it out, see what you think...

Course Outline

Syllabus

Student Resources