Tutorial: Creating a State Capital gameMy goals in creating this game was to build a Flash ActionScript 3.0 version of the game I had done in an older version of Flash and to separate the coding so that a different map, say countries and capitals of Central America, could be swapped in with a minimal amount of effort. I then realized that some of the text messages used the term 'state', which would be inappropriate in a quiz involving countries. I decided to separate the text messages from the code and input them using an XML file.

Note: my separation of text could be used for different languages, but only if the grammar corresponds to English.

The opening screen is the following:

Here is the screen after a wrong answer (clicking on Florida, say) after a question in which the correct answer is to click on New Mexico.

The two Identify questions are presented by fading out all but one state:

The correct answer in this case would be Oregon, which the player would indicate by typing in Oregon into the box. The game would respond:

The most intricate question is the List neighbors (no map). All the states except one are made invisible (actually, alpha set to zero).

As the player correctly types in the names of the neighbors, they re-appear on the map and the names are included. The game indicates "Okay" and not "Correct" because the question is not completely answered. For this and for other questions, it is possible to correct a wrong answer.

The player must indicate explicitly when he or she is done by typing in an X. At this point, the game will produce "Correct".

Note: the game requires perfect spelling. This is a potential area for improvement! A related possibility is to allow the official 2 letter abbreviations.

Implementation

The implementation consists of 3 files: usstatesnew.fla, State.as, and texts.xml. The texts.xml is accessed during run time to populate the various variables holding Strings used for the questions and the follow-ups (e.g, CORRECT!). The State class definition is part of a package called statepuzzle. In concrete terms, this means the State.as file is in a folder named statepuzzle. The .fla file has a statement:

import statepuzzle.*;

and the Publish Settings are set to point to a folder containing the statepuzzle folder. The State.as file has code to load the texts.xml file.

I added the questions one by one and that would be the best way to implement such a game. However, I will describe the final (for now) implementation. The first step in any case is designing the how information is kept and creating the map elements. I took a map of the United States and cut out each state and made it into its own movie clip symbol. Unlike the jigsaw puzzle (see the jigsaw tutorials), the registration point/transformation point is not changed. All state symbols have the same registration point. The following screen shot of the Flash environment shows the symbol for New York (symbol name newyork and instance name newyork) as well as the colorado movie clip symbol in the Library. Notice the position of the cross-hairs for each one.

This means that the states are all put together when they are at the same place—that is, when their x,y are the same. Actually, I moved Hawaii and Alaska slightly. They are not to scale nor positioned accurately in most maps, so this game is no different.

NOTE: it is important to be able to select the individual states within the map image. Images created within Flash have the characteristic that a patch of the same color can be selected. This is part of so-called vector graphics. Bitmaps do not have this characteristic. To turn a bitmap into a base that you can work with to select the individual states, do the following:

1. Insert New Symbol (movie clip). You can call it base.

2. Click on File/Import/Import to Stage. Then browse to the image file you have identified.

3. Click on Modify/Bitmap/Trace Bitmap. This will produce a vector graphic version of the image.

My way of encoding the information is to define a State class. The object variables for each State would include the state name, capital and a reference to the movie clip symbol that shows the state graphically. There would be many class variables as well as several class methods. One of the class variables is an array that holds for each state an array that lists all the border (neighboring) states. It is in alphabetical order by state. [Note: alphabetical order by the full state name. This is slightly different than by abbreviation.] Put more exactly, this array is set up through a call to the setup method. The State.as file is independent of any particular geographic data. The names and capitals and the borders was laborious to put in. For the previous version, I wrote code that calculated the borders and output the information using traces but I wasn't that confidant and did it this time 'by hand'.

Building the usstatesnew.fla file

The usstatesnew.fla file, then, consists of symbols for each state in the Library. Bring an instance of each one to the Stage and give it a name. Make the X Y for each state be the same thing. This will have the effect of reconstructed the map. As I indicated, you can take liberties with Hawaii and Alaska.

