Written by: Radina Matic [email:didinomade@hotmail.com]
Time: 35 minutes
Difficulty Level: Intermediate
Requirements: Flash 5 or higher
Topics Covered: How to make an interactive quiz in Flash 5.
Assumed knowledge: Variables, Paths, Drag And Drop.

Those who already upgraded to Flash MX found that Macromedia added some ready-to-use Learning Interactions/Components which can be easily changed and used for our own purposes. You can check here all the news about MX quiz templates and stand alone learning interactions. But for those of us who continue to "flash with 5" the plain old handcoding-thing is still on. Since I am neither "cool games" nor "fast swoosh-splash movements with lot of tecno" person, I enjoyed a lot trying to make this funny quiz look (and work) like those learning components you can use in MX without any effort. It doesn't have all that complex accessibility code inside, but it does the job. Here is the result:

The movie has six keyframes (grab the source file here) each one with a different type of question (fill in the blank, multiple choice, true or false, hot spot,etc.) and the last frame displays the percentage of correct answers and suggestions.

General for all frames

All frames have in common a layer with background graphic, title and "next" button. I won't be discussing making of graphic elements because I assume that you are perfectly capable of such things (and do much better than I). Make any background you like and put it in the first layer (I have put background graphic and title together, locked them through all frames and stopped bothering about it). So let's get to work!

Counting results

I implemented a simple counter wich adds one for every correct answer and, at the end of the movie, displays the percentage of correct answers. Since most of the frames offer the possibility to use "Reset" button (you may choose not to use it, I wanted to explore its usage), and to prevent a user getting more than one point for a particular question (which results in strange final percentages), another variable which allows only the first click to be counted is introduced.

"result" variable counts right answers, and "first1" and "first2" ensure that only first click is taken in account by the counter. In the first frame there are two of them because there are two questions, but in the rest of frames there is only one question, so each frame should have "first = 1;" line.

Keyframe 1 - "Multiple Choice" type of question

For this frame you need one Question and various Anwers (all static text fields), an invisible (no border/background) Comment (dynamic/input text field) and one Button for every answer you offer. Give a name to the variable in the input text field and than simply put this code into button with right answer:

[as]on (release) {
        field1 = "Yes, that's him. Hope italians are very happy...";
        if (first1 == 1) {
                first1 = 0;
                result +=1;
        }
}
[/as]

The string between the quotes represents your message which gives feedback to the user as to wheather he/she first clicked on right answer. The string is stored in the variable "field1" and displayed in the input text field on button press. Buttons for wrong answers contain slightly different code: no "result+=1" part, "first" is immedialtely declared 0, and of course they display negative feedback messages. Philosophy behind "first click counter" is that you could offer some usefull feedback to user even on items which are wrong answer, but for marking purposes you use only first answer they choose.

The procedure for the other question is the same, just remember to give different names to the variable in the second input text field (even though you can choose to have only one input field for both questions - do as you like).

Keyframe 2 - "Fill in the Blank" type of question

Here we need two input text fields. I called the first one "answer" (this is where the user writes his answer) and second one "comment" (where he/she receives feedback). The only difference between them is that "answer" has background and border so the user would know where to write, while "comment" is invisible.



Let us introduce the buttons "Check Answer" and "Reset" since we'll be using them through the rest of our quiz. "Check Answer" simply checks if variable stored in the "answer" field (which is where user wrote) is equal to (==) the right solution, gives positive feedback in "comment" field and adds 1 to "result" variable if the answer was correct (only if it was the first choice), or gives negative feedback otherwise. Here's what it should look like:

[as]on (release) {
        if (answer == "Io ti amo") {
                if (first == 1) {
                        first = 0;
                        result += 1;
                }
                comment = "'Anch'io ti amo' he/she may answer (or may not)...";
        } else {
                comment = "'Oddio, 'sti stranieri...' (God, these foreigners...)";
                first = 0;
        }
}
[/as]

"Reset" button simply offers a user the chance to try again by erasing the content of both text fields:

