Interactive USA States Quiz

Do you know the location of the 50 states of the USA country? Test yourself how fast can you pin with this simple interactive quiz played on webbrowser.

A state name is showed at top and you must clic that state on the map. If success, the state is painted with a random color, and your score it is increased. Ever time you clic on the wrong state, it increases the fails counter and decreases your percentage. Also it shows a timer.

Wanna play? Clic here

The game it is made in javascript (Jquery library is used).

This projects has the following files:

• index.html
• header.html (links to css and javascript files)
• functions.js (the logic of the application)
• mapa.js (The map of the USA country)

What if I want to make this quiz with another map? No problem, the library contains maps for many of the counties of the five continents. Clic here to display the list of all the maps.

1. Download the JS file of the desired map.
2. Replace the object array with the states codes and the states names. In this project, the usa_states array it is:

estados_usa = [{code:"US-VA",state:"virginia"},{code:"US-PA",state:"Pennsylvania"},{code:"US-TN",state:"Tennessee"},{code:"US-WV",state:"West Virginia"},{code:"US-NV",state:"Nevada"},{code:"US-TX",state:"Texas"},{code:"US-NH",state:"New Hampshire"},{code:"US-NY",state:"New York"},{code:"US-HI",state:"Hawaii"},{code:"US-VT",state:"Vermont"},{code:"US-NM",state:"New Mexico"},{code:"US-NC",state:"North Carolina"},{code:"US-ND",state:"North Dakota"},{code:"US-NE",state:"Nebraska"},{code:"US-LA",state:"Louisiana"},{code:"US-SD",state:"South Dakota"},{code:"US-DC",state:"District of Columbia"},{code:"US-DE",state:"Delaware"},{code:"US-FL",state:"Florida"},{code:"US-CT",state:"Connecticut"},{code:"US-WA",state:"Washington"},{code:"US-KS",state:"Kansas"},{code:"US-WI",state:"Wisconsin"},{code:"US-OR",state:"Oregon"},{code:"US-KY",state:"Kentucky"},{code:"US-MA",state:"Maine"},{code:"US-OH",state:"Ohio"},{code:"US-OK",state:"Oklahoma"},{code:"US-ID",state:"Idaho"},{code:"US-WY",state:"Wyoming"},{code:"US-UT",state:"Utah"},{code:"US-IN",state:"Indiana"},{code:"US-IL",state:"Illinosis"},{code:"US-AK",state:"Alaska"},{code:"US-NJ",state:"New Jersey"},{code:"US-CO",state:"Colorado"},{code:"US-MD",state:"Maryland"},{code:"US-MA",state:"Massachusetts"},{code:"US-AL",state:"Alabama"},{code:"US-MO",state:"Missouri"},{code:"US-MN",state:"Minnesota"},{code:"US-CA",state:"California"},{code:"US-IA",state:"Iowa"},{code:"US-MI",state:"Michigan"},{code:"US-GA",state:"Georgia"},{code:"US-AZ",state:"Arizona"},{code:"US-MT",state:"Montana"},{code:"US-MS",state:"Mississippi"},{code:"US-SC",state:"South Carolina"},{code:"US-RI",state:"Rhode Island"},{code:"US-AR",state:"Arkansas"}]; <br>

For instance, if you want to place the Canada map, the array must be something like:

states_canada = [{code:"CA-NT",state:"Northwest Territories"},{code:"CA-NU",state:"Nuvanut"},{code:"CA-QC",state:"Quebec"}]...;3

3. Replace the switch statement on the funtions.js file for the

switch(stateCode) { case 'US-VA': mapa.series.regions[0].setValues({'US-VA':color}); break; case 'US-PA': mapa.series.regions[0].setValues({'US-PA':color}); break; //..... and so on... } For Canada: switch(stateCode) { case 'CA-NT': mapa.series.regions[0].setValues({'CA-NT':color}); break; case 'CA-NU': mapa.series.regions[0].setValues({'CA-NU':color}); break; case 'CA-QC': mapa.series.regions[0].setValues({'CA-QC':color}); break; //and so on... } End

At the beginning of the quiz, the states names are randomly shuffled.

function randomStates(){ estados_usa = _.shuffle(estados_usa); }

For this, I use the lodash library.

Later, the state name it is choosed and displayed on the top of the screen. The states names are not duplicated.

Clic here to download the files.

Use a webbrowser like mozilla, chrome, opera for execute the application.

And, enjoy. :)