Go to Insert/New Symbol and create a new symbol called hook. Move an instance to the Stage and name it hook. Place this on the Stage right below the map. It will be used to position the rest of the interface. Specifically, the State class method setup is invoked with hook as one of the parameters. The code for setting up the radio buttons and other parts of the interface are generated during runtime.

Go to Window/Component and move a Radiobutton and a Button to the Library.

Go to File/Publish Settings Flash Settings and browse to the as3 folder (this is my standard that I do for all of these. It will contain a folder named statepuzzle that has a file named State.as).

The code for usstatenew.fla (go to Windows/Action and put the code in the first and only frame) is:

import statepuzzle.*;var neighbors:Array = [];

var s1:State = new State("Alabama","Montgomery",alabama);neighbors.push(["Florida","Georgia","Tennessee","Mississippi"]);var s2:State = new State("Alaska","Juneau",alaska);neighbors.push([]);

var s3:State = new State("Arizona","Phoenix",arizona);neighbors.push(["New Mexico","Colorado","Utah","Nevada","California"]);var s4:State = new State("Arkansas","Little Rock",arkansas);neighbors.push(["Louisiana","Mississippi","Tennessee","Missouri","Oklahoma","Texas"]);var s5:State = new State("California","Sacramento",california);neighbors.push(["Arizona","Nevada","Oregon"]);var s6:State = new State("Colorado","Denver",colorado);neighbors.push(["Arizona","New Mexico","Oklahoma","Kansas","Nebraska","Wyoming","Utah"]);var s7:State = new State("Connecticut","Hartford",connecticut);neighbors.push(["New York","Rhode Island","Massachusetts"]);var s8:State = new State("Delaware","Dover",delaware);neighbors.push(["New Jersey","Pennsylvania","Maryland"]);var s9:State = new State("Florida","Tallahassee",florida);neighbors.push(["Georgia","Alabama"]);var s10:State = new State("Georgia","Atlanta",georgia);neighbors.push(["Florida","Alabama","Tennessee","South Carolina","North Carolina"]);var s11:State = new State("Hawaii","Honolulu",hawaii);neighbors.push([]);var s12:State = new State("Idaho","Boise",idaho);neighbors.push(["Washington","Oregon","Nevada","Utah","Wyoming","Montana"]);var s13:State = new State("Illinois","Springfield",illinois);neighbors.push(["Wisconsin","Iowa","Indiana","Kentucky","Missouri"]);var s14:State = new State("Indiana","Indianapolis",indiana);neighbors.push(["Illinois","Michigan","Ohio","Kentucky"]);var s15:State = new State("Iowa","Des Moines",iowa);neighbors.push(["Missouri","Illinois","Wisconsin","Minnesota","South Dakota","Nebraska"]);var s16:State = new State("Kansas","Topeka",kansas);neighbors.push(["Oklahoma","Missouri","Nebraska","Colorado"]);var s17:State = new State("Kentucky","Frankfort",kentucky);neighbors.push(["Missouri","Tennessee","Virginia","West Virginia","Ohio","Indiana","Illinois"]);var s18:State = new State("Louisiana","Baton Rouge",louisiana);neighbors.push(["Mississippi","Arkansas","Texas"]);var s19:State = new State("Maine","Augusta",maine);neighbors.push(["New Hampshire"]);var s20:State = new State("Maryland","Annapolis",maryland);neighbors.push(["Delaware","Pennsylvania","Virginia","West Virginia"]);var s21:State = new State("Massachusetts","Boston",massachusetts);neighbors.push(["New Hampshire","Vermont","Connecticut","Rhode Island","New York"]);var s22:State = new State("Michigan","Lansing",michigan);neighbors.push(["Ohio","Indiana","Wisconsin"]);var s23:State = new State("Minnesota","St. Paul",minnesota);

