Merge pull request #5 from jbate/gh-pages

Load country from the URL hash
jbate · Jan 17, 2014 · 740aae2 · 740aae2
2 parents 9bb8cc1 + c1a006e
commit 740aae2
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 11 deletions.
diff --git 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
@@ -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 = $("<img/>", {
             "src": "svg/country-4x3/" + countryCode.toLowerCase() + ".svg"
@@ -26,13 +35,35 @@ $(function(){
         // Add to DOM
         $("body")
         .html("<div>" + 
-            countries.Results[countryCode].Name + ": " + 
-            ((countries.Results[countryCode].Capital) ? countries.Results[countryCode].Capital.Name : "No Capital") + "</div><br />")
+            countries[countryCode].Name + ": " + 
+            ((countries[countryCode].Capital) ? countries[countryCode].Capital.Name : "No Capital") + "</div><br />")
         .append(flag);  
     }
 
     // toggle the showing of answer
     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);
+    }
 });