Flash Tutorial: Creating a True/False Quiz



Flash Tutorial: Creating a True/False Quiz

[pic]

In this tutorial you will learn how to create a simple true/false quiz using Flash.

1. To begin, we'll take a look at a finished version of the quiz we'll be creating.

Click CTRL > Enter to run the Quiz.

2. We're now going to access the template used to build this quiz.

Open the folder with your files:

Courses/fall08/JR200/your_name

A list of folders should appear. Select the folder with your name (it will be Firstname_Lastname), then select Flash-Materials > Quiz-Materials

3. Find the file titled " true-false-quiz.fla”. Double click to open this file.

4. You will be presented with a screen that looks something like this:

[pic]

5. Look at the timeline toward the top of the screen. You will see four layers:

[pic]

Here's what each layer does:

o Actions: This layer contains programming elements that tell Flash how to operate the quiz. We won't be touching this layer.

o Title: The layer contains the title text on the opening screen of the quiz.

o Interactions: This layer contains six keyframes. Each keyframe contains a quiz question. We'll be doing the majority of our work in the Questions Layer.

o Controls: This layer contains the Next, Previous and Start Over buttons you'll see in the black bar at the bottom of the final quiz. We won't be touching this layer.

o Background: This layer contains the yellow background. You're welcome to change the color.

6. The elements that make up this quiz are quite simple, but the underlying quiz functionality is handled by a complex programming structure. The good news is that we aren't going to be dealing with code. The bad news is that we are going to be working with an advanced Flash tool. This tool is known as the "Component Inspector."

The Component Inspector is a graphical interface that allows regular folks (like you and me) to tap into Flash's underlying programming without diving into code. We'll be using the Component Inspector to edit the questions in this quiz template.

7. On the timeline, click on the Interactions Layer, Keyframe 2. Your stage will look something like this:

[pic]

8. On the left side of the screen you'll see a box located off-stage. Grab the scrollbar and scroll to the left so this box is in view:

[pic]

This box is going to play an important role in this tutorial.

9. Grab the magnifying glass tool and set it to "minimize" (it should have a minus sign in the middle of it). Click on the stage and minimize the objects so that you can see the "True or False Interaction" box and most of the quiz area, like this:

[pic]

10. Confirm that you are on the Interactions Layer, Keyframe 2.

11. Grab the selector tool and click once in the off-stage area to deselect all elements.

12. Click on the "True or False Interaction" box.

13. Go to Window > Components Inspector (or press Alt + F7). The Components Inspector window will appear:

[pic]

14. We are going to use the Components Inspector to fill in the information for the first question in our quiz. Here's what we will put in each of the Component Inspector fields:

o Interaction ID: Do not edit this.

o Question: Delete the default text and replace it with your own true/false question (it can be whatever you like, but make sure you put a "1." in front of it).

o Distractors: Do not edit this.

o Correct: Select the radio button that is correct (i.e. if the correct answer to your question is "true," make sure the "true" radio button is selected).

o When you have filled in all the fields, click the Start button and then close the Component Inspector.

15. We have just inserted our first question and our first answer. We need to go through this same process for the rest of our questions.

16. Click on the Interactions Layer, Keyframe 3. Grab the selector tool (if it is not already selected), click once in the grey off-stage area and then click once on the True or False Interaction box. Go to Window > Component Inspector. When the Component Inspector pops up, insert your second question into the "Question" text field (remember to include a "2." in front of the question), then select the correct answer and press "Start."

17. Go through the same process for each of these keyframes:

o Interactions Layer, Keyframe 4

o Interactions Layer, Keyframe 5

o Interactions Layer, Keyframe 6

o Interactions Layer, Keyframe 7

18. When you have inserted all six questions, go to Control > Test Movie to see the final quiz.

[pic]

|How to Add Additional Questions to the Quiz |

|Chances are you'll want a quiz that can handle more than six questions. Here's what you need to do to make this happen: |

|We're going to add a 9th keyframe to this quiz. The first thing we need to do is make sure each of our layers extends out to the |

|9th keyframe. |

| |

|To do that we’re going to select Frame 7 on every layer. Start by clicking on keyframe 7 on the Actions layer. |

|[pic] |

| |

| |

| |

|Then, hold down the SHIFT key and click on frame 7 in each layer. |

|Your timeline should now look like this: |

|[pic] |

|Now, hit the F5 key or go to the menu and select Insert > Timeline > Frame |

| |

|Your screen should now look like this: |

|[pic] |

|Note that we’ve added an additional frame to ALL of the layers, however, we need to make another adjustment before we’re done. We |

|have to set up the seventh question. |

| |

|Remember that the final screen in the quiz displays the number of correct/incorrect answers. We don’t want to alter that frame, |

|which is frame 9. |

|[pic] |

|And we need to add an additional question to frame 8. To do that we’ll need to replace the blank frame with a keyframe. That’s the|

|quickest way to add a new question. |

| |

| |

|Before: [pic] After: [pic] |

|So, first. Click on frame 8 to select the blank frame and hit the F6 key to insert a keyframe. |

| |

|Make sure Frame 8 is selected, then click on the True False Interaction box to the left of the stage. Then, go to Window > |

|Component Inspector. |

| |

|When the Component Inspector appears, fill in the following fields (Note: Pay careful attention to this step -- we're going to be |

|adding more to the Component Inspector than we have in the past). |

| |

|Interaction ID: Change this to Interaction_07 |

|Question: Fill in a true/false question in this field. Make sure it has "7." in front of it. |

|Distractors: Do not edit these. |

|Correct: Select the correct answer to your question. |

|Click the "Start" button and then close the Component Inspector. |

| |

|Go to Control > Test Movie or hold down the CTRL key and hit ENTER and make sure your seventh question is appearing. |

| |

|To add additional questions, go through these same steps. |

| |

|That's it! |

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download