neighbors.push(["North Dakota","South Dakota","Iowa","Wisconsin"]);var s24:State = new State("Mississippi","Jackson",mississippi);neighbors.push(["Alabama","Louisiana","Arkansas","Tennessee"]);var s25:State = new State("Missouri","Jefferson City",missouri);neighbors.push(["Arkansas","Oklahoma","Kansas","Nebraska","Iowa","Illinois","Kentucky","Tennessee"]);var s26:State = new State("Montana","Helena",montana);neighbors.push(["Idaho","Wyoming","North Dakota","South Dakota"]);var s27:State = new State("Nebraska","Lincoln",nebraska);neighbors.push(["Wyoming","Colorado","Kansas","Missouri","Iowa","South Dakota"]);var s28:State = new State("Nevada","Carson City",nevada);neighbors.push(["California","Oregon","Idaho","Utah","Arizona"]);var s29:State = new State("New Hampshire","Concord",newhampshire);neighbors.push(["Vermont","Massachusetts","Maine"]);var s30:State = new State("New Jersey","Trenton",newjersey);neighbors.push(["Pennsylvania","Delaware","New York"]);var s31:State = new State("New Mexico","Santa Fe",newmexico);neighbors.push(["Texas","Arizona","Colorado","Utah","Oklahoma"]);var s32:State = new State("New York","Albany",newyork);neighbors.push(["Vermont","Massachusetts","Connecticut","New Jersey","Pennsylvania"]);var s33:State = new State("North Carolina","Raleigh",northcarolina);neighbors.push(["South Carolina","Georgia","Tennessee","Virginia"]);var s34:State = new State("North Dakota","Bismarck",northdakota);neighbors.push(["Minnesota","South Dakota","Montana"]);var s35:State = new State("Ohio","Columbus",ohio);neighbors.push(["Michigan","Indiana","Pennsylvania","West Virginia","Kentucky"]);var s36:State = new State("Oklahoma","Oklahoma City",oklahoma);neighbors.push(["Texas","New Mexico","Colorado","Kansas","Missouri","Arkansas"]);var s37:State = new State("Oregon","Salem",oregon);neighbors.push(["Washington","Idaho","Nevada","California"]);var s38:State = new State("Pennsylvania","Harrisburg",pennsylvania);neighbors.push(["New York","New Jersey","Delaware","Maryland","West Virginia","Ohio"]);var s39:State = new State("Rhode Island","Providence",rhodeisland);neighbors.push(["Connecticut","Massachusetts"]);var s40:State = new State("South Carolina","Columbia",southcarolina);neighbors.push(["Georgia","North Carolina"]);var s41:State = new State("South Dakota","Pierre",southdakota);neighbors.push(["Iowa","Minnesota","North Dakota","Montana","Wyoming","Nebraska"]);var s42:State = new State("Tennessee","Nashville",tennessee);neighbors.push(["Mississippi","Alabama","Georgia","North Carolina","Virginia","Kentucky","Missouri","Arkansas"]);var s43:State = new State("Texas","Austin",texas);neighbors.push(["Louisiana","Arkansas","Oklahoma","New Mexico"]);

var s44:State = new State("Utah","Salt Lake City",utah);neighbors.push(["New Mexico","Arizona","Nevada","Idaho","Wyoming","Colorado"]);var s45:State = new State("Vermont","Montpelier",vermont);neighbors.push(["New York","New Hampshire","Massachusetts"]);var s46:State = new State("Virginia","Richmond",virginia);neighbors.push(["Maryland","West Virginia","Kentucky","Tennessee","North Carolina"]);var s47:State = new State("Washington","Olympia",washington);neighbors.push(["Idaho","Oregon"]);var s48:State = new State("West Virginia","Charleston",westvirginia);neighbors.push(["Pennsylvania","Maryland","Virginia","Kentucky","Ohio"]);var s49:State = new State("Wisconsin","Madison",wisconsin);neighbors.push(["Michigan","Minnesota","Iowa","Illinois"]);var s50:State = new State("Wyoming","Cheyenne",wyoming);neighbors.push(["Idaoho","Montana","South Dakota","Nebraska","Colorado","Utah"]);

