TWiki
> Main
>
HowToCreateALocatedQuizGame
Creating a Located Quiz Game
Located quiz games are mediascapes where the user is asked multiple-choice questions at various points around the real world. The answers to these questions can usually be found around the area where the question pops up.
You may have this question pop up near to a road sign that contains the correct answer. You can have a lot of fun coming up with interesting questions for your players, for example you may wish to have some questions that can only be answered by asking local people, or that require some maths or other mental challenges.
These kinds of games can work really well as a social game for a mediascape event as teams can share a single device, and send members off in various directions to find the answer. The mscapers team have run successful games similar to this in London for the
Girl Geek Mediascape event, and for the
Quality Me Time Event in Les Arcs, France. Both of these mediascapes are available to download from the mscapers.com site.
In order to make it easy for you to create your own located quiz game, I have torn the guts out of the Les Arcs game and generalized it.
Download the template mediascape
This version will no longer automatically switch from the status screen to the map screen after 15 seconds. This was causing issues for people who were mixing videos, images, etc with the Flash QuizGame interface.
How it works
The interface is all handled by a Flash movie, which loads the list of questions from an external text file. The format of this text file is explained below. In the mediascape, you create regions where you want each question to pop up, you match the name of the region with the name of the question, and you send a message to the Flash movie telling it to show the question that matches the name of the region.
Each question is text only, and has four possible answers, only one of which is correct. When a region is entered, the appropriate question is shown, and the map is disabled. This means that while you are answering a question, no more questions will pop up until you have finished. The player can choose to answer the question, or pass. If they pass, they can re-try the question by walking back into that question region.
The system will save the state of the game within the Flash movie, so you can reset the iPAQ, close mscape player, and return to the game at a later date if required. To use this feature, choose 'Continue' from the title screen. To start a new, blank game, choose 'New Game'.
You can test out all of your questions in order without needing a mediascape by clicking the small 'test' button at the bottom right of the title screen.
After each question, the user will be taken to a status screen which shows them their score, and the number of questions they've tried, answered correctly, and answered wrongly.
This screen will time out to the map, showing the player where they are on screen.
Template Mediascape
Download the template mediascape
I've made an example mediascape that should be used as the basis for your quiz game. There's a bit of logic in there to set up the communication between the flash movie and the mediascape, so it's better to start from this than to try and rebuild it all from scratch.
You'll want to swap out the map that's included for one of your local area - make sure you leave the name of the map as the default 'map' or some of the logic won't work.
Note that it's not worth trying to play this template mediascape in the real world - there are only two questions, and the answers may not even be correct! If you're in the area, try out the girl geek game or the les arcs game (see above for links).
Writing your own Questions
First up is to walk your area and come up with a series of questions. Personally I've found the best way to do this is to walk around with a PDA with a voice recorder, and to record the questions and the four possible answers in this as you go. Try and make sure that the questions are quite short, as the screen will only fit three lines of text. Each of the four answers should be pretty short too, you've got two lines worth of text to play with.
Once you have compiled your list of questions, you add them into the game by editing a text file. This file is called 'questions.txt' and is inside the 'WebPages' folder in the template mediascapes content directory. If you have the template mediascape open in mscape maker the quickest way to get to the file is to select Open Content Folder from the Tools menu, then navigate inside the 'WebPages' folder.
Open it in a text editor and it'll look something like this:
{
"london":
{
"level":1,
"question":"How many miles is it from here to London Bridge?",
"answers":{"a":"1","b":"2","c":"5","d":"10"},
"correct":"b"
},
"bridge":
{
"level":1,
"question":"What is this bridge called?",
"answers":{"a":"Waterloo","b":"Westminster","c":"Dave","d":"Cindy"},
"correct":"a"
}
};
I'll explain each part in turn. Note that it's VERY important that the layout of this file is preserved, don't go deleting brackets or double quotes or other formatting.
"london": - 'london' is is the name of the question. Later you'll need to match the name of the region to this, so make sure you don't use any spaces or symbols, or start its name with a number.
"level":1 - this indicates the difficulty of the question, this example has difficulty level 1, where 1 is easy, 2 is medium, 3 is hard. The difficulty will be shown on screen as a series of stars, and also affects the score gained for getting the question right (easy = 10 points, medium = 20 points, hard = 30 points). It's up to you to decide which questions are given which difficulty levels.
"question":"How many.." - this is the text of the question itself. Try and keep it as concise as possible
"answers":{"a":"1","b":"2" ... } This part gives the four possible answers (a,b,c,d). Again, keep these as short as you can, text and numbers are both acceptable - but don't forget the double quotes "".
"correct":"b" - This tells the system which is the correct answer. The example here gives 'b' as the right answer.
The bridge section defines a second question, it should be pretty self-evident what's going on here.
In order to add more questions, simply copy-and-paste one of the questions
before the final }. Ensure that you place a comma , before the name of your new question. Things will go very wrong if you forget or mess up the formatting in some other way, so be careful!
Testing out your Questions
It's a good idea to test your questions out as you go along, to make sure it's all working and you haven't accidentaly broken the formatting. To do this, start up the mediascape in mscape tester, simulate the GPS fix, and then hit the 'Test' button on the Flash interface. This mode will cycle through all of your questions in turn and doesn't require you to do any GPS simulation etc.
Triggering Questions from Regions
The final step is to make regions trigger the questions in the correct place. Luckily this is pretty straightforward.
Create yourself a region, polygon or circles are both fine, and give it a name which exactly matches the name of your question (e.g. london for the first example above).
Then you need to make the region tell Flash that it should show a question that matches the name of the region.
Copy-and-paste the line below into the 'OnEnter' event of the Region.
QuizGame.RunActionScriptWithParams("showQuestion", me.Name);
Note that this code is the same for all regions, regardless of what the name of the region is. The me.Name part gets out the name of the region that has been entered, and sends it off to the Flash movie.
Once you've done this, fire up mscape tester, simulate the ''OnGotFix'' event of the GPS by checking the 'Has Fix' box in the GPS gadget on the right and get playing! The system will only let you answer each question once, so make sure you choose 'New Game' from the title menu of the game.
Troubleshooting
If you get a screen where the question and all the answers appear as 'undefined' then you've either not matched the name of question to the name of the region (it is case sensitive) or there is a mistake in your questions.txt file such as an extra bracket or missing comma. Check it really carefully!
Advanced: Further Customization
The graphics and sound for the question game are all embedded in the Flash movie, so it is not possible to change them without rebuilding the 'QuizGame.swf' component and re-importing it into the mediascape.
If you'd like the change the graphics or sound then you should download the FLA and accompanying source code from the link below, and edit it using Flash CS3. Note that you'll need to be fairly confident with using Flash to do this without breaking the game.
FLA and accompanying source code for the quiz game Flash component
Important: You will need the Adobe Flash CS3 editor - older versions will not be able to open the FLA file
If you're interested in seeing how the game works, the bulk of the actionscript is in a set of external files.
| mediascape2.as |
This file enables the communication between the Flash movie and the mediascape |
| mediascapeCommands.as |
This file contains the actionscript functions that are directly invoked from the mediascape ('''showQuestion''' etc) |
| Debug.as |
Code for running the question test mode |
| JSON.as |
Library functions for parsing the question.txt file |
| QuestionEngine.as |
Code for running the question game itself. This file has the bulk of the code |
