stop and start buttons still don't work

3 files changed, 182 insertions, 127 deletions

diff --git a/examples/adding_up_to_10/css/lesson.css b/examples/adding_up_to_10/css/lesson.css
index 2039dee..ec5bfc6 100755
--- a/examples/adding_up_to_10/css/lesson.css
+++ b/examples/adding_up_to_10/css/lesson.css
@@ -153,14 +153,16 @@ width:100px;
 height:150px;
 top:10px;
 left:25px;
+z-index: 10;
 }
 
-#scoreboxPaper {
-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;
 }
 
 
diff --git a/examples/adding_up_to_10/index.html b/examples/adding_up_to_10/index.html
index 1918c9f..464d6fb 100755
--- a/examples/adding_up_to_10/index.html
+++ b/examples/adding_up_to_10/index.html
@@ -62,7 +62,7 @@
       </div>
       <div class="sidebarItem">
 	<img id="scorebox" src="assets/generic/images/scorebox.png" alt=""/>
-	<div id="scoreboxPaper"></div>
+	<div id="scoreboxText"></div>
       </div>
       <div class="sidebarItem">
 	<div id="chimpPaper"> </div>
diff --git a/examples/adding_up_to_10/js/lesson.js b/examples/adding_up_to_10/js/lesson.js
index d07ca2f..3f94281 100755
--- a/examples/adding_up_to_10/js/lesson.js
+++ b/examples/adding_up_to_10/js/lesson.js
@@ -17,14 +17,14 @@ $(document).ready(function(){
 
 	]
 	,
-/*	sounds: [
+	sounds: [
 
 	    {name: "correct",  file: "correct.ogg"},
 	    {name: "incorrect", file: "incorrect.ogg"},
 	    {name: "trigger", file: "trigger.ogg", localized: false}
  	    
 	],
-*/
+
     });
     
     
@@ -46,8 +46,13 @@ k.main(function() {
     var endTimerY = 100;
     var offsetTimerY = 5;
     var timerId;
-    var timerPaper, timerRect, chimpPaper, normalChimp, sadChimp, happyChimp, 
+    var timerPaper, timerRect, 
+	chimpPaper, normalChimp, sadChimp, happyChimp, 
 	topLtBox, topRtBox, bottomLtBox, bottomMdBox, bottomRtBox;
+    var buttons=[];
+    var stopTimer = false;
+    var chooseMe;
+
     var createBox = function (paperName) {
 	var set, paper, box;
 	paper = Raphael(paperName+"Paper", 200, 200);
@@ -55,7 +60,6 @@ k.main(function() {
 	return { "paper": paper, "prefix": paperName, "set": set};	
     };
 
-
     topLtBox = createBox("topLt");
     topRtBox = createBox("topRt");
     bottomLtBox = createBox("bottomLt");
@@ -65,124 +69,203 @@ k.main(function() {
     sets =  [topLtBox["set"], topRtBox["set"], bottomLtBox["set"], 
 	     bottomMdBox["set"], bottomRtBox["set"]];
 
-    
+    //put the buttons on the cards
+    buttons[ 0 ] = { "node": $('#bottomLtPaper')[0], "id": 0};
+    buttons[ 1 ] = { "node": $('#bottomMdPaper')[0], "id": 1};
+    buttons[ 2 ] = { "node": $('#bottomRtPaper')[0], "id": 2};
 
-/*
-    var timerFn = function () {
-	k.surfaces['timer'].clear();
+    var addButtons = function(){
+	buttons.forEach(function(button) {
+	    var thisChoice = choices[ button.id ]; 
+	    button.node.addEventListener('click', function chooseMe(){ 
+		choose (thisChoice);}, false);
+	});
+    };
 
-	if ( startTimerY >= endTimerY ){
-	    //you didn't answer in time
-	    k.library.sounds["trigger"].play();
-	    answer(false, true);
-	    game();
-	} 
-	else {
-	    k.surfaces['timer'].clear();
-	    startTimerY = startTimerY + offsetTimerY;
-	    k.surfaces['timer'].ctx.fillStyle = "#fff";
-	    k.surfaces['timer'].ctx.fillRect(10, startTimerY, endTimerX, 20);
-	}
+
+    var removeButtons = function(){
+	buttons.forEach(function(button) {
+	    button.node.removeEventListener('click', chooseMe, false);
+	});
+    };
+
+    var choose = function(choice) {
+		if ( choice === total){
+		    document.write("foofoo");
+		//  answer(true);
+		    resetTimer();
+		    //game();
+		}else {
+		    //answer(false);
+		    resetTimer();
+		    //game(); 
+		} 
     };
 
-*/	
     function game () {
-//	    $.each(sets, function () {
-//		this.remove();
-//	    });
-	    
-	    
-//	    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 {
-		    // 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 );
-			}
-		    }	    
-		}
+	sets.forEach(function (set) {
+	    if(set){
+	    set.remove();
 	    }
+	});
 	    
-	    var imgId = imgNames[ level ] ;
+	
+	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 {
+		// 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 );
+		    }
+		}	    
+	    }
+	}
+	
+	var imgId = imgNames[ level ] ;
 
- 
+	
 	var card = function (box, n, d) {
-
-	//	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;
 	    var imgNames = {};
 	    var prefix = box["prefix"];	
-		imgNames[prefix] = [];
+	    imgNames[prefix] = [];
 	    if(!box["set"]){
 		box["set"] = box["paper"].set();
 	    }
 	    
 	    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;
-			    }
+		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 ( flag === true );
+		    }
+		    
+		}while ( flag === true );
 		pos.push( { "x":x, "y": y } ); 
 		imgNames[prefix][i] = box["paper"].image(k.library.images[imgId].src, x , y, 40, 40);
 		box["set"].push(imgNames[prefix][i]);		    
