now have both svg and canvas versions of adding_up

32 files changed, 372 insertions, 295 deletions

diff --git a/examples/adding_up_to_10_canvas/assets/en/sounds/en_correct.ogg b/examples/adding_up_to_10_canvas/assets/en/sounds/en_correct.ogg
new file mode 100755
index 0000000..a0d9e3a
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/en/sounds/en_correct.ogg
diff --git a/examples/adding_up_to_10_canvas/assets/en/sounds/en_incorrect.ogg b/examples/adding_up_to_10_canvas/assets/en/sounds/en_incorrect.ogg
new file mode 100755
index 0000000..4805e55
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/en/sounds/en_incorrect.ogg
diff --git a/examples/adding_up_to_10_canvas/assets/es-MX/sounds/es-MX_correct.ogg b/examples/adding_up_to_10_canvas/assets/es-MX/sounds/es-MX_correct.ogg
new file mode 100755
index 0000000..a54f738
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/es-MX/sounds/es-MX_correct.ogg
diff --git a/examples/adding_up_to_10_canvas/assets/es-MX/sounds/es-MX_incorrect.ogg b/examples/adding_up_to_10_canvas/assets/es-MX/sounds/es-MX_incorrect.ogg
new file mode 100755
index 0000000..0474b93
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/es-MX/sounds/es-MX_incorrect.ogg
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/ball37px.png b/examples/adding_up_to_10_canvas/assets/generic/images/ball37px.png
new file mode 100755
index 0000000..4388283
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/ball37px.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/balloon37px.png b/examples/adding_up_to_10_canvas/assets/generic/images/balloon37px.png
new file mode 100755
index 0000000..8f47d6a
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/balloon37px.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/banana37px.png b/examples/adding_up_to_10_canvas/assets/generic/images/banana37px.png
new file mode 100755
index 0000000..90728e6
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/banana37px.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/chilli.png b/examples/adding_up_to_10_canvas/assets/generic/images/chilli.png
new file mode 100755
index 0000000..5f8b64d
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/chilli.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/fish64px.png b/examples/adding_up_to_10_canvas/assets/generic/images/fish64px.png
new file mode 100755
index 0000000..a29f12c
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/fish64px.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/flower37px.png b/examples/adding_up_to_10_canvas/assets/generic/images/flower37px.png
new file mode 100755
index 0000000..224e707
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/flower37px.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/happyChimp_120x125.png b/examples/adding_up_to_10_canvas/assets/generic/images/happyChimp_120x125.png
new file mode 100755
index 0000000..5e721c9
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/happyChimp_120x125.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/happyMonkey.jpg b/examples/adding_up_to_10_canvas/assets/generic/images/happyMonkey.jpg
new file mode 100755
index 0000000..bfe0d38
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/happyMonkey.jpg
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/normalChimp_120x125.png b/examples/adding_up_to_10_canvas/assets/generic/images/normalChimp_120x125.png
new file mode 100755
index 0000000..a731df4
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/normalChimp_120x125.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/plussign.png b/examples/adding_up_to_10_canvas/assets/generic/images/plussign.png
new file mode 100755
index 0000000..915c5aa
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/plussign.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/sadChimp_120x125.png b/examples/adding_up_to_10_canvas/assets/generic/images/sadChimp_120x125.png
new file mode 100755
index 0000000..1dec5f0
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/sadChimp_120x125.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/scorebox.png b/examples/adding_up_to_10_canvas/assets/generic/images/scorebox.png
new file mode 100755
index 0000000..424b60b
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/scorebox.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/sidebar.png b/examples/adding_up_to_10_canvas/assets/generic/images/sidebar.png
new file mode 100755
index 0000000..9632788
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/sidebar.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/images/yellowBox.png b/examples/adding_up_to_10_canvas/assets/generic/images/yellowBox.png
new file mode 100755
index 0000000..f7a72ca
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/images/yellowBox.png
diff --git a/examples/adding_up_to_10_canvas/assets/generic/sounds/correct.ogg b/examples/adding_up_to_10_canvas/assets/generic/sounds/correct.ogg
new file mode 100755
index 0000000..c89ce57
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/sounds/correct.ogg
diff --git a/examples/adding_up_to_10_canvas/assets/generic/sounds/incorrect.ogg b/examples/adding_up_to_10_canvas/assets/generic/sounds/incorrect.ogg
new file mode 100755
index 0000000..2306562
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/sounds/incorrect.ogg
diff --git a/examples/adding_up_to_10_canvas/assets/generic/sounds/trigger.ogg b/examples/adding_up_to_10_canvas/assets/generic/sounds/trigger.ogg
new file mode 100755
index 0000000..f22512a
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/generic/sounds/trigger.ogg
diff --git a/examples/adding_up_to_10_canvas/assets/he/sounds/he_correct.ogg b/examples/adding_up_to_10_canvas/assets/he/sounds/he_correct.ogg
new file mode 100755
index 0000000..4e12c65
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/he/sounds/he_correct.ogg
diff --git a/examples/adding_up_to_10_canvas/assets/he/sounds/he_incorrect.ogg b/examples/adding_up_to_10_canvas/assets/he/sounds/he_incorrect.ogg
new file mode 100755
index 0000000..9e314bb
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/he/sounds/he_incorrect.ogg
diff --git a/examples/adding_up_to_10_canvas/assets/ne/sounds/ne_correct.ogg b/examples/adding_up_to_10_canvas/assets/ne/sounds/ne_correct.ogg
new file mode 100755
index 0000000..8ced3cd
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/ne/sounds/ne_correct.ogg
diff --git a/examples/adding_up_to_10_canvas/assets/ne/sounds/ne_incorrect.ogg b/examples/adding_up_to_10_canvas/assets/ne/sounds/ne_incorrect.ogg
new file mode 100755
index 0000000..106fe0f
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/assets/ne/sounds/ne_incorrect.ogg
diff --git a/examples/adding_up_to_10_canvas/exercise.html b/examples/adding_up_to_10_canvas/exercise.html
index a99ec93..eaf3d63 100755
--- a/examples/adding_up_to_10_canvas/exercise.html
+++ b/examples/adding_up_to_10_canvas/exercise.html
@@ -10,23 +10,23 @@
 	<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
 	<script type="text/javascript" src="../../js/karma.Gettext.js"></script>
 	<script type="text/javascript" src="../../js/jquery.karma.js"></script>