State.setup(hook,neighbors);

NOTE: you can omit the setting up of neighbors and get the rest of the game working.

Building the State.as file

The State.as file contains the working code for the game. This code will work for any map.

Recall that static methods and variables mean that there is just one for the whole application. The other methods and variables are one for each object instance. So there is just one states array that holds all the states. In contrast, the variable statename exists for each State. There are two object methods: the constructor State and the function handleclick that detects that the movie clip instance representing the State was clicked on. All the other methods are class methods.

The setup method sets up the board, most specifically the radio buttons and a text field for input and 3 places for information for the player. The texts used in each of these were originally spread throughout the code. I then put them in variables. Finally, I include code that reads in the information from an XML file and replaces what is there. You can look at what is in the code to see the intent of the messages.

internal static var leadins:String = "Select type of question then click NEXT button ";

internal static var questiontexts:Array=["Find state","Find state with capital","Identify state", "Identify capital","List neighbors", "List neighbors (no map)", "Pick your own" ];

internal static var correctokwrong:Array = ["Correct","Okay","Wrong"]

internal static var nextlabel:String = "NEXT";internal static var moretexts:Array = [

" Now click what you named. ","Click on state named ","Click on state with capital ","Type name of highlighted state","Type capital of highlighted state","Type one at a time neighbors of ","Neighbors: ","Type one at a time neighbors of ","Type a state name then click on it in the map",". Type X when done."

];

There are 7 questions, represented by the array questiontexts that holds what will be the labels for the radio buttons and the array methods

internal static var methods:Array=[askstate, askcapital, namestate, namecapital, listneighbors, listneighborsnomap, pick];

These are the names of the methods that set up the handling for the questions. In most cases (all but the last, pick), this includes using Math.random to choose a State at random on which to base the question. The questiontexts and the methods arrays are what are called parallel structures. IF YOU WANT TO ADD ANOTHER QUESTION: you need to add an element to both arrays. This would mean adding to the xml file, also, to get the appropriate texts. You would need to modify and add to one or both of the handleclick and the getinput methods. The handleclick is the handler for clicking on a state and the getinput is the handler for typing in and clicking the enter key for the input text field named ans.

The handling of the interface after set up and during play can be thought of as being in three time periods: waiting for a radio button to be clicked determining the type of question, setting up the question, and then handling the player response. The responses are either clicking somewhere on the map or filling in the text input field. The methods that detect responses use various Boolean variables to determine which type of question is being asked or, to put it more precisely, how to check the answer. Note: I made this a rather loose design: a player can try again after getting something wrong (or after getting something correct). A player can call for a new question (click on the NEXT button or select a different one of the radio buttons and click on the NEXT button) even before answering a question. I saw this as more of a way to test myself on the states than as a

contest. The code would need to be changed to make the game strict. I did make the find neighbors puzzle produce the complete list of neighboring states if the player clicked the X prematurely.

General comments on [my] jargon: A Boolean value, that is, one that can be true or false, is often called a flag. Something constructed using a class definition is called an object. The method named State is termed the constructor method for the class State. In Flash, movie clip instances also are objects. There also are Radiobutton objects, Button objects, etc. These things also may be called object instances. It is important to make sure the movie clip instances are given names. In this application, there are State objects. They are constructed by calls to the State method passing in the state name, the capital name and the movie clip instance name. Each constructed State will contain a reference to a movie clip instance. The reference is in the object variable mclip. Note that the use of the variable names statename, states, etc. are not shown to the player, so if you re-do this game (use the State.as file, but make your own .fla file) with countries and change the texts.xml file, everything should work. HOWEVER, do note that the coding assumes that a player is asked to use X to indicate he/she is through with naming neighbors.

