Written by: Radina Matic
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:

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

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:

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;
        }
}

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

on (release) {
        answer=""
        comment=""
}

There's more over the page...