diff options
| -rw-r--r-- | examples/Know-USA/css/lesson.css | 6 | ||||
| -rwxr-xr-x | examples/Know-USA/index.html | 4 | ||||
| -rwxr-xr-x | examples/Know-USA/js/lesson.js | 184 |
3 files changed, 166 insertions, 28 deletions
diff --git a/examples/Know-USA/css/lesson.css b/examples/Know-USA/css/lesson.css index 09fac34..1e53053 100644 --- a/examples/Know-USA/css/lesson.css +++ b/examples/Know-USA/css/lesson.css @@ -1,13 +1,13 @@ #map{ - width: 60%; + width: 50%; height: 100%; display: inline; float: left; } #questionArea{ - width: 40%; + width: 50%; height: 100%; display: inline; - float: left; + float: right; } diff --git a/examples/Know-USA/index.html b/examples/Know-USA/index.html index f4d44c6..aa73e5b 100755 --- a/examples/Know-USA/index.html +++ b/examples/Know-USA/index.html @@ -17,8 +17,8 @@ </head> <body> - <div id="map"> - <embed id="mysvg" src="assets/generic/images/usa.svg" width="820" height="900"/> + <div id="map" height='100%' width='100%'> + <embed id="mysvg" src="assets/generic/images/usa.svg"/> </div> <div id="questionArea"> <div id="buttons"> diff --git a/examples/Know-USA/js/lesson.js b/examples/Know-USA/js/lesson.js index d289e53..029b5aa 100755 --- a/examples/Know-USA/js/lesson.js +++ b/examples/Know-USA/js/lesson.js @@ -2,17 +2,172 @@ $(document).ready(function(){ //Program constants var SVG_MAP = document.getElementById('mysvg'); - var MAX_SCREEN_X = 1200, MAX_SCREEN_Y = 900; + // disable scrolling + document.body.style.overflow = 'hidden'; //Game Control var isActive = true; var question = []; var answeredCorrect = false; + + var colors = [ + "aliceblue", + "antiquewhite", + "aqua", + "aquamarine", + "azure", + "beige", + "bisque", + "black", + "blanchedalmond", + "blue", + "blueviolet", + "brown", + "burlywood", + "cadetblue", + "chartreuse", + "chocolate", + "coral", + "cornflowerblue", + "cornsilk", + "crimson", + "cyan", + "darkblue", + "darkcyan", + "darkgoldenrod", + "darkgray", + "darkgreen", + "darkgrey", + "darkkhaki", + "darkmagenta", + "darkolivegreen", + "darkorange", + "darkorchid", + "darkred", + "darksalmon", + "darkseagreen", + "darkslateblue", + "darkslategray", + "darkslategrey", + "darkturquoise", + "darkviolet", + "deeppink", + "deepskyblue", + "dimgray", + "dimgrey", + "dodgerblue", + "firebrick", + "floralwhite", + "forestgreen", + "fuchsia", + "gainsboro", + "ghostwhite", + "gold", + "goldenrod", + "gray", + "grey", + "green", + "greenyellow", + "honeydew", + "hotpink", + "indianred", + "indigo", + "ivory", + "khaki", + "lavender", + "lavenderblush", + "lawngreen", + "lemonchiffon", + "lightblue", + "lightcoral", + "lightcyan", + "lightgoldenrodyellow", + "lightgray", + "lightgreen", + "lightgrey", + "lightpink", + "lightsalmon", + "lightseagreen", + "lightskyblue", + "lightslategray", + "lightslategrey", + "lightsteelblue", + "lightyellow", + "lime", + "limegreen", + "linen", + "magenta", + "maroon", + "mediumaquamarine", + "mediumblue", + "mediumorchid", + "mediumpurple", + "mediumseagreen", + "mediumslateblue", + "mediumspringgreen", + "mediumturquoise", + "mediumvioletred", + "midnightblue", + "mintcream", + "mistyrose", + "moccasin", + "navajowhite", + "navy", + "oldlace", + "olive", + "olivedrab", + "orange", + "orangered", + "orchid", + "palegoldenrod", + "palegreen", + "paleturquoise", + "palevioletred", + "papayawhip", + "peachpuff", + "peru", + "pink", + "plum", + "powderblue", + "purple", + "red", + "rosybrown", + "royalblue", + "saddlebrown", + "salmon", + "sandybrown", + "seagreen", + "seashell", + "sienna", + "silver", + "skyblue", + "slateblue", + "slategray", + "slategrey", + "snow", + "springgreen", + "steelblue", + "tan", + "teal", + "thistle", + "tomato", + "turquoise", + "violet", + "wheat", + "white", + "whitesmoke", + "yellow", + "yellowgreen", + ]; + +/* + * this is just a simpler color list than the one above var colors = [ "pink", "red", "orange", "brown", "yellow", "green", "cyan", "blue", "violet", ]; + */ var randomColor = function() { return colors[Math.floor(Math.random() * colors.length)]; @@ -31,30 +186,11 @@ $(document).ready(function(){ 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'); + $('.text', svgRoot).attr('display', 'none'); }; - scaleView(svgMapDoc.documentElement, window.innerWidth, - window.innerHeight); + svgMapDoc.documentElement.currentScale = 0.9; hideAnswers(svgMapDoc); @@ -90,7 +226,9 @@ $(document).ready(function(){ $this = $(this); if(isActive){ if ( question.toLowerCase() === $this.attr('id').toLowerCase()){ - $this.animate({svgFill: randomColor()}, 100); + var color = randomColor(); + colors.splice(colors.indexOf(color), 1); // remove the color + $this.animate({svgFill: color}, 1000); $('#answer').text("Correct! You found " + question + "."); $('.text.' + question.dept, svgMapDoc).attr('display', ''); var timerID = setTimeout(function() { |