-	<script type="text/javascript" src="js/lesson.js"></script>
+
 	<link rel="stylesheet" href="css/knavbar.css" type="text/css"/>
 
 </head>
 
 <body>
 
-<section id="navigation">
-	<nav id="knavbar">
-	<a href="../../chakra/grade1mathematics.html"><img src="../../assets/default/images/back.png" alt="Back" title="Back" class="floatLeft"></a>
-	<div id="lessonTitle" class="floatLeft"><a id="welcome" href="index_knavbar.html">Adding up to 10</a></div>
-	<a href="http://olenepal.org/" target="_blank"><img src="../../assets/default/images/olenepal_logo.gif" alt="OLE Nepal logo" title="OLE Nepal Web site" class="floatRight"></a>
-	<a href="#tab_help"><img src="../../assets/default/images/help.png" alt="Help" title="Help" class="floatRight"></a>
-	<img src="../../assets/default/images/tutorial_bw.png" alt="Tutorial" title="Tutorial" class="floatRight">
-	<a href="exercise.html" class="selected"><img src="../../assets/default/images/exercise.png" alt="Exercise" title="Exercise" class="floatRight"></a>
-	</nav>
-</section>
+<div id="lesson">
+<nav>
+<li><a href="../../chakra/grade1mathematics.html"><img src="../../assets/default/images/back.png" alt="Back" title="Back"></a></li>
+<li><a id="welcome" href="index_knavbar.html">Adding up to 10</a></li>
+<li><img src="../../assets/default/images/tutorial_bw.png" alt="Tutorial" title="Tutorial"></li>
+<li><a href="exercise.html" class="selected"><img src="../../assets/default/images/exercise.png" alt="Exercise" title="Exercise"></a></li>
+<li><a href="#tab_help"><img src="../../assets/default/images/help.png" alt="Help" title="Help"></a></li>
+<li><a href="http://olenepal.org/" target="_blank"><img src="../../assets/default/images/olenepal_logo.gif" alt="OLE Nepal logo" title="OLE Nepal Web site"></a></li>
+</nav>
+
 
   <div id="karma-main"> 
     <div id="action">