-		    //k.library.images[ imgId ].draw(surface, x, y )
-		}
-		
-		
-		
-		//surface.restore();
 	    }
-
 	    
+	}
+
+	
 
-	    //put the cards
+	//put the cards
 	card(topLtBox, n0, 160);
 	card(topRtBox, n1 , 160);
 	card(bottomLtBox, choices[ 0 ], 160);
 	card(bottomMdBox, choices[ 1 ] , 160);
 	card(bottomRtBox, choices[ 2 ] , 160);
-	    
+	
     }
 
+
+    var writeScore = function (newscore){
+         $('#scoreboxText')[0].innerHTML = newscore; 
+    };
+
+    var start = function () {
+	score = 0;
+	writeScore(score);
+	addButtons();
+	stopTimer = false;
+
+	//move timer back to start in case it is 
+	//already running
+	resetTimer();
+
+	//start timer
+	animateTimer();
+
+	game();
+    };
+
+    var stop = function () {
+	writeScore(' ');
+	removeButtons();
+	//stop timer
+	stopTimer = true;
+	resetTimer();
+	
+	//clear the cards
+	sets.forEach(function (set) {
+	    if(set !== null){
+	    set.remove();
+	    }
+	});
+	
+    };
+
+    var reset = function () {
+	score = 0;
+	writeScore(score);
+	stopTimer = false;
+	resetTimer();
+	animateTimer();
+	game();
+	
+    };
+
+    var resetTimer = function () {
+    	timerRect.animate({y: startTimerY}, 0);
+    };
+    
+    var animateTimer = function () {
+	timerRect.animate({y: 130}, 2000, function(){ 
+	    timerRect.attr("y", startTimerY);
+	    if (stopTimer === false){
+		animateTimer();
+	    }
+	});
+    };
+
+    var tooSlow = function () {
+
+    };
+
+
 /*
-    var writeScore = function (){
-	k.surfaces["scorebox"].save().
-	clear().
-	font("bold 50px sans-serif white").
-	fillStyle("#fff").
-	textBaseline("middle").
-	fillText("" + score, 30, 100).
-	restore();
+    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 {
+	    k.surfaces['timer'].clear();
+	    startTimerY = startTimerY + offsetTimerY;
+	    k.surfaces['timer'].ctx.fillStyle = "#fff";
+	    k.surfaces['timer'].ctx.fillRect(10, startTimerY, endTimerX, 20);
+	}
     };
 
+*/	
+
+
+/*
     var answer = function (correct, tooSlow) {
 
 	if ( correct === false) {
@@ -260,42 +343,12 @@ k.main(function() {
 
     };
 
-    var start = function () {
-	startStop(true);
-    };
-
-    
-    var stop = function () {
-	changeTimer('stop');
-    };
-    
-    var reset = function () {
-	startStop(true);
-    };
-
-
 */
 						      
 
-	//put the buttons
-    var buttons=[];
-    buttons[ 0 ] = { "node": $('#bottomLtPaper')[0], "id": 0};
-    buttons[ 1 ] = { "node": $('#bottomMdPaper')[0], "id": 1};
-    buttons[ 2 ] = { "node": $('#bottomRtPaper')[0], "id": 2};
 	
-    buttons.forEach(function(button) {
-	button.node.addEventListener('click',  function( ev ) {
-	    if ( choices[ button.id ] === total){
-		answer(true);
-		game();
-	    }else {
-		answer(false); 
-		game(); 
-	    } 
-	}, false);
-    });
 
-/*
+
     document.getElementById('start').
     addEventListener('click', start, false);
 
@@ -305,7 +358,7 @@ k.main(function() {
     
     document.getElementById('reset').
     addEventListener('click', reset, false);
-   */
+   
 
     //set up the timer
     timerPaper = Raphael('timerPaper', 100, 150);
@@ -324,7 +377,7 @@ k.main(function() {
 				  0, 20, 100, 100);
     happyChimp.hide();
     sadChimp.hide();
-    game();    
+
 
 //end of Karma.main
 });