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("
" + - countries.Results[countryCode].Name + ": " + - ((countries.Results[countryCode].Capital) ? countries.Results[countryCode].Capital.Name : "No Capital") + "

") + countries[countryCode].Name + ": " + + ((countries[countryCode].Capital) ? countries[countryCode].Capital.Name : "No Capital") + "
") .append(flag); } @@ -35,4 +44,26 @@ $(function(){ function toggleInfo(){ $("img, div").toggleClass("slide"); } + + // return a countryCode from the array using an index + var getCountryCodeFromIndex = function(countryIndex) { + return countryCodes[countryIndex].toUpperCase(); // pick the next country code from the list (which is shuffled) + }; + + // return the countryCode used in the hash on the URL + var getCountryCodeFromHash = function() { + var countryCode = location.hash; + if (countryCode.length > 0) { + countryCode = countryCode.slice(1,3).toUpperCase(); // Slice off the hash and substring to 2 chars + return (countryCodes.indexOf(countryCode) > 0) ? countryCode : false; // If it exists in the list of countryCodes then return it + } + return false; + }; + + if (window.addEventListener) { + window.addEventListener("hashchange", showFlag, false); + } + else if (window.attachEvent) { + window.attachEvent("onhashchange", showFlag); + } }); \ No newline at end of file