package statepuzzle{ package openimport flash.text.*;import flash.events.*;import fl.events.*;import flash.display.*;import fl.controls.*;import fl.events.ComponentEvent;import flash.net.*;public class State { class definition open

internal static var states:Array=[]; array of all state objects constructed

internal static var hook:MovieClip; used for displaying the interface

internal static var ins:TextField; instructionsinternal static var ans:TextInput; player inputinternal static var work:TextField; where the neighbors will gointernal static var results:TextField; correct or wrong or okayinternal static var rbg:RadioButtonGroup=new

RadioButtonGroup("gp");The group for the radio buttons (holding the questions)

internal static var rbystart:int=62; for vertical placement of radio buttons (relationship to the hook object passed in)

internal static var borderq:Boolean; indicates if this is a neighbor question

internal static var pickq:Boolean; indicates if this is a pick your own question

internal static var bordernomapq:Boolean; indicates if this is a neighbor with no map question

internal static var myXML:XML = new XML(); For the texts.xml fileinternal static var XML_URL:String = "texts.xml"; name of fileinternal static var myXMLURL:URLRequest = new

URLRequest(XML_URL);the request to fetch the file

internal static var myLoader:URLLoader = new URLLoader();

the URLLoader object

internal static var leadins:String = "Select type of question then click NEXT button ";

The initial message

internal static var questiontexts:Array=["Find state","Find state with capital","Identify state", "Identify capital","List neighbors", "List neighbors (no map)", "Pick your own" ];

Texts for the questions

internal static var correctokwrong:Array = ["Correct","Okay","Wrong"]

Texts for the results

internal static var nextlabel:String = "NEXT"; Text for the next question button label

internal static var moretexts:Array = [ Miscellaneous texts" Now click what you named. ","Click on state with capital ","Click on state with capital ","Type name of highlighted state","Type capital of highlighted state","Type one at a time neighbors of ","Neighbors: ","Type one at a time neighbors of ",

"Type a state name then click on it in the map",". Type X when done."

];internal static var

methods:Array=[askstate,askcapital,namestate, namecapital,listneighbors, listneighborsnomap,pick];

Holds the method names corresponding to the questions indicated by the radio buttons

internal static var nextbtn:Button=new Button; Part of interfaceinternal static var answertoquestion:State; Used for certain questionsinternal static var textanswer:String=""; Used for certain questionsinternal static var bd:Array; Used for the neighbor

questionsinternal static var borders:Array; Holds the neighbor information

(set in setup)internal static var n:int; Set to be number of state

objects constructed. This is to save calling states.length again and again.The next 3 are the 3 object variables: one per state

constructedinternal var statename:String; name of stateinternal var capital:String; name of state capitalinternal var mclip:MovieClip; the movie clip symbol that

shows the state

public function State(sn:String,cn:String,mc:MovieClip):void {

Constructor function

statename=sn; Sets object variable for the state name

capital=cn; …. the capital namemclip=mc; …. the movie clip symbol

mclip.addEventListener(MouseEvent.CLICK,handleclick);sets up event handling for the mouse click on this state

states.push(this); add this state to the states arrayn = states.length; re-sets n so it will hold

states.length. } close the State method

public static function setup(ahook:MovieClip,bd:Array):void {

Class method (just one) to do the setting up of the interface (radio buttons, next button, text fields, input text field)

borders=bd; Set borders datahook=ahook; Set hookins=new TextField ; Create new text fieldans=new TextInput ; Create new text input fieldwork=new TextField ; Create new text fieldresults=new TextField ; Create new text fieldhook.addChild(ins); Add to display list, using hook.

this also positions each object in terms of hook

hook.addChild(ans);hook.addChild(work);hook.addChild(results);ins.width=430; reset widthswork.width=630;ans.width=200;results.width=200;ans.x=640; move overwork.y=40; move downresults.x=640; move overresults.y=40; …. and down

ans.text=""; Put in initial text of blanks.

work.text="";results.text="";

ans.addEventListener(ComponentEvent.ENTER,getinput);Set up event handling for the text input field

myLoader.load(myXMLURL); Start loading of the xml file

myLoader.addEventListener(Event.COMPLETE,finishsetup);Set up event handling for the xml file. NOTICE: no error handling

} Close setup method

internal static function finishsetup(ev) { Method that finishes the setup. This is the handler for the xml file complete loading

var i:int; Used for iterationsmyXML=XML(myLoader.data); Creates an XML object.

NOTICE: no error handling such as try and catch.

//trace("myXML is "+myXML); You can uncomment this line to see the XML file

leadins = myXML.leadins; Set this value and ins.text= leadins; … use it immediately. This is

done to make the coding consistent. The leadins value does not need to be saved.

nextlabel = myXML.nextlabel; Set this value and nextbtn.label=nextlabel; … use it immediately for the

button label. This is to make the coding consistent.

correctokwrong[0] = myXML.correct; Set values used for results: the good value

correctokwrong[1] = myXML.okay; the okay valuecorrectokwrong[2] = myXML.wrong; the wrong/bad valuei=0; Because this is a for each, the

iteration for questiontexts needs to be done explicitly

for each (var qt:XML in myXML.qtext) { Sets successive elements of the questiontexts array

questiontexts[i] = qt[0]; Set the value from the xml i++; increment i

} close for eachfor (i=0; i < questiontexts.length; i++) { This iteration builds the

RadioButton objects, positions them, sets the label

var rb:RadioButton=new RadioButton; create a new radiobutton

rb.group=rbg; associate it with the grouprb.x=10; position it horizontallyrb.y=rbystart; position verticallyrbystart+= 25; … then increase rbystart for

the next onerb.setSize(200,30); set the sizerb.label=questiontexts[i]; get the label from questiontextsrb.value=i; set the valuehook.addChild(rb); display by adding to hook

} close for loop

hook.addChild(nextbtn); display the buttonnextbtn.x=200; position the button horizontallynextbtn.y=rbystart; and vertically below the last

radio buttonnextbtn.addEventListener(MouseEvent.CLICK,getquestion); Event handling is done for the

next button (not for clicking on the radio buttons)

} close the finishsetup method

internal static function getquestion(ev):void { method for handling clicking on the button

var q:int=Number(rbg.selectedData); picks up the data that will indicate which question

methods[q](); Now use that number to invoke a specific method

} close getquestion method

internal function handleclick(ev) { handleclick method for handling (responding to) the event of clicking on a state

if (pickq) { Determination done differently depending on if this is a pick your own or one of the find questions

if (this.statename==ans.text) { (pick your own) does the name of this state match what the player typed into the ans field

results.text = correctokwrong[0]; …good} else {results.text = correctokwrong[2]; … bad}

} else if (this == answertoquestion) { Not a pick your own, so use the answertoquestion data to compare with this

results.text=correctokwrong[0]; … good} else {

results.text=correctokwrong[2]; … bad}

} close method

internal static function getinput(ev) { class method getinput. Handles the player typing and then clicking on the enter key.

if (pickq) { If this is a pick your ownins.text=moretexts[0]; output a message

} else if (borderq) { if one of the two neighbor questions

if (ans.text == "X") { is the player saying it is all done?

if (bd.length == 0) { If this is true,

results.text=correctokwrong[0];…. good

} else { if not

results.text=correctokwrong[2];… bad

for (var j:int = 0; j<bd.length; j++) {

and then output the remaining neighboring states

work.appendText(" "+bd[j]);append to the work field text

} close iteration} close the else

} else { if the player didn't type Xif (bd.length == 0) { but there were no more

neighbors

results.text=correctokwrong[2];…. indicate bad answer

} else { else…var nf:Boolean = true; will search to see if the player

did put in a valid neighbor. The nf variable stands for not found

for (var i:int=0; i<bd.length; i++) { iterate over the bd arrayif (bd[i]==ans.text) { is it on the list?

nf = false; flip the nf flag

results.text = correctokwrong[1];output the "okay" result. This is meant to convey: okay so far.

work.appendText(" "+ans.text);Add the just named state to the work area

if (bordernomapq) { If this is the name neighbors without benefit of the map, will find the corresponding mclip and make it visible

for (var k:int=0; k<n; k++) {iterate over all the states

if (states[k].statename==ans.text) {if this is the one just named

states[k].mclip.alpha = 1;make it visible (set alpha to 1)

break;break out of for loop

}close if

} close for k loop} close if bordernomapq

ans.text= "";erase input area

bd.splice(i,1);//remove item foundremove from bd

} close if bd[i]==ans.text} close for i loop

if (nf) { Was the answer correct (was it found on bd)?

results.text = correctokwrong[2]; not yet found: output bad} close if

} close } not a X

} else if (textanswer == ans.text) { not a neighbor questionresults.text=correctokwrong[0]; output … good

} else { not right answerresults.text=correctokwrong[2]; … bad

} close else} close method

internal static function askstate():void { askstate method for setting up to identify a random state

var ch:int=Math.floor(Math.random() * n); Get random valueanswertoquestion=states[ch]; Set up for checkingtextanswer=""; set this value to blankfor (var i=0; i < n; i++) { Iterate over all the states ...

states[i].mclip.alpha=1; ... to make them all visible} close for

ins.text=moretexts[1] + answertoquestion.statename; Display the question

ans.text=""; blank out inputresults.text=""; resultspickq = false; set flag to false

} close method

internal static function askcapital():void { askcapital method for setting up question using capital

var ch:int=Math.floor(Math.random() * n); get random valueanswertoquestion=states[ch]; set up for checkingtextanswer=""; set this to blankfor (var i=0; i < n; i++) { Iterate over all the states

states[i].mclip.alpha=1; ... to make them all visible} close for

ins.text=moretexts[2] + answertoquestion.capital; display the questionans.text=""; blank out inputresults.text=""; … resultspickq = false; set flag to false

} close method

internal static function namestate():void { namestate methodvar ch:int=Math.floor(Math.random() * n); Get random valuefor (var i=0; i < n; i++) { Now iterate

states[i].mclip.alpha=.3; ... to make all states faded} close forstates[ch].mclip.alpha=1; make the chosen state be full

alphatextanswer=states[ch].statename; set up the answerins.text=moretexts[3]; display questionans.text=""; blank the input fieldresults.text=""; resultsborderq=false; set flag to falsepickq = false; set flag to false

} close method

internal static function namecapital():void { namecapital method for setting up a question on the capital

var ch:int=Math.floor(Math.random() * n); Get random valuefor (var i=0; i < n; i++) { Now iterate

states[i].mclip.alpha=.3; ... to make all states faded} close forstates[ch].mclip.alpha=1; Make the chosen state be full

alphatextanswer=states[ch].capital; set up the answerins.text=moretexts[4]; display questionans.text=""; blank the input field

results.text=""; resultsborderq=false; set flag to falsepickq = false; set flag to false

} close method

internal static function listneighbors():void { listneighbors method for setting up question on neighbors

for (var i=0; i < n; i++) { Iteratestates[i].mclip.alpha=1; .. to make all states fully

visible} close forvar ch:int=Math.floor(Math.random() * n); pick a random state

ins.text=moretexts[5] + states[ch].statename + moretexts[9]; display questionborderq=true; set this flag to truebordernomapq = false; set this flag to falsepickq= false; set flag to falsebd=borders[ch]; save the borders (neighbors)

for this choiceresults.text=""; blank resultsans.text = ""; blank inputwork.text = moretexts[6]; display question

} close method

internal static function listneighborsnomap():void { listneighborsnomap method for handling the question about neighbors that displays map with all the other states not visible

for (var i=0; i < n; i++) { Iteratestates[i].mclip.alpha=0; make all states not visible,

that is, alpha of zero} close forvar ch:int=Math.floor(Math.random() * n); choose a state

ins.text=moretexts[7] + states[ch].statename + moretexts[9]; display question (constructed using two texts with state name in the middle)

borderq=true; set flag to truebordernomapq = true; set this flag also to truepickq= false; set flag to falsebd=borders[ch]; save the borders (neighbors)

for this choicestates[ch].mclip.alpha = 1; make chose state fully visibleresults.text=""; blank out resultsans.text = ""; blank out input field

work.text = moretexts[6]; display question} close method

internal static function pick():void { pick method for the do-it-yourself question

for (var i=0; i < n; i++) { Iteratestates[i].mclip.alpha=1; make sure each state is fully

visible} close forins.text=moretexts[8]; display questionans.text=""; blank out input fieldresults.text=""; resultswork.text=""; work areapickq=true; set flag to trueborderq = false; set flag to false

} close pick method} close class definition

} close package