[as]on (release) {
        answer=""
        comment=""
}
[/as]

There's more over the page...

Keyframe 3 - "True or False" type of question

This frame is bit more complicated because it has more scriptable elements. There is the usual invisible input text field for feedback with variable "comment" (don't forget to name every input text field in your movie differently, otherwise you'll be giving user a feedback in previous frame he/she can not see anymore), two plain buttons for True and False answers and 2 instances of movie clip "spot" (tiny black spot which appears when user selects one of the answers) laying one on the top of every button. The spots should be invisible when user first enters frame so each of them has the script you can see in the picture:



Spot becomes visible when user presses the button under it. To prevent both spots becomming visible at the same time (user is supposed to choose just one), actions on the button should make just one spot visible and the other invisible. I named the spot instances "truespot" and "falsespot" and this is the script for "True" button:

[as]on (release) {
        setProperty (_root.truespot, _visible, 1);
        setProperty (_root.falsespot, _visible, 0);
}
[/as]

The logic here is simple: if a user presses the button corresponding to the right answer, the spot instance belonging to that button will become visible and all the "Check Answer" button should do is make sure if the right spot instance is visible or not. For this we introduce a variable "right" which is set by getting the property visibility from the spot instance of the right answer (in my movie it was "false" spot). This is the script for "Check Answer" button:

[as]on (release) {
        right = getProperty(_root.false, _visible);
        if (right == 1) {
                if (first == 1) {
                        first = 0;
                        result += 1;
                }
                comment2 = "Yeah, because they are still too 'young' to flee the nest...";
        } else {
                comment2 = "No, most of them stay with their mammies until over 30...";
                first = 0;
        }
}
[/as]

The "Reset" button will set invisible both spot instances and clear the comment field as in previous frame:

[as]on (release) {
        setProperty (true, _visible, 0);
        setProperty (false, _visible, 0);
        _root.comment2 = "";
}
[/as]

Keyframe 4 - Hot Objects type of question

Even more elements here! We need 4 instances of movie clip "bandiera" each one with different orientation (I named them flag1, flag2...), and since they should be "hot" we'll have to put a transparent button with the same dimensions on top of each of them. In this case transparent button triggers alpha property of the movie clip under it when selected by user:

[as]on (press) {
        setProperty (_root.flag2, _alpha, 100);
        setProperty (_root.flag3, _alpha, 100);
        setProperty (_root.flag4, _alpha, 100);
        setProperty (_root.flag1, _alpha, 30);
}
[/as]

As in the "true-false" frame, by clicking on one transparent button, the flag instance under it becomes "a bit" invisible, while the rest of flag instances remain fully visibles, so only one of them can be chosen at the time. "Check Answer" button works the same way - it checks alpha property of right answer through a variable and if it is correct (on first click), goes on with counting and displaying the comment in the usual text field:

[as]on (press) {
        good = getProperty(_root.flag1, _alpha);
        if (good<30) {
                if (first == 1) {
                        first = 0;
                        result += 1;
                }
                comment3 = "Whoo!!! You're real expert on italian matters...";
        } else if (good>30) {
                comment3 = "Sorry, no luck!";
                first = 0;
        }
}
[/as]

Keyframe 5 - Drag and Drop type of the question

For this frame we need three dragable objects (movie clips with a transparent button in the first frame - for more details see this tutorial) and three target movie clips. Name all instances on stage and put this code in the "Check answer" button:

[as]on (press) {
        if ((_root.venice._droptarget == "/ponterialto") && (_root.rome._droptarget == 
         "/coloseum") && (_root.florence._droptarget == "/pontevecchio")) {
                if (first == 1) {
                        first = 0;
                        result += 1;
                }
                comment4 = "Strong in italian architecture too, ah?";
        } else {
                comment4 = "Bet you didn't pay attention during art history classes in school!";
                first = 0;
        }
}
[/as]

More over the page...

