1 files changed, 116 insertions, 0 deletions
diff --git a/examples/Know-USA/js/lesson.js b/examples/Know-USA/js/lesson.js
new file mode 100755
index 0000000..d289e53
--- /dev/null
+++ b/examples/Know-USA/js/lesson.js
@@ -0,0 +1,116 @@
+$(document).ready(function(){
+
+	//Program constants
+	var SVG_MAP = document.getElementById('mysvg');
+	var MAX_SCREEN_X = 1200, MAX_SCREEN_Y = 900;
+
+	//Game Control
+	var isActive = true;
+	var question = [];
+	var answeredCorrect = false;
+
+    var colors = [
+     "pink", "red", "orange", "brown", "yellow", "green", "cyan",
+     "blue", "violet",
+    ];
+    var randomColor = function()
+    {
+        return colors[Math.floor(Math.random() * colors.length)];
+    }
+
+	// You can't access any properties of the svg document 
+	// until it has loaded
+	$('#mysvg').bind('load', function() {
+	    var svgMapDoc = SVG_MAP.getSVGDocument();
+
+        var STATES = $(svgMapDoc).find('.state');
+
+        var getState = function(name) {  // returns the svg group element matching the given state
+            return STATES.filter(function() { return $(this).attr('id') === name });
+        }
+        var names = $.map(STATES, function(i) { return $(i).attr('id'); });
+        var questions = names;
+
+	    //utility functions
+	    var scaleView = function (svgElem, width, height) {
+		var newRatio = 1;
+		var xRatio = width/MAX_SCREEN_X;
+		var yRatio = height/MAX_SCREEN_Y;
+
+		//get the smallest ratio
+		newRatio = xRatio > yRatio ? yRatio : xRatio;
+
+		if (newRatio < 1) {
+		    svgElem.currentScale = newRatio - 0.05;
+		    return newRatio;	
+		} else {
+		    //do nothing
+		    return newRatio;
+		}
+	    };
+
+	    var hideAnswers = function (svgRoot) {
+		$('.text', svgRoot).attr('display', 'none');
+	    };
+
+	    scaleView(svgMapDoc.documentElement, window.innerWidth, 
+		      window.innerHeight);
+
+	    hideAnswers(svgMapDoc);
+
+	    //gameplay functions
+	    var changeQuestion = function (questions){
+            var index = Math.round(Math.random() * (questions.length - 1));
+            var question = questions[index];
+            
+            //drop the question used from the list of questions
+            if (index === 0 ){
+                questions.shift();
+            } else {
+                questions.splice(index, 1)
+            }
+            
+            return question;
+	    };
+
+        // questions
+	    var askQuestion = function (questions) {
+
+            question = changeQuestion(questions);		
+
+            if (question) {
+                $('#question').text("Where is " + question + "?");
+            } else {
+                $('#question').text("Congratulations!  You have found every state!");
+            }
+
+	    };
+
+        STATES.click(function (event) {
+            $this = $(this);
+            if(isActive){
+                if ( question.toLowerCase() === $this.attr('id').toLowerCase()){
+                    $this.animate({svgFill: randomColor()}, 100);
+                    $('#answer').text("Correct! You found " + question + ".");
+                    $('.text.' + question.dept, svgMapDoc).attr('display', '');
+                    var timerID = setTimeout(function() {
+                        $('#answer').text('');
+                        askQuestion(questions);
+                    }, 3000);
+                } else {
+                    $('#answer').text("Incorrect. Please try again.");
+                }
+            } else {
+                // do nothing if game is not active
+            }
+        });
+	    
+	    askQuestion(questions);
+
+	    
+	    
+
+	});
+
+});
+