Remember to save this file (it MUST be named State.as) in a folder named statepuzzle in another folder (I make mine as3) at the top of the drive for the PC and in the same folder as the .fla file for the MAC.

Building the texts.xml file

The texts.xml file could serve to make the messages appropriate for a map of countries and capitals or in another language. The messages do assume a similarity to English grammar and word order. For example, the phrase Click on state with capital is to be followed by the name of the state. You can change the word state to country but if the word order doesn't work to have the state/country name follow, the message will not work. Note also that the player is asked to type X when done naming neighbors.

The file here is essentially the same as the original texts. There are some changes I put in to convince myself that the code was working—that the xml file was being used for the messages. This file as listed below may not be the one in use on the website.

<?xml version="1.0" encoding="utf-8"?><texts><nextlabel>NEXT</nextlabel><qtext>Find state</qtext><qtext>Find state with capital</qtext><qtext>Identify state</qtext><qtext>Identify capital</qtext><qtext>List neighbors</qtext><qtext>List neighbors (no map)</qtext>

<qtext>Pick your own</qtext><leadins> Select what type question you want. Then click NEXT button.</leadins><correct>CORRECT!</correct><okay>Okay</okay><wrong>WRONG (sigh)</wrong><mtext>Now click what you named. </mtext><mtext>Click on state with capital </mtext><mtext>Click on state with capital </mtext><mtext>Type name of highlighted state.</mtext><mtext>Type capital of highlighted state.</mtext><mtext>Type one at a time neighbors of </mtext><mtext>Neighbors: </mtext><mtext>Type one at a time neighbors of </mtext><mtext>Type a state name then click on it in the map.</mtext><mtext>. Type X when all done.</mtext></texts>

Remember that this file is accessed at runtime, so it must be uploaded to the same folder on the server as the .swf and .html files.

Opportunities for improvement

Error handling for the xml file, including using the text already in the code if there is no file or the file is not proper xml.

Error handling for typing in a non-existent state for the pick your own question.

Option for the player to choose among xml files, appropriate for different languages.

Some tolerance on mis-spelling, perhaps constructing some sort of closest match if nothing found.

NOTE: I made changes to disregard case. For example, if (textanswer.toLowerCase() == ans.text.toLowerCase()) I also changed to allow X or x to signal termination of a list and if the player did not enter all the neighbor states, I put the remainder in uppercase:

for (var j:int = 0; j<bd.length; j++) {work.appendText(" "+bd[j].toUpperCase());

}

This may be too forgiving.

Optional use of 2 letter state abbreviations.

Add questions (in one or both directions) on the 2 letter abbreviations.

Add a 'give up option'.

Design and implement a strict-mode with no or restricted chances to try again. When this is done, add scoring.

???