diff --git a/README.md b/README.md index 8a681db..c8b90e5 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,23 @@ flag-test ========= +It's simple. We show you the flag, you guess the country. -Guess the country from the flag shown. +Flash cards for budding vexillologists if you will. -http://jbate.github.io/flag-test/ +Try it out! http://jbate.github.io/flag-test/ How to use ---------- - 1. Page loads JSON list of countries 2. Tap the flag to reveal the answer (and capital city) 3. Double-click to show a new flag +Extras +------ +Load a specific country's flag by appending their country code with a hash (`#`) to the URL. + +So to view the flag for the UK, do this: http://jbate.github.io/flag-test/#gb + Thanks ------ Kudos to Koppi for the SVG flag collection: diff --git a/flag-test.js b/flag-test.js index 6b7a775..ff0709a 100644 --- a/flag-test.js +++ b/flag-test.js @@ -3,15 +3,24 @@ $(function(){ countries, countryCodes; $.getJSON("iso-3166-1.json", function(data){ - countries = data; - countryCodes = Object.keys(countries.Results); // get the country codes + countries = data.Results; + countryCodes = Object.keys(countries); // get the country codes countryCodes.sort(function() { return 0.5 - Math.random() }); // shuffle - showFlag(countryIndex); // show new flag test + showFlag(getCountryCodeFromHash() || countryIndex); // show new flag test (either from hash or using index) }); - - function showFlag(countryIndex){ - var countryCode = countryCodes[countryIndex]; // pick the next country code from the list (which is shuffled) + function showFlag(countryCode){ + // If we don't have an index number, try the hash + if(isNaN(countryCode)){ + countryCode = getCountryCodeFromHash(); + // If we still don't have a countryCode, exit + if(!countryCode){ + return false; + } + } else { + countryCode = getCountryCodeFromIndex(countryCode); + } + // Create flag var flag = $("", { "src": "svg/country-4x3/" + countryCode.toLowerCase() + ".svg" @@ -26,8 +35,8 @@ $(function(){ // Add to DOM $("body") .html("