testing doing timer animation w/ raphael

3 files changed, 28 insertions, 14 deletions

diff --git a/examples/adding_up_to_10/css/lesson.css b/examples/adding_up_to_10/css/lesson.css
index 5147cfa..c6044b0 100755
--- a/examples/adding_up_to_10/css/lesson.css
+++ b/examples/adding_up_to_10/css/lesson.css
@@ -76,6 +76,8 @@ background:none none repeat scroll 0 0;
 position:absolute;
 top: 50px;
 left: 75px;
+width:200px; 
+height:200px;
 }
 #plussign {
 display: block;
@@ -97,6 +99,8 @@ position:absolute;
 left: 50px;
 right:50px;
 top:50px;
+width:200px;
+height:200px;
 }
 
 .bottom {
@@ -118,6 +122,7 @@ position:relative;
     top: 20px;
 }
 
+
 .sidebarItem {
     clear:both;
     float:left;
@@ -163,7 +168,8 @@ left:25px;
 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/index.html
index ea752d9..6a7db8b 100755
--- a/examples/adding_up_to_10/index.html
+++ b/examples/adding_up_to_10/index.html
@@ -4,9 +4,10 @@
 	<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">
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 	<link type="image/ico" rel="icon" href="../../assets/default/images/favicon.ico" /> 
 	<link type="text/css" rel="stylesheet" href="../../css/karma.css" />
+	<script type="text/javascript" src="../../js/raphael-min.js"></script>
 	<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>
@@ -23,7 +24,7 @@
 
 	<div id="topLtSide">
 	  <img id="topLtBox" src="assets/generic/images/yellowBox.png" alt="" />
-	  <canvas id="topLtCanvas" width="200px" height="200px"></canvas>
+	  <div id="topLtCanvas" ></div>
 
 	</div>
 	<div id="topMd">
@@ -31,24 +32,24 @@
 	</div>
 	<div id="topRtSide">
 	  <img id="topRtBox" src="assets/generic/images/yellowBox.png" alt=""/>
-	  <canvas id="topRtCanvas" width="200px" height="200px"></canvas>
+	  <div id="topRtCanvas"></div>
 	</div>
 
       </div>
 
       <div id="bottom">
-	<!-- <canvas id="bottomCanvas"></canvas> -->
+	<!-- <div id="bottomCanvas"></div> -->
 	<div id="bottomLt" class="bottom">
 	  <img class="bottomBox" src="assets/generic/images/yellowBox.png" alt=""/>
-	  <canvas id="bottomLtCanvas" class="bottomBox" width="200px" height="200px"> </canvas>
+	  <div id="bottomLtCanvas" class="bottomBox"> </div>
 	</div>
 	<div id="bottomMd" class="bottom">
 	  <img class="bottomBox" src="assets/generic/images/yellowBox.png" alt=""/>
-	  <canvas id="bottomMdCanvas" class="bottomBox" width="200px" height="200px"> </canvas>
+	  <div id="bottomMdCanvas" class="bottomBox"> </div>
 	</div>
 	<div id="bottomRt" class="bottom">
 	  <img class="bottomBox" src="assets/generic/images/yellowBox.png" alt=""/>
-	  <canvas id="bottomRtCanvas" class="bottomBox" width="200px" height="200px"> </canvas>
+	  <div id="bottomRtCanvas" class="bottomBox"> </div>
 	</div>
 
       </div>
@@ -57,14 +58,14 @@
     <div id="sidebar">
       <div class="sidebarItem">
 	<img id="timer" src="assets/generic/images/scorebox.png" alt=""/>
-	<canvas id="timerCanvas" width="100" height="140" > </canvas>
+	<div id="timerCanvas"> </div>
       </div>
       <div class="sidebarItem">
 	<img id="scorebox" src="assets/generic/images/scorebox.png" alt=""/>
-	<canvas id="scoreboxCanvas" width="100" height="140"></canvas>
+	<div id="scoreboxCanvas"></div>
       </div>
       <div class="sidebarItem">
-	<canvas id="chimpCanvas" width="120px" height="125px"> </canvas>
+	<div id="chimpCanvas"> </div>
 	<div id="buttons">
 	    <button id="start">Start</button>
 	    <button id="stop">Stop</button>
diff --git a/examples/adding_up_to_10/js/lesson.js b/examples/adding_up_to_10/js/lesson.js
index 852bd3f..f471f38 100755
--- a/examples/adding_up_to_10/js/lesson.js
+++ b/examples/adding_up_to_10/js/lesson.js
@@ -24,7 +24,7 @@ $(document).ready(function(){
 	    {name: "trigger", file: "trigger.ogg", localized: false}
  	    
 	],
-	surfaces: [
+/*	surfaces: [
 	    {name:"topLt", canvas:"topLtCanvas"},
 	    {name:"topRt", canvas:"topRtCanvas"},
 	    {name:"bottomLt", canvas:"bottomLtCanvas"},
@@ -34,7 +34,7 @@ $(document).ready(function(){
 	    {name:"scorebox", canvas:"scoreboxCanvas"},
 	    {name:"chimp", canvas:"chimpCanvas"}
     
-]	
+	]	*/
     });
     
     
@@ -258,7 +258,7 @@ k.main(function() {
 
 
 						      
-
+/*
 	//put the buttons
 	var buttons=[];
 	buttons[ 0 ] = { "surface": k.surfaces["bottomLt"], "id": 0};
@@ -289,6 +289,13 @@ k.main(function() {
     addEventListener('click', reset, false);
    
     k.library.images["normalChimp"].draw(k.surfaces["chimp"], 0, 0);
+*/
+    
+    var timerPaper = Raphael('timerCanvas', 100, 150);
+    var timerRect = timerPaper.rect(10, 25, 85, 20, 3);
+    
+    timerRect.attr('fill', "#fff");
+    timerRect.animate({y: 130}, 2000, function(){ timerRect.attr("y", "25");});
 
 
 //end of Karma.main