Build A Quiz in AS3 [PDF]

Citation preview

Tutorial on building an interactive quiz in Flash Actionscript 3



flashbynight.com



What you will learn: •



how to build a quiz using Flash AS3



•



using randomization techniques



•



storing data in arrays



•



storing data in xml (optional)



Prerequisites: •



working copy of Flash version 8 or above



•



working knowledge of how to use the Flash interface



* You can download the completed source files from here: www.flashbynight.com/tutes/quiz.html



Making a quiz with randomized options in AS3 So here we go. We want to make a quiz in Flash AS3 where the options are randomized. We may also want the questions to come up in a random order. What’s more, we may want to reuse our code for further quizzes. How can we do all this? The answers are right here in this tutorial. Read on.



Step 1 People have a funny habit of making tiny little Flash movies. But we want our quiz to be big and exciting. Open up Flash and modify the stage size to 600 x 800. This way, we get a nice big stage, but it will still display on laptop screens:



Fine. Save the file under the name ‘quiz.fla’ and let’s move on.



Step 2 We need some sample questions for the purpose of the tutorial. We should have about four, I think, so here they are:



Question 1:



Where is Seoul?



Right Answer:



South Korea



Wrong Answer:



Japan



Wrong Answer:



North Korea



Question 2:



Where is Bucharest?



Right Answer:



Romania



Wrong Answer:



Hungary



Wrong Answer:



Poland



Question 3:



Where is Copenhagen?



Right Answer:



Denmark



Wrong Answer:



Sweden



Wrong Answer:



Finland



Question 4:



Where is Lima?



Right Answer:



Peru



Wrong Answer:



Argentina



Wrong Answer:



Chile



Now, we need to find a way to get the questions in a form that Flash can read. We will look at two ways of doing this: 1 Storing the info in an array 2 Loading the questions from XML The first option is the easiest, but the second option gives more flexibility. If you are a beginner to AS3 or if you do not need to worry about reusing programming code, stick to the array. Otherwise, check out how to use XML. Now jump to step 4 if you want to get into the XML, otherwise proceed to step 3. Step 3 A great way to store data is to put it in an array. In Flash, we can create an array like this: var names:Array=["Jon","Tony","Ralph"]; Then we can refer to the data as names[0], names[1], names[2]. Try it: var names:Array=["Jon","Tony","Ralph"]; trace(names[2]);



The program should output Ralph. By the way, we are going to put all our code on the main timeline for this tutorial. This is not considered cool by advanced programmers, who like to stick everything in external .as files, but we’re going to do it anyway. So on the main timeline, and in the first frame, add the following to a layer named data:



var questions:Array=["Where is Seoul? ","Where is Bucharest? ","Where is Copenhagen? ","Where is Lima? "];



That’s our array done to hold our questions. Now for the answer options, we will use a slightly more advanced technique: an array of arrays. That means we will hold our three options for each question in an array like so: ["South Korea","Japan","North Korea"] And we will store all these arrays as a ‘master array’, like so: var answers:Array=[ ["South Korea","Japan","North Korea"], ["Romania","Hungary","Poland"], ["Denmark","Sweden","Finland"] ,[ "Peru","Argentina","Chile"] ]; Now we can access our questions in the following way: The correct answer for question 2 is answers[1][0]. The dummy answers are answers[1][1] and answers[1][2] Question 2 is referenced by answers[1] because the first entry in an array is identified as 0, not 1. Try the following traces: trace(questions[1]); trace(answers[1]); trace(answers[1][0]); trace(answers[1][1]); trace(answers[1][2]);



Now that we have stored our question data, move on to Step 4 to see how we could do this using XML or move on to Step 5 to set up the interface. Step 4 In Step 3, we learned how to store our questions and answers in an array. Now we will load the questions and answers in from an external XML file and store them in the same arrays. First, we need an XML file, obviously. You don’t need any special software for this; you can simple write the XML into a wordpad document or text document and then change the file extension to XML. So open a word pad document and type out the following:



Where is Seoul? South Korea North Korea Japan



Where is Bucharest? Romania Hungary Poland



Where is Copenhagen? Denmark Sweden Finland



Where is Lima? Peru Argentina Chile



Now save this as sample.xml. The beauty of XML is that it can be read easily by various programs running in flash, php, javascript and so on, but it can also be read by humans. For example, looking above, it is easy to see that the label refers to a question



and refers to the first option, which we will use to store the answer. These labels are called nodes.



Let’s load the data into Flash. To do this, we need a few lines of code: var loader:URLLoader = new URLLoader(); loader.addEventListener(Event.COMPLETE, loadXML); loader.load(new URLRequest("sample.xml")); function loadXML(e:Event):void { var myxml = new XML(e.target.data); trace(myxml); } The above code first creates a URLLoader, then adds a ‘listener’ that checks when the loader has completed its job. The third line requests that the loader gets data from our file, sample.xml. The fourth line begins a function that will run when the data is loaded (as called from line 2). Inside this function, we declare a variable to hold the info and then run a trace to check it is working. Once you are sure it is working, you can remove the trace. What is happening now is that we have the data loaded into our flash movie and we want to manipulate it so that we can stick it into an array. Let’s do it. We need to define two empty arrays, one to hold the questions and one to hold the answer options: var questions:Array=new Array(); var answers:Array=new Array(); Put this code before the previous code. Next, we need a way to populate the arrays with the data. Replace the line trace(myxml); with the following: var loop =myxml.ques.length(); for (var i=0;i