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

VCB424 Advanced Interactive Design IV

Create a Flash Quiz (2)

Note: this a a more elegant (but trickier to understand) version of the quiz exercise found here.

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 an example.

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. At about frame 50 add a new set of regular frames to all of your layers (function-F5).
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. Better still, we're going to do all of this with just one script (rather than one on each button or in each frame).

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

stop();

 

var quizTimeline = this;

var numQuestions = 10;

var q1answer;

var q2answer;

var q3answer;

var q4answer;

var q5answer;

var q6answer;

var q7answer;

var q8answer;

var q9answer;

var q10answer;

 

You should know what stop(); does. The rest of the items set variables. The first one creates a variable called "quizTimeline" that refers to the main timeline of the movie. The second variable sets the number of questions (if you want to add more questions adjust accordingly). The next 10 lines create a set of variables we will use later.

4. Now add these variables:

var correctAnswer1 = 1;

var correctAnswer2 = 1;

var correctAnswer3 = 1;

var correctAnswer4 = 1;

var correctAnswer5 = 1;

var correctAnswer6 = 1;

var correctAnswer7 = 1;

var correctAnswer8 = 1;

var correctAnswer9 = 1;

var correctAnswer10 = 1;

 

For each question in your quiz you will have to change the value of the corrsponding variable above. For example, if the answer to your first question is the third option, the first line should read var correctAnswer1 = 3; and so on.

5. Now add the following code:

answer.currentQuestion = 0;

 

function answer(choice) {
answer.currentQuestion++;
set("q"+ answer.currentQuestion+"answer", choice);
if (answer.currentQuestion == numQuestions) {
quizTimeline.gotoAndStop("end");
gradeUser();
} else {
quizTimeline.gotoAndStop("q"+(answer.currentQuestion+1));
}

}

Okay this is where things get complicated. First the value to the answer.currentQuestion is set to 0. Then, a function is created that does several things: it adds 1 to answer.currentQuestion; it figures out which button was pressed and assigns the value to the variable q1answer (the values of the buttons is set further down); and it looks to see if the final question was answered (if so, it jumps to the end of the timeline, otherwise it adds 1 to the currentQuestion and proceeds to the next question inthe timeline). Whew! That's a lot packed into a small space. But it's very efficient.

6. Okay, more code:

function gradeUser() {
var totalCorrect = 0;
for (var i = 1; i<=numQuestions; i++) {
if (eval("q"+i+"answer") == eval("correctAnswer"+i)) {
totalCorrect++;
}
}
quizTimeline.createTextField("totalOutput_txt", 1, 260, 150, 250, 20);
quizTimeline.totalOutput_txt.text = "Your final score is: "+totalCorrect+"/"+numQuestions;
var formatObj = new TextFormat();
formatObj.size = 18;
formatObj.color = 0xFFFFFF;
formatObj.font = "Arial";
formatObj.bold = true;
quizTimeline.totalOutput_txt.setTextFormat(formatObj);

}

This function (gradeUser) kicks in at the end of the timeline. For each question it compares the value of the answer given (q1answer, for example) with the value of the correct answer (correctAnswer1, for example). If they are the same, the totalCorrect increases by one.

But the function then 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.

7. Finally we have this bit of code:

choice1.onRelease = function () {
this._parent.answer(1);

}

 

choice2.onRelease = function () {
this._parent.answer(2);

}

 

choice3.onRelease = function () {
this._parent.answer(3);

}

These three lines simply read which of the buttons was pressed (choice1, choice2, and choice3 are the button instance names, remember?) and pass that information along to the variable answer that we use above.

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 quiz2.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.

Course Outline

Syllabus

Student Resources