diff options
| author | Erik Garrison <erik@hypervolu.me> | 2009-11-18 21:26:57 (GMT) |
|---|---|---|
| committer | Erik Garrison <erik@hypervolu.me> | 2009-11-18 21:26:57 (GMT) |
| commit | 5b7f4281a347e9dc9b6a0dd82f06a28fd5d7d51b (patch) | |
| tree | be96bfbffd44b9f6080c416810151cb26a27c8a5 | |
| parent | d352293fa9073b10deaaa6cdb55232c20665db7d (diff) | |
Made the map bigger (full screen basically). Should work on any UA, not
resizing automatically with the window. Minor tweaks. More colors.
Colors are only used once on the map (we choose from ~150).
| -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() { |