@@ -72,15 +72,11 @@
       </div>
       <div class="sidebarItem">
 	<img id="scorebox" src="assets/generic/images/scorebox.png" alt=""/>
-	<canvas id="scoreboxCanvas" width="100" height="140"></canvas>
+	<canvas id="scoreboxCanvas" width="100" height="140" />
       </div>
       <div class="sidebarItem">
 	<canvas id="chimpCanvas" width="120px" height="125px"> </canvas>
-	<div id="buttons">
-	    <button id="start">Start</button>
-	    <button id="stop">Stop</button>
-	    <button id="reset">Restart</button>
-	</div>
+	<button id="reset">Start Over</button>
       </div>
 
 
diff --git a/examples/adding_up_to_10_canvas/js/lesson.js b/examples/adding_up_to_10_canvas/js/lesson.js
index ef878d3..852bd3f 100755
--- a/examples/adding_up_to_10_canvas/js/lesson.js
+++ b/examples/adding_up_to_10_canvas/js/lesson.js
@@ -1,9 +1,7 @@
-/* jslint browser: true
-*/
 $(document).ready(function(){
 
 
-    var k = $.karma({container: "#karma-main", lang: "en"});
+    var k = $.karma ({container: "#karma-main", lang: "en"});
     
     k.init({
 	images: [
@@ -13,357 +11,289 @@ $(document).ready(function(){
 	    {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}],
+	    {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}
-	]
-
+ 	    
+	],
+	surfaces: [
+	    {name:"topLt", canvas:"topLtCanvas"},
+	    {name:"topRt", canvas:"topRtCanvas"},
+	    {name:"bottomLt", canvas:"bottomLtCanvas"},
+	    {name:"bottomMd", canvas:"bottomMdCanvas"},
+	    {name:"bottomRt", canvas:"bottomRtCanvas"},
+	    {name:"timer", canvas:"timerCanvas"},
+	    {name:"scorebox", canvas:"scoreboxCanvas"},
+	    {name:"chimp", canvas:"chimpCanvas"}
+    
+]	
     });
     
     
 k.main(function() {
 
 
-    var imageNames = ["ball",  "banana", "balloon","chilli", "fish", "flower"];
+    var imgNames = ["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);
-	}
+    var total, level=0, time, n0, n1, correct;
+    var maskd=200;
+    var d=160;
+    var choices=[];
+    var score = 0;
+    var correct;
+    var speed = 2000;
+    var playerCorrect = 0;
+    var endTimerX = 80;
+    var startTimerY = 10;
+    var endTimerY = 100;
+    var offsetTimerY = 5;
+    var timerId;
+
+    var timerFn = function () {
+	k.surfaces['timer'].clear();
+
+	if ( startTimerY >= endTimerY ){
+	    //you didn't answer in time
+	    k.library.sounds["trigger"].play();
+	    answer(false, true);
+	    game();
+	} 
 	else {
-	    paper = Raphael(paperName+"Paper", width, height);
+	    k.surfaces['timer'].clear();
+	    startTimerY = startTimerY + offsetTimerY;
+	    k.surfaces['timer'].ctx.fillStyle = "#fff";
+	    k.surfaces['timer'].ctx.fillRect(10, startTimerY, endTimerX, 20);
 	}
-	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);
+	function game () {
+	    $.each(k.surfaces, function () {
+		if (this.name != "chimp"){
+		this.clear();
+		}
+	    });
+	    
+	    
+	    writeScore();
+	    total = k.math.rand( 2, 10 ); //the total
+	    n0 = total - k.math.rand(1, total - 1 ); //first number
+	    n1 = total - n0; //second number
+
+	    //chose one option (the correct option) 
+	    //and then put the correct value into it 
+	    correct = k.math.rand( 0, 2 );	
+	    choices[ correct ] = total;
+	    
+	    for (var i=0; i<3; i++) {
+		//generate the two other options
+		if ( choices[i] === total) {
+		    continue;
 		} else {
-		    return newChoice;
+		    // generate the other options
+		    choices[ i ] = k.math.rand( 2, 10 ); 
+		    for (var j = 0; j < i; j++){
+			if (choices[i] === choices[j]) {
+			    choices[ i ] = k.math.rand( 2, 10 );
+			}
+		    }	    
 		}
 	    }
-	};
-
-	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<n; i++) {
-		do {
-		    isOverlapping = false;
-		    x = k.math.rand( 0, DRAW_MAX_X);
-		    y = k.math.rand( 0, DRAW_MAX_Y );
-		    for ( var j=0; j<positions.length; j++) {
-			if ( k.geometry.distance2( positions[j], 
-						   {"x": x, "y": y} )  < 137 ) {
-			    isOverlapping = true;
-			    break;
+	    var imgId = imgNames[ level ] ;
+
+ 
+	    var card = function (surface, n, minx, miny, d ) {
+		surface.save();
+		var r = k.rectangle({x:minx, y:miny, width:maskd, height:maskd,
+		    stroke:false,fill:false}).draw(surface);
+		
+		//do the clip
+		//surface.clip();
+		var pos = [];
+		var x, y, flag;
+
+
+		for (var i=0; i<n; i++) {
+		   do {
+			flag = false;
+			x = k.math.rand( 0, d );
+			y = k.math.rand( 0, d );
+			for ( var j=0; j<pos.length; j++) {
+			    if ( k.geometry.distance2( pos[j], 
+				{"x": x, "y": y} )  < 120 ) {
+				flag = true;
+				break;
+			    }
 			}
-		    }
-		    
-		}while ( isOverlapping === true );
-		positions.push( { "x":x, "y": y } ); 
-		imageVarNames[varPrefix][i] = card.paper.
- 		        image(k.library.images[imageId].src, x , y, 35, 35);
-		card.set.push(imageVarNames[varPrefix][i]);		    
+			
+		    }while ( flag === true );
+		    pos.push( { "x":x, "y": y } ); 
+		    k.library.images[ imgId ].draw(surface, x, y )
+		}
+		
+		
+		
+		surface.restore();
 	    }
-	    
-	};
-
-	//put the cards
-	drawCard(topLeftCard, n0);
-	drawCard(topRightCard, n1);
-	drawCard(bottomLeftCard, choices[ 0 ]);
-	drawCard(bottomMiddleCard, choices[ 1 ]);
-	drawCard(bottomRightCard, choices[ 2 ]);
-	
-    }
-
-    //put the buttons on the cards
-    buttons[ 0 ] = { node: $('#bottomLeftPaper')[0], num: 0};
-    buttons[ 1 ] = { node: $('#bottomMiddlePaper')[0], num: 1};
-    buttons[ 2 ] = { node: $('#bottomRightPaper')[0], num: 2};
-
-    var addButtons = function(){
-	buttons.forEach(function(button) {
-	    var numButton = button.num;
-	    button.node.addEventListener('click', function dispatchChoice(){ 
-		var myButton = numButton;
-		chooseCard(myButton);}, false);
-	});
-    };
-
-
-    var removeButtons = function(){
-	buttons.forEach(function(button) {
-	    button.node.removeEventListener('click', dispatchChoice, false);
-	});
-    };
-
-    var chooseCard = function(numButton) {
-		if ( choices[numButton] === totalCorrect){
-		    //If the player has completed all the levels
-		    if (numCorrectAnswers === 4 && level === 5) {
-			congrats();
-		    } else {
-			computeScore(true, false);
-			resetTimer();
-			animateTimer();
-			drawCards();
-		    }
-		}else {
-		    computeScore(false, false);
-		    resetTimer();
-		    animateTimer();
-		    drawCards(); 
-		} 
-    };
 
 
+	    //put the cards
+	    card(k.surfaces["topLt"], n0 , 0, 0, d);
+	    card(k.surfaces["topRt"], n1 , 0, 0, d);
+	    card(k.surfaces["bottomLt"], choices[ 0 ] ,  0, 0, d);
+	    card(k.surfaces["bottomMd"], choices[ 1 ] , 0, 0, d);
+	    card(k.surfaces["bottomRt"], choices[ 2 ] , 0, 0, d);
+	    
+    }
 
-    var writeScore = function (newScore){
-         $('#scoreBoxText')[0].innerHTML = newScore; 
+    var writeScore = function (){
+	k.surfaces["scorebox"].save().
+	clear().
+	font("bold 50px sans-serif white").
+	fillStyle("#fff").
+	textBaseline("middle").
+	fillText("" + score, 30, 100).
+	restore();
     };
 
-
-    var computeScore = function (correct, tooSlow) {
+    var answer = function (correct, tooSlow) {
 
 	if ( correct === false) {
 	    //answer was incorrect or took too long
 	    score = score - 1;
-	    numCorrectAnswers = numCorrectAnswers - 1;
-	    writeScore(score);
+	    playerCorrect = playerCorrect - 1;
+	    writeScore();
 	    if (tooSlow === true) {
-		k.library.sounds.trigger.play();
+		k.library.sounds[ "trigger" ].play();
 	    } else {
-		k.library.sounds.incorrect.play();
+		k.library.sounds[ "incorrect" ].play();
 	    }
 	    //animate sad monkey
 	    animateChimp(false);
 	    
 	} else {
 	    score = score + 1;
-	    numCorrectAnswers = numCorrectAnswers + 1;
-	    writeScore(score);
-	    k.library.sounds.correct.play();
+	    playerCorrect = playerCorrect + 1;
+	    writeScore();
+	    k.library.sounds[ "correct" ].play();
 	    animateChimp(true);
-	    if (numCorrectAnswers == 5){
-		level = level + 1;
-		timerSpeed = timerSpeed - 1000;
-		numCorrectAnswers = 0;
-	    } 
-	   
+	    if (playerCorrect === 5){
+		level = (level+1)% imgNames.length;
+		speed = speed - 300;
+		playerCorrect = 0;
+	    }
 	}
-	
+
+	changeTimer('start');
 
     };
 
+    var animateChimp = function (answer) {
+	var timerChimp;	
+	k.surfaces["chimp"].clear();
+	if( answer === true){
+	    k.library.images["happyChimp"].draw(k.surfaces["chimp"], 0, 0);
+	} else {
+	    k.library.images["sadChimp"].draw(k.surfaces["chimp"], 0, 0);
+	}
 
-    var startGame = function () {
-	score = 0;
-	writeScore(score);
-	addButtons();
-	isTimerRunning = true;
+	var restoreChimp = function () {
+	    k.surfaces["chimp"].clear();
+	    k.library.images["normalChimp"].draw(k.surfaces["chimp"], 0, 0);
+	};
 
-	//move timer back to start in case it is 
-	//already running
-	resetTimer();
+	timerChimp = setTimeout(restoreChimp, 800);
 
-	//start timer
-	animateTimer();
 
-	drawCards();
     };
+    
+    var changeTimer = function (status){
+	startTimerY = 10;
+	k.surfaces["timer"].clear();
+	clearInterval(timerId);
 
-    var stopGame = function () {
-	writeScore(' ');
-	removeButtons();
-	//stop timer
-	isTimerRunning = false;
-	resetTimer();
-	
-	//clear the cards
-	cards.forEach(function (card) {
-	    card.set.remove();
-	    card.set = card.paper.set();
+	if (status === 'start'){
+	    timerId = setInterval(timerFn, speed);
+	}
+
+    };
+
+    var startStop = function (start) {
+	score = level = 0;
+	startTimerY = 10;
+	$.each(k.surfaces, function () { 
+	    if (this.name != "chimp"){
+		this.clear();
+	    }
 	});
+
+	changeTimer('start');
+	game();
 	
+
     };
 
-    var resetGame = function () {
-	score = 0;
-	writeScore(score);
-	isTimerRunning = true;
-	resetTimer();
-	animateTimer();
-	drawCards();
-	
+    var start = function () {
+	startStop(true);
     };
 
-    var resetTimer = function () {
-    	timerRect.animate({y: START_TIMER_Y}, 0);
+    
+    var stop = function () {
+	changeTimer('stop');
     };
     
-    var animateTimer = function () {
-	timerRect.animate({y : END_TIMER_Y}, timerSpeed, function(){ 
-	    timerRect.attr("y", START_TIMER_Y);
-	    if (isTimerRunning === true){
-		computeScore(false, true);
-		animateTimer();
-		drawCards();
-	    }
-	});
+    var reset = function () {
+	startStop(true);
     };
 
 
-    var animateChimp = function (answer) {
-	var timerChimp;	
-	normalChimpImage.hide();
-	if( answer === true){ 
-	    happyChimpImage.show();
-	} else {
-	    sadChimpImage.show();
-	}
 
-	
-	timerChip = setTimeout(function() { 
-	    happyChimpImage.hide(); 
-	    sadChimpImage.hide(); 
-	    normalChimpImage.show();}, 800);
-			       
-    };
+						      
 
-    var congrats = function () {
-	var congratsText;
-	stopGame();
-
-	$('#overlay').css({"position": "absolute", "background": "white", "opacity": "0.7",
-			   "width": 800, "height": 600, "z-index": 10});
-	$('#overlayPaper').css({"position": "absolute", "z-index": "100", "opacity": 1});
-	congratsChimp = overlayCard.paper.image(
-	    k.library.images.happyChimp.src, 200, 100, 300, 400);
-	congratsChimp.attr({"fill-opacity": "1", "opacity": "1"});
-	congratsText = overlayCard.paper.text(400, 550, "Great Job!");
-	congratsText.attr({"font-size": 80});
-	overlayCard.set.push(congratsChimp, congratsText);
-
-	congratsChimp.node.addEventListener('click', function(){
-	    $('#overlay').css({"opacity": 0});
-	    overlayCard.set.remove();
-	}, false);
+	//put the buttons
+	var buttons=[];
+	buttons[ 0 ] = { "surface": k.surfaces["bottomLt"], "id": 0};
+	buttons[ 1 ] = { "surface": k.surfaces["bottomMd"], "id": 1};
+	buttons[ 2 ] = { "surface": k.surfaces["bottomRt"], "id": 2};
+	
+	$.each(buttons, function( key, item ) {
+		item.surface.canvas.addEventListener('click',  function( ev ) {
+		   if ( choices[ item.id ] === total){
+		       answer(true);
+		       game();
+		   }else {
+		       answer(false); 
+		       game(); 
+		   } 
+		    
+		}, false);
+	});
 
-    };
-						      
     document.getElementById('start').
-    addEventListener('click', startGame, false);
+    addEventListener('click', start, false);
 
 
     document.getElementById('stop').
-    addEventListener('click', stopGame, true);
+    addEventListener('click', stop, false);
     
     document.getElementById('reset').
-    addEventListener('click', resetGame, false);
+    addEventListener('click', reset, false);
    
-
-    //set up the timer
-    timerPaper = Raphael('timerPaper', 100, 150);
-    timerRect = timerPaper.rect(7, START_TIMER_Y, 85, 20, 3);
-    timerRect.attr('fill', "#fff");
-
-    //Set up the monkeys
-    chimpPaper = Raphael('chimpPaper', 120, 125);
-    normalChimpImage = chimpPaper.image(k.library.images.normalChimp.src, 
-				   0, 20, 100, 100);
-    sadChimpImage = chimpPaper.image(k.library.images.sadChimp.src, 
-				0, 20, 100, 100);
-    happyChimpImage = chimpPaper.image(k.library.images.happyChimp.src, 
-				  0, 20, 100, 100);
-    happyChimpImage.hide();
-    sadChimpImage.hide();
-
-    
+    k.library.images["normalChimp"].draw(k.surfaces["chimp"], 0, 0);
 
 
 //end of Karma.main
 });
 
-    
-
 
 //end of ready
 });
\ No newline at end of file
diff --git a/examples/adding_up_to_10_canvas/po/en.po b/examples/adding_up_to_10_canvas/po/en.po
new file mode 100755
index 0000000..4d1444f
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/po/en.po
@@ -0,0 +1,28 @@
+# English translations for PACKAGE package.
+msgid ""
+msgstr ""
+"Project-Id-Version: adding up to 10 v1\n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: 2009-07-07 04:46-0600\n"
+"Last-Translator: Felipe López Toledo <zer.subzero@gmail.com>\n"
+"Language-Team: karma <zer.subzero@gmail.com>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Poedit-Language: English\n"
+"X-Poedit-Country: United States\n"
+"X-Poedit-SourceCharset: utf-8\n"
+
+
+msgid  "choose an option"
+msgstr "choose an optionxxxxxxx"
+
+msgid  "Time"
+msgstr "Time1"
+
+msgid  "Level"
+msgstr "Level1"
+
+msgid  "Restart"
+msgstr "Restart1"
+
diff --git a/examples/adding_up_to_10_canvas/po/es-MX.po b/examples/adding_up_to_10_canvas/po/es-MX.po
new file mode 100755
index 0000000..ca1e61c
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/po/es-MX.po
@@ -0,0 +1,29 @@
+# Spanish translations for PACKAGE package.
+msgid ""
+msgstr ""
+"Project-Id-Version: adding up to 10 v1\n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: 2009-07-07 04:46-0600\n"
+"Last-Translator: Felipe López Toledo <zer.subzero@gmail.com>\n"
+"Language-Team: karma <zer.subzero@gmail.com>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Poedit-Language: Spanish\n"
+"X-Poedit-Country: MEXICO\n"
+"X-Poedit-SourceCharset: utf-8\n"
+
+
+msgid  "choose an option"
+msgstr "escoge una opción"
+
+msgid  "Time"
+msgstr "Tiempo"
+
+msgid  "Level"
+msgstr "Nivel"
+
+msgid  "Restart"
+msgstr "Reinicia"
+
+ 
diff --git a/examples/adding_up_to_10_canvas/po/es.po b/examples/adding_up_to_10_canvas/po/es.po
new file mode 100755
index 0000000..b665366
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/po/es.po
@@ -0,0 +1,29 @@
+# Spanish translations for PACKAGE package.
+msgid ""
+msgstr ""
+"Project-Id-Version: adding up to 10 v1\n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: 2009-07-07 04:46-0600\n"
+"Last-Translator: Felipe López Toledo <zer.subzero@gmail.com>\n"
+"Language-Team: karma <zer.subzero@gmail.com>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Poedit-Language: Spanish\n"
+"X-Poedit-Country: MEXICO\n"
+"X-Poedit-SourceCharset: utf-8\n"
+
+
+msgid  "choose an option"
+msgstr "escoge una opciónXXX"
+
+msgid  "Time"
+msgstr "Tiempo"
+
+msgid  "Level"
+msgstr "Nivel"
+
+msgid  "Restart"
+msgstr "Reinicia"
+
+ 
diff --git a/examples/adding_up_to_10_canvas/po/he-IL.po b/examples/adding_up_to_10_canvas/po/he-IL.po
new file mode 100755
index 0000000..f681aca
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/po/he-IL.po
@@ -0,0 +1,28 @@
+# Hebrew translations for PACKAGE package.
+msgid ""
+msgstr ""
+"Project-Id-Version: adding up to 10 v1\n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: 2009-07-07 04:46-0600\n"
+"Last-Translator: Felipe López Toledo <zer.subzero@gmail.com>\n"
+"Language-Team: karma <zer.subzero@gmail.com>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Poedit-Language: Hebrew\n"
+"X-Poedit-Country: Israel\n"
+"X-Poedit-SourceCharset: utf-8\n"
+
+
+msgid  "choose an option"
+msgstr "בחר באפשרות"
+
+msgid  "Time"
+msgstr "שעה"
+
+msgid  "Level"
+msgstr "רמת"
+
+msgid  "Restart"
+msgstr "הפעל מחדש"
+
diff --git a/examples/adding_up_to_10_canvas/resources.html b/examples/adding_up_to_10_canvas/resources.html
new file mode 100755
index 0000000..0e93455
--- /dev/null
+++ b/examples/adding_up_to_10_canvas/resources.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Karma - Adding Up to 10</title>
+	<meta name="keywords" content="karma,javascript,html5,sugar,sugarlabs,gsoc,ole,nepal" />
+	<link type="text/css" rel="stylesheet" href="css/lesson.css" />
+	<meta http-equiv="content-type" content="text/html; charset=utf-8">
+	<link type="image/ico" rel="icon" href="../../assets/default/images/favicon.ico" /> 
+	<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
+	<script type="text/javascript" src="../../js/karma.Gettext.js"></script>
+	<script type="text/javascript" src="../../js/jquery.karma.js"></script>
+	<link rel="stylesheet" href="css/knavbar.css" type="text/css"/>
+
+</head>
+
+<body>
+
+<div id="lesson">
+<nav>
+<li><a href="../../chakra/grade1mathematics.html"><img src="../../assets/default/images/back.png" alt="Back" title="Back"></a></li>
+<li><a href="../../index.html"><img src="../../assets/default/images/chakra_logo.png" alt="Chakra" title="Chakra"></a></li>
+<li><a id="welcome" href="index_knavbar.html">Adding up to 10</a></li>
+<li><img src="../../assets/default/images/tutorial_bw.png" alt="Tutorial" title="Tutorial"></li>
+<li><a href="exercise.html"><img src="../../assets/default/images/exercise.png" alt="Exercise" title="Exercise"></a></li>
+<li><a href="resources.html" class="selected"><img src="../../assets/default/images/resources.png" alt="Resources" title="Resources"></a></li>
+<li><a href="#tab_help"><img src="../../assets/default/images/help.png" alt="Help" title="Help"></a></li>
+<li><a href="http://olenepal.org/" target="_blank"><img src="../../assets/default/images/olenepal_logo.gif" alt="OLE Nepal logo" title="OLE Nepal Web site"></a></li>
+</nav>
+
+<li><a href="assets/en/docs/teachernotes.swf" target="_blank">Teacher's notes</a></li>
+<li><a href="assets/en/docs/lessonplan.swf" target="_blank">Lesson plan</a></li>
+<li><a href="quadrilaterals.zip">Download</a></li>
+</div>
+
+</body>
+
+</html>