| sample images | finished movie 1| finished movie 2 |

Lingo - Quiz

Created and designed by Vivienne Trulock for ilikecake, 2005

Advanced Section

See completed movie. Set the movie size to 400 * 400.

Import the card images and place on the score as shown. The cards are named and numbered so as to make it as simple as possible to lay them out correctly. Be sure to layout exactly as shown. The free space will be filled later.

Select all the sprites (ctrl - A) and set the X-Y coordinates to (100, 100) in the property inspector.

The Stage So Far

At this stage the stage should look like this.

Hotspots

Next create a hotspot called 'ring' in the text window. The easiest way to do this is to use an empty piece of text (one with just a space in it) sized to the right size. You can also use the ring image with a transparent background. Place it as shown so that each hotspot covers a different answer on each card.

• All the 'A' cards have the correct answer in the top left.
• All the 'B' cards have the correct answer in the top right.
• All the 'C' cards have the correct answer in the bottom left.
• All the 'D' cards have the correct answer in the bottom right.

The quickest way to do this is to set up first one in the correct position, and then copy & paste across the score.

About the turn cards off Lingo Script

The code below goes in the frameScript of the first frame. It turns off the visibility of all sprites between rows 5 and 29 inclusive. These rows have the question cards and their hotspots on them.

The letter 'y' is a variable, which can be any number. It is declared as a property at the beginning of the script (line 1 in the code).

Line 2 defines a handler, or subroutine, called TurnCardsOff, using a variable, or property called 'y'

At the start, y is set to have the value 5, the first row that has the particular sprites on it that have to be invisible (line 3 in the code).

The while loop initially sets the visibility of sprite(5) to false (line 5) and then the value of y is increased to 6 (line 6 in the code). The next time the while loop runs, it will set the visibility of sprite(6) to false, and so on. The while loop finishes at sprite(29), while y is still less than 30 (line 4 in the code). Then, the while loop ends (line 7 in the code) and so does the TurnCardsOff handler (line 8 in the code).

The TurnCardsOff handler is called from line 10, in the enterFrame code. The lines of code are executed in this order: 9, 10, 2, 1, 3, 4, 5, 6, 4, 5, 6, 4, 5, 6, ... ,4 7, 8, 11

The turn cards off Lingo Script

About the Random Card Lingo Script

The following code is placed in the spriteScript of the ‘top’ card and the ‘correct’ card. There are 3 handlers (subroutines) used here: PickRandomNumber; ShowRandomCard; ShowRings. This time the variable is called x (line 1 in the code below).

The PickRandomNumber handler picks a random number between 1 and 5 inclusive, and multiplies it by 5 (line 3 in the code below). This is because all the cards are placed on rows 5, 10, 15, 20, 25. So x now has one of these values: 5, 10, 15, 20, 25

The ShowRandomCard handler shows the sprite on one of these lines, by setting it's visibility to TRUE (line 6 in the code below)

The ShowHotSpots handler sets whatever hotspots are associated with that card to be visible also. The hotspots are on the 4 lines immediately after their card. If x is 5, line 10 will set row 6 to TRUE, line 11 will set row 7 to TRUE etc. If x is 10, line 10 will set row 11 to TRUE, line 11 will set row 12 to TRUE, etc.

The mouseUp (line 16 in the code below) calls all these handlers in the correct order. The code is executed in the following order: 16, 17, 2, 1, 3, 4, 18, 5, 6, 7, 19, 8, 9, 10, 11, 12, 13, 14, 15, 20.

The Random Card Lingo Script

Result Cards

At this stage, we need to add in some more cards. Place the collage image on row 1 and the 'correct' and 'try again' cards on rows 25 and 26, as shown. These cards will show the user the results of their answer.

The following lines are additional in the code attached to the ‘correct’ card. This turn off the correct card itself and sends the user to the next marker. They go after line 19 in the above script.

The question cards themselves have no attached code, but their hotspots do. This script is attached to all the hotspots on the 'a' cards. The correct answer is surrounded by the ring on row 6. Row 25 has a 'correct' card. Row 26 has a card which says 'try again'. Row 2 will tell us whether the correct answer has been clicked or not - we will check for this in another script later.

Result Cards Lingo Script

1. On the 'a' cards, the correct answer is covered by the hotspot or ring on row 6
2. On the 'b' cards it is row 12
3. On the 'c' cards it is 18
4. On the 'd' cards it is 24

The script above must be copied and pasted, modified to reflect the different answers and attached to the appropriate hotspots.

To allow the user to try again, just turn off the ‘try again’ card by attaching this script to it.

Loop Script

Allow users to proceed at their own pace by building in stop codes into the movie by placing the code below onto frame where the user must interact with the quiz - ie give an answer.

Play Again Script

Allow users to play again, by attaching this code to the ‘play again’ card.

At this stage, the score should look something like this:

And the movie itself should do this.

Next we are going to add a scoring system, to encourage people to play again and to try to beat their own scores and that of their friends.

Counter

To have a counter that reduces the number of points a person gets the longer they take to answer to the question, put the code below into a framescript on frame 29 instead of the go to the frame loop.

This is what it means:

global gScore defines a global variable which holds a value and can be called from different scripts. property pPoints defines a local variable for use in this script only. gScore=0 sets value of score to zero at start. pPoints=100 sets value of points to 100 at start.

Sprite(2) acts as a flag - it is either 'on' or 'off'. If the if 'flag' is on (visible) then the right answer has been clicked. If the if 'flag' is off (invisible) then the wrong answer has been clicked.

If the answer is right we need to add the current value of points to score (gScore=gScore+pPoints). To write the new score to the screen we use the code: member("Score").text = ("Score:")&&gScore. To write the new points to the screen we use the code: member("Points").text = ("Points:")&&pPoints. Once we have done that we need to reset the flag to be invisible.

If the wrong answer was clicked then the flag (sprite 2) is invisible. We then need to reduce the value of the points: pPoints=pPoints-1 and update the screen: member("Points").text = ("Points:")&&pPoints. The movie will stay at this spot until the user gets the answer right.

Counter Lingo Script

You will need to duplicate this script and delete line 4: gScore=0 and place it on the last frames in each of the sections. In the example here they are on frames 39, 49, 59 & 69. We need it on these frames so the user score will continue to be added up, but we have to remove gScore=0 as gScore will have a value by the time it gets to the second and subsequent questions.

Points and Score

To complete it you will need to create 2 text members, 1 named Points and the other named Score and create sprites in rows 27 and 28.

User Name

You also need a place for the user to enter their name.

Create a text or field member, called 'name'. Place it at the start of the movie and in its properties window, click on the 'editable' button.

Create a 'play' button with text and place nearby the editable 'name'. Attach a 'go to marker(+1)' behaviour.

On row 1 in the score, insert a collage image for the background.

The final score should look like this.

Completed Movie

The final quiz should look something like this. You will only be able to see this if you have shockwave installed.

When designing a game there are many different things to be considered.

• AA
• XHTML
• CSS

© ilikecake 2005-2008