The question is answered only if all three dragable objects are dropped on their respective targets (Venice on Ponte Rialto, Rome on Coloseum and Florence on Ponte Vecchio) and therefore if statement has three conditions to fulfill before it returns true and continues with counter. The "Reset" button it is little more complex than before because apart from clearing the comment, it implies putting all the dragable objects back in their initial position. For this to work we should use some variables to retrieve their original position, therefore this is the code for frame actions:

[as]stop ();
venicex = getProperty("venice", _x);
venicey = getProperty("venice", _y);
romex = getProperty("rome", _x);
romey = getProperty("rome", _y);
florencex = getProperty("florence", _x);
florencey = getProperty("florence", _y);
first = 1;
[/as]

Then "Reset" button simply uses setProperty action to reset all objects to their initial position:

[as]on (release) {
        setProperty (_root.venice, _x, venicex);
        setProperty (_root.venice, _y, venicey);
        setProperty (_root.rome, _x, romex);
        setProperty (_root.rome, _y, romey);
        setProperty (_root.florence, _x, florencex);
        setProperty (_root.florence, _y, florencey);
        comment4 = "";
}
[/as]

Keyframe 6 - Hot Region type of question

The last frame is similar to Hot Objects question but adds some graphic elements. I duplicated my original Italy map and divided it into 3 parts (regions), added some outer glow (just a way to highlight it on users click - you can achive this in millon different ways) and converted each part into a movie clip symbol. Then I put a transparent button with original region size (without glow) in the first frame of each movie clip, and finaly put the clips on top of the original map so they covered it completely. The last element is movie clip with small red spot which points out exact position of city of Bari, and becomes visible when check is performed after user choses the right region. When a user enters the frame for the first time all "Hot Regions" and Bari spot are set invisible in the frame actions:

[as]stop ();
setProperty ("north", _alpha, 0);
setProperty ("south", _alpha, 0);
setProperty ("center", _alpha, 0);
setProperty ("bari", _alpha, 0);
first = 1;
[/as]

The buttons inside every "Hot Region" should turn on visibility of the selected region and turn off the other two (see picture for actions in "north" transparent button).

Again the "Check Answer" button consults the variable that retrieves the visibility of the correct region (instance "south" in my case), triggers the counter if it was the first click, makes Bari spot visible, and displays feedback in the input text field:

[as]on (press) {
        good = getProperty(_root.south, _alpha);
        if (good == 100) {
                if (first == 1) {
                        first = 0;
                        result += 1;
                }
                setProperty (_root.bari, _alpha, 100);
                comment5 = "Yes! Bet you've been cruising Mediterranean!";
        } else if (good<100) {
                comment5 = "You were sleeping on geography classes, not so?";
                first = 0;
        }
}[/as]

Keyframe 7 - Results

Final frame contains no symbols, just a text field which shows the percentage of correct answers and funny suggestion depending on how well the quiz went. All code is in the frame actions:

[as]stop();
finalresult = int((result/7)*100);
if (finalresult<40) {
        comment6 = "You got only "+finalresult+" % "+"of the answers right."
        + "Maybe you could use a study-vacation to, let's say,"
        + "nice italian monastery?";
} else if ((finalresult>30) && (finalresult<70)) {
        comment6 = "You got "+finalresult+" % "+" of the answers right. Not bad"
        + ", but still improvable. Try hanging out with some Italians.";
} else if (finalresult>70) {
        comment6 = "You got amazing "+finalresult+" % "+"of the answers right. "
        + "You deserve a nice vacation to, let's say, Island of Capri.";
}
// Note the above code has been split up
// to fit this tutorial template better[/as]

There are a lot of variations you could apply to the scripts I've proposed here. For example, the counter could be set to be much more precise, it could count second answers but weight them differently. The "next" button could be scripted to allow transition to the next question only after certain number of tries... You could set a button to start sound of the word(s) which user is then supposed to write in the input text field (kind of dictation)... Possibilities are limitless, everything depends on our creativity.

Hope this helps some of you who are interesting in using Flash for educational purposes. Happy flarning folks!