From f0066c10b4c1983c745f01e8794ed029f2e2c654 Mon Sep 17 00:00:00 2001 From: Bryan Berry Date: Mon, 02 Nov 2009 20:07:34 +0000 Subject: now have both canvas and svg versions of adding_up --- diff --git a/examples/Conozco-Uruguay b/examples/Conozco-Uruguay new file mode 160000 +Subproject c81a6fba4aa94662019013a857c8bb875e15fc8 diff --git a/examples/adding_up_to_10/css/knavbar.css b/examples/adding_up_to_10_canvas/css/knavbar.css index 26e3896..26e3896 100755 --- a/examples/adding_up_to_10/css/knavbar.css +++ b/examples/adding_up_to_10_canvas/css/knavbar.css diff --git a/examples/adding_up_to_10/css/lesson.css b/examples/adding_up_to_10_canvas/css/lesson.css index 5147cfa..5147cfa 100755 --- a/examples/adding_up_to_10/css/lesson.css +++ b/examples/adding_up_to_10_canvas/css/lesson.css diff --git a/examples/adding_up_to_10/exercise.html b/examples/adding_up_to_10_canvas/exercise.html index eaf3d63..eaf3d63 100755 --- a/examples/adding_up_to_10/exercise.html +++ b/examples/adding_up_to_10_canvas/exercise.html diff --git a/examples/adding_up_to_10/index.html b/examples/adding_up_to_10_canvas/index.html index ea752d9..ea752d9 100755 --- a/examples/adding_up_to_10/index.html +++ b/examples/adding_up_to_10_canvas/index.html diff --git a/examples/adding_up_to_10/index_knavbar.html b/examples/adding_up_to_10_canvas/index_knavbar.html index e1e2fca..e1e2fca 100755 --- a/examples/adding_up_to_10/index_knavbar.html +++ b/examples/adding_up_to_10_canvas/index_knavbar.html diff --git a/examples/adding_up_to_10/js/lesson.js b/examples/adding_up_to_10_canvas/js/lesson.js index 852bd3f..852bd3f 100755 --- a/examples/adding_up_to_10/js/lesson.js +++ b/examples/adding_up_to_10_canvas/js/lesson.js diff --git a/examples/adding_up_to_10/assets/en/sounds/en_correct.ogg b/examples/adding_up_to_10_svg/assets/en/sounds/en_correct.ogg index a0d9e3a..a0d9e3a 100755 --- a/examples/adding_up_to_10/assets/en/sounds/en_correct.ogg +++ b/examples/adding_up_to_10_svg/assets/en/sounds/en_correct.ogg Binary files differ diff --git a/examples/adding_up_to_10/assets/en/sounds/en_incorrect.ogg b/examples/adding_up_to_10_svg/assets/en/sounds/en_incorrect.ogg index 4805e55..4805e55 100755 --- a/examples/adding_up_to_10/assets/en/sounds/en_incorrect.ogg +++ b/examples/adding_up_to_10_svg/assets/en/sounds/en_incorrect.ogg Binary files differ diff --git a/examples/adding_up_to_10/assets/es-MX/sounds/es-MX_correct.ogg b/examples/adding_up_to_10_svg/assets/es-MX/sounds/es-MX_correct.ogg index a54f738..a54f738 100755 --- a/examples/adding_up_to_10/assets/es-MX/sounds/es-MX_correct.ogg +++ b/examples/adding_up_to_10_svg/assets/es-MX/sounds/es-MX_correct.ogg Binary files differ diff --git a/examples/adding_up_to_10/assets/es-MX/sounds/es-MX_incorrect.ogg b/examples/adding_up_to_10_svg/assets/es-MX/sounds/es-MX_incorrect.ogg index 0474b93..0474b93 100755 --- a/examples/adding_up_to_10/assets/es-MX/sounds/es-MX_incorrect.ogg +++ b/examples/adding_up_to_10_svg/assets/es-MX/sounds/es-MX_incorrect.ogg Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/ball37px.png b/examples/adding_up_to_10_svg/assets/generic/images/ball37px.png index 4388283..4388283 100755 --- a/examples/adding_up_to_10/assets/generic/images/ball37px.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/ball37px.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/balloon37px.png b/examples/adding_up_to_10_svg/assets/generic/images/balloon37px.png index 8f47d6a..8f47d6a 100755 --- a/examples/adding_up_to_10/assets/generic/images/balloon37px.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/balloon37px.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/banana37px.png b/examples/adding_up_to_10_svg/assets/generic/images/banana37px.png index 90728e6..90728e6 100755 --- a/examples/adding_up_to_10/assets/generic/images/banana37px.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/banana37px.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/chilli.png b/examples/adding_up_to_10_svg/assets/generic/images/chilli.png index 5f8b64d..5f8b64d 100755 --- a/examples/adding_up_to_10/assets/generic/images/chilli.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/chilli.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/fish64px.png b/examples/adding_up_to_10_svg/assets/generic/images/fish64px.png index a29f12c..a29f12c 100755 --- a/examples/adding_up_to_10/assets/generic/images/fish64px.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/fish64px.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/flower37px.png b/examples/adding_up_to_10_svg/assets/generic/images/flower37px.png index 224e707..224e707 100755 --- a/examples/adding_up_to_10/assets/generic/images/flower37px.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/flower37px.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/happyChimp_120x125.png b/examples/adding_up_to_10_svg/assets/generic/images/happyChimp_120x125.png index 5e721c9..5e721c9 100755 --- a/examples/adding_up_to_10/assets/generic/images/happyChimp_120x125.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/happyChimp_120x125.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/happyMonkey.jpg b/examples/adding_up_to_10_svg/assets/generic/images/happyMonkey.jpg index bfe0d38..bfe0d38 100755 --- a/examples/adding_up_to_10/assets/generic/images/happyMonkey.jpg +++ b/examples/adding_up_to_10_svg/assets/generic/images/happyMonkey.jpg Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/normalChimp_120x125.png b/examples/adding_up_to_10_svg/assets/generic/images/normalChimp_120x125.png index a731df4..a731df4 100755 --- a/examples/adding_up_to_10/assets/generic/images/normalChimp_120x125.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/normalChimp_120x125.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/plussign.png b/examples/adding_up_to_10_svg/assets/generic/images/plussign.png index 915c5aa..915c5aa 100755 --- a/examples/adding_up_to_10/assets/generic/images/plussign.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/plussign.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/sadChimp_120x125.png b/examples/adding_up_to_10_svg/assets/generic/images/sadChimp_120x125.png index 1dec5f0..1dec5f0 100755 --- a/examples/adding_up_to_10/assets/generic/images/sadChimp_120x125.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/sadChimp_120x125.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/scorebox.png b/examples/adding_up_to_10_svg/assets/generic/images/scorebox.png index 424b60b..424b60b 100755 --- a/examples/adding_up_to_10/assets/generic/images/scorebox.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/scorebox.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/sidebar.png b/examples/adding_up_to_10_svg/assets/generic/images/sidebar.png index 9632788..9632788 100755 --- a/examples/adding_up_to_10/assets/generic/images/sidebar.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/sidebar.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/images/yellowBox.png b/examples/adding_up_to_10_svg/assets/generic/images/yellowBox.png index f7a72ca..f7a72ca 100755 --- a/examples/adding_up_to_10/assets/generic/images/yellowBox.png +++ b/examples/adding_up_to_10_svg/assets/generic/images/yellowBox.png Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/sounds/correct.ogg b/examples/adding_up_to_10_svg/assets/generic/sounds/correct.ogg index c89ce57..c89ce57 100755 --- a/examples/adding_up_to_10/assets/generic/sounds/correct.ogg +++ b/examples/adding_up_to_10_svg/assets/generic/sounds/correct.ogg Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/sounds/incorrect.ogg b/examples/adding_up_to_10_svg/assets/generic/sounds/incorrect.ogg index 2306562..2306562 100755 --- a/examples/adding_up_to_10/assets/generic/sounds/incorrect.ogg +++ b/examples/adding_up_to_10_svg/assets/generic/sounds/incorrect.ogg Binary files differ diff --git a/examples/adding_up_to_10/assets/generic/sounds/trigger.ogg b/examples/adding_up_to_10_svg/assets/generic/sounds/trigger.ogg index f22512a..f22512a 100755 --- a/examples/adding_up_to_10/assets/generic/sounds/trigger.ogg +++ b/examples/adding_up_to_10_svg/assets/generic/sounds/trigger.ogg Binary files differ diff --git a/examples/adding_up_to_10/assets/he/sounds/he_correct.ogg b/examples/adding_up_to_10_svg/assets/he/sounds/he_correct.ogg index 4e12c65..4e12c65 100755 --- a/examples/adding_up_to_10/assets/he/sounds/he_correct.ogg +++ b/examples/adding_up_to_10_svg/assets/he/sounds/he_correct.ogg Binary files differ diff --git a/examples/adding_up_to_10/assets/he/sounds/he_incorrect.ogg b/examples/adding_up_to_10_svg/assets/he/sounds/he_incorrect.ogg index 9e314bb..9e314bb 100755 --- a/examples/adding_up_to_10/assets/he/sounds/he_incorrect.ogg +++ b/examples/adding_up_to_10_svg/assets/he/sounds/he_incorrect.ogg Binary files differ diff --git a/examples/adding_up_to_10/assets/ne/sounds/ne_correct.ogg b/examples/adding_up_to_10_svg/assets/ne/sounds/ne_correct.ogg index 8ced3cd..8ced3cd 100755 --- a/examples/adding_up_to_10/assets/ne/sounds/ne_correct.ogg +++ b/examples/adding_up_to_10_svg/assets/ne/sounds/ne_correct.ogg Binary files differ diff --git a/examples/adding_up_to_10/assets/ne/sounds/ne_incorrect.ogg b/examples/adding_up_to_10_svg/assets/ne/sounds/ne_incorrect.ogg index 106fe0f..106fe0f 100755 --- a/examples/adding_up_to_10/assets/ne/sounds/ne_incorrect.ogg +++ b/examples/adding_up_to_10_svg/assets/ne/sounds/ne_incorrect.ogg Binary files differ diff --git a/examples/adding_up_to_10/css/knavbar.css b/examples/adding_up_to_10_svg/css/knavbar.css index 26e3896..b39f205 100755 --- a/examples/adding_up_to_10/css/knavbar.css +++ b/examples/adding_up_to_10_svg/css/knavbar.css @@ -5,6 +5,12 @@ margin:0; padding:0; } +#knavbar { +display: table; +width: 800px; +margin: 0 auto; +} + nav { list-style: none; @@ -15,24 +21,6 @@ width:100%; background: #FFFFFF; } -nav li -{ -float: left; -} - -nav li a -{ -height: 63px; -text-align: center; -font-weight: bold; -font-size: 110%; -display: block; -color:#000000; -padding-left: 0.2em; -padding-right: 0.2em; -text-decoration: none; -} - nav img { border: none; @@ -109,6 +97,11 @@ img border: none; } +#lessonTitle +{ +display: block; +} + nav a:hover { text-decoration: underline; outline-width:1px; @@ -131,4 +124,16 @@ padding:0px; .icon_right { float: right; +} + +.floatLeft { + float: left; + margin-left: 5px; + margin-bottom: 5px; +} + +.floatRight { + float: right; + margin-right: 5px; + margin-bottom: 5px; } \ No newline at end of file diff --git a/examples/adding_up_to_10/css/lesson.css b/examples/adding_up_to_10_svg/css/lesson.css index 5147cfa..e368b14 100755 --- a/examples/adding_up_to_10/css/lesson.css +++ b/examples/adding_up_to_10_svg/css/lesson.css @@ -1,32 +1,33 @@ +@charset "UTF-8"; -#main { +#karma-main { width:800px; height:600px; position:absolute; } -#action { + +#main { float:left; position:relative; width: 650px; height: 600px; } -#sidebar { +#side { background-image: url(../assets/generic/images/sidebar.png); --moz-background-clip:border; --moz-background-inline-policy:continuous; --moz-background-origin:padding; background:none none repeat scroll 0 0; float:left; height:600px; position:relative; width:150px; } -#actionTop { + +#top { width: 650px; height: 300px; position:relative; } + #bottom { clear:both; float:left; @@ -34,32 +35,26 @@ width: 650px; height: 300px; position:relative; } -#topLtSide { +#topLeftArea { float:left; width: 300px; height: 300px; position:relative; } -#topMd { --moz-background-clip:border; --moz-background-inline-policy:continuous; --moz-background-origin:padding; +#topMiddleArea { background:none none repeat scroll 0 0; float:left; width: 50px; height: 300px; position:relative; } -#topRtSide { +#topRightArea { float:left; width: 300px; height:300px; position:relative; } -#topLtBox { --moz-background-clip:border; --moz-background-inline-policy:continuous; --moz-background-origin:padding; +#topLeftCard { background:none none repeat scroll 0 0; width: 200px; height: 200px; @@ -68,22 +63,22 @@ position:absolute; top:50px; } -#topLtCanvas { --moz-background-clip:border; --moz-background-inline-policy:continuous; --moz-background-origin:padding; +#topLeftPaper { background:none none repeat scroll 0 0; position:absolute; top: 50px; left: 75px; +width:200px; +height:200px; } -#plussign { + +#plusSign { display: block; margin-left: auto; margin-right: auto; margin-top: 150px; } -#topRtBox { +#topRightCard { background: none none repeat scroll 0 0; width: 200px; height: 200px; @@ -91,18 +86,17 @@ position:absolute; right: 50px; top: 50px; } -#topRtCanvas { +#topRightPaper { background:none none repeat scroll 0 0; position:absolute; left: 50px; right:50px; top:50px; +width:200px; +height:200px; } .bottom { --moz-background-clip:border; --moz-background-inline-policy:continuous; --moz-background-origin:padding; background:none none repeat scroll 0 0; float:left; width: 216.5px; @@ -110,7 +104,7 @@ height: 300px; position:relative; } -.bottomBox { +.bottomCard { left:25px; position:absolute; width: 200px; @@ -118,7 +112,8 @@ position:relative; top: 20px; } -.sidebarItem { + +.sideItem { clear:both; float:left; width:150px; @@ -134,7 +129,7 @@ top:10px; left:25px; } -#timerCanvas { +#timerPaper { position:absolute; width:100px; height:150px; @@ -142,28 +137,31 @@ top:10px; left:25px; } -#scorebox { +#scoreBox { position:absolute; width:100px; height:150px; top:10px; left:25px; +z-index: 10; } -#scoreboxCanvas { -position:absolute; -width:100px; -height:150px; -top:10px; -left:25px; +#scoreBoxText { +position:relative; +top:60px; +font: 70px Arial; +color: #fff; +text-align: center; +z-index: 100; } -#chimpCanvas { +#chimpPaper { position:absolute; top:10px; left:25px; - +width:120px; +height:125px; } #buttons { diff --git a/examples/adding_up_to_10/index.html b/examples/adding_up_to_10_svg/exercise.html index ea752d9..a99ec93 100755 --- a/examples/adding_up_to_10/index.html +++ b/examples/adding_up_to_10_svg/exercise.html @@ -1,7 +1,7 @@ - Karma - Adding Up to 10 + Adding up to 10 - Exercise (Alpha) @@ -11,12 +11,23 @@ - - + + + +
@@ -77,7 +88,7 @@
- +
diff --git a/examples/adding_up_to_10_svg/index.html b/examples/adding_up_to_10_svg/index.html new file mode 100755 index 0000000..6a861d1 --- /dev/null +++ b/examples/adding_up_to_10_svg/index.html @@ -0,0 +1,84 @@ + + + + Karma - Adding Up to 10 + + + + + + + + + + + + + + + + +
+
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+ +
+
+
+ +
+
+
+ +
+
+
+
+
+ + + +
+
+ + +
+
+
+
+ + + + + diff --git a/examples/adding_up_to_10/index_knavbar.html b/examples/adding_up_to_10_svg/index_knavbar.html index e1e2fca..6bd5e7a 100755 --- a/examples/adding_up_to_10/index_knavbar.html +++ b/examples/adding_up_to_10_svg/index_knavbar.html @@ -19,8 +19,8 @@
Mathematics
diff --git a/examples/adding_up_to_10_svg/js/lesson.js b/examples/adding_up_to_10_svg/js/lesson.js new file mode 100755 index 0000000..ef878d3 --- /dev/null +++ b/examples/adding_up_to_10_svg/js/lesson.js @@ -0,0 +1,369 @@ +/* jslint browser: true +*/ +$(document).ready(function(){ + + + var k = $.karma({container: "#karma-main", lang: "en"}); + + k.init({ + images: [ + {name: "ball", file: "ball37px.png", localized : false }, + {name: "balloon", file: "balloon37px.png", localized : false }, + {name: "banana", file: "banana37px.png", localized : false }, + {name: "chilli", file: "chilli.png", localized : false }, + {name: "fish" , file: "fish64px.png", localized : false }, + {name: "flower", file: "flower37px.png", localized : false }, + {name: "normalChimp", file: "normalChimp_120x125.png", + localized : false}, + {name: "happyChimp", file: "happyChimp_120x125.png", + localized: false}, + {name: "sadChimp", file: "sadChimp_120x125.png", + localized : false}], + sounds: [ + {name: "correct", file: "correct.ogg"}, + {name: "incorrect", file: "incorrect.ogg"}, + {name: "trigger", file: "trigger.ogg", localized: false} + ] + + }); + + +k.main(function() { + + + var imageNames = ["ball", "banana", "balloon","chilli", "fish", "flower"]; + //game logic + var cards; + var totalCorrect = 0, n0 = 0, n1 = 0, correctCard = 0, + level = 0, score = 0, numCorrectAnswers = 0; + var DRAW_MAX_X = 170, DRAW_MAX_Y = 170; + var choices=[0, 0, 0]; + var timerSpeed = 12000; + var START_TIMER_Y = 25, END_TIMER_Y = 125; + var timerPaper, chimpPaper; + var timerRect; + var normalChimpImage, sadChimpImage, happyChimpImage; + var overlayCard, topLeftCard, topRightCard, bottomLeftCard, + bottomMiddleCard, bottomRightCard; + + var buttons=[]; + var isTimerRunning = false; + var dispatchChoice; + + var createCard = function (paperName, width, height) { + var set; + var paper; + + if(!width || !height){ + paper = Raphael(paperName+"Paper", 200, 200); + } + else { + paper = Raphael(paperName+"Paper", width, height); + } + set = paper.set(); + return { "paper": paper, "prefix": paperName, "set": set}; + }; + + + overlayCard = createCard("overlay", 800, 600); + topLeftCard = createCard("topLeft"); + topRightCard = createCard("topRight"); + bottomLeftCard = createCard("bottomLeft"); + bottomMiddleCard = createCard("bottomMiddle"); + bottomRightCard = createCard("bottomRight"); + + + cards = [ topLeftCard, topRightCard, bottomLeftCard, + bottomMiddleCard, bottomRightCard]; + + sets = [topLeftCard.set, topRightCard.set, bottomLeftCard.set, + bottomMiddleCard.set, bottomRightCard.set]; + + + function drawCards () { + var imageId = imageNames[ level ]; + //reinitialize choices to zero + choices = [0, 0, 0]; + + cards.forEach(function (box) { + box.set.remove(); + }); + + totalCorrect = k.math.rand( 2, 5 + level ); //the totalCorrect + n0 = totalCorrect - k.math.rand(1, totalCorrect - 1 ); //first number + n1 = totalCorrect - n0; //second number + + //chose one option (the correct option) + //and then put the correct value into it + correctCard = k.math.rand( 0, 2 ); + choices[ correctCard ] = totalCorrect; + + var computeUniqueChoice = function(choice){ + var newChoice = 0; + if (choice === totalCorrect) { + return choice; + } else { + newChoice = k.math.rand( 1, 10 ); + if (newChoice === totalCorrect){ + return computeUniqueChoice(choice); + } else { + return newChoice; + } + } + }; + + choices = choices.map(computeUniqueChoice); + + var drawCard = function (card, n) { + var positions = []; + var x = 0, y = 0; + var isOverlapping = false; + var imageVarNames = {}; + var varPrefix = card.prefix; + imageVarNames[varPrefix] = []; + card.set = card.paper.set(); + + for (var i=0; i