refactor to use kFooter and kHeader. Still works but needs css cleaning up

4 files changed, 169 insertions, 130 deletions

diff --git a/examples/6_English_matchingProductsAndWords/js/lesson.js b/examples/6_English_matchingProductsAndWords/js/lesson.js
index e7b4f76..6cd88fd 100755
--- a/examples/6_English_matchingProductsAndWords/js/lesson.js
+++ b/examples/6_English_matchingProductsAndWords/js/lesson.js
@@ -3,7 +3,6 @@ $(document).ready(function() {
 	$._.setLocale('ne');
 
 	var i,j,flag;
-	var s=0;	var m=0;	var h=0;   //varoiables for timer
 	var clickedObjects = [];   //array storing the clicks of the two succesive clicks
 	var clickedObject = 0;    //store the clicked image id
 	var matchedObjects = [];//store the matched images
@@ -87,11 +86,6 @@ $(document).ready(function() {
 
 	var process_object = function(){
 		var matchedCondition = 0;  //not matched
-		/*
-		 alert('Clicked Objects:'+clickedObjects[0]+' & '+clickedObjects[1]+'\n'+
-			 'Actual Positions:'+actualObjects[0]+' & '+actualObjects[1]+'\n'+
-			 'Rand Objects: '+objrand);
-		 */
 		
 		if(Math.abs(clickedObjects[0]-clickedObjects[1]) === 12 && (clickedObjects[0] != clickedObjects[1])){
 			matchedCondition = 1;
@@ -181,9 +175,7 @@ $(document).ready(function() {
 		numMatched = 0;
 		clickCounter = 0;
 		matchedObjects = [];
-		s=0;	m=0;	h=0;   
 		$('#content').html('');
-		//$('#timerBox1').html('');$('#timerBox2').html('');$('#timerBox3').html('');
 		$('#clickBox').html('00');
 		generate_random_objects_no();
 		//startTimer();
diff --git a/examples/6_Maths_matchingAnglesAndShapes/css/lesson.css b/examples/6_Maths_matchingAnglesAndShapes/css/lesson.css
index e66e314..fdd6726 100755
--- a/examples/6_Maths_matchingAnglesAndShapes/css/lesson.css
+++ b/examples/6_Maths_matchingAnglesAndShapes/css/lesson.css
@@ -1,7 +1,97 @@
-@CHARSET "ISO-8859-1";

 @CHARSET "UTF-8";

+

 /****** Page Styles ****/

 

+

+#clickBox{

+    margin-top: -5px;

+    padding:4px;

+    border:2px dashed blue;

+    background-color:white;

+    color:black;

+}

+

+/**** End of the page style ****/

+

+/**** Game Styles  ****/

+

+#content a{

+	float:left;

+	width: 9em;

+	height: 9em;

+	padding: 0;

+	background-color: #99E6FF;

+	margin: 0 0.6em 0.6em 0;

+	text-align:center;

+	font-size: 6em/8em;

+	font-weight:bold;

+	color:black;	

+	

+}

+

+#content a>div{

+    margin: auto auto auto auto;

+    line-height: 9em;

+}

+

+#content{	

+	margin-top: 2em; 

+	margin-right: auto;

+	margin-bottom: 0; 

+	margin-left:auto;

+	width: 78%;

+	height: 100%;

+}

+

+

+#gameOver{

+	margin-top:150px;

+	text-align:center;

+	font: 30px/35px Verdana, Geneva, Arial, Helvetica, sans-serif;

+	font-weight:bold;

+	color:red;		

+}

+#gameOverInfo{

+	margin-top: 35px;

+	text-align:center;

+	font: 30px/35px Helvetica, Geneva, Arial, Verdana, sans-serif;

+	font-weight:bold;

+	color:blue;

+	

+}

+.specialText{

+	font: 30px/35px Helvetica, Geneva, Arial, Verdana, sans-serif;

+	font-weight:bold;

+	color:#FF9900;

+	border-bottom: 2px dotted #CCC;

+	

+}

+

+

+.default{

+	float:left;

+	width: 90px;

+	height: 90px;

+	background-color: #99E6FF;

+	margin: 0.2em;

+	text-align:center;

+	font: 15px/85px Verdana, Geneva, Arial, Helvetica, sans-serif;

+	font-weight:bold;

+	color:black;	

+}

+

+.matched{

+	float:left;

+	width: 9.6em;

+	height: 9.6em;

+	background-color: blue;

+}

+

+

+

+

+

+/* OLD styles

 body {

 	font-family: Verdana, Arial, Helvetica, sans-serif;

 	font-size: 10pt;

@@ -117,9 +207,7 @@ body {
 			background:url(../assets/image/btn_play_again_mouse_down.png);

 		}

 

-/**** End of the page style ****/

 

-/**** Game Styles  ****/

 

 a{

 	color:white;

@@ -203,7 +291,7 @@ a{
 	height: 35px;

 }

 

-.timerBoxes{   /* Show the timer running after the game has began.... */

+.timerBoxes{  

 float:right;

 margin: 0.5em 0 0 0.1em;

 width: 35px;

@@ -246,5 +334,5 @@ font : bold 25px Arial Black, Times New Roman;
 background: #ACC;

 }

 

-

+*/

 

diff --git a/examples/6_Maths_matchingAnglesAndShapes/index.html b/examples/6_Maths_matchingAnglesAndShapes/index.html
index a76ef38..08d851b 100755
--- a/examples/6_Maths_matchingAnglesAndShapes/index.html
+++ b/examples/6_Maths_matchingAnglesAndShapes/index.html
@@ -1,36 +1,51 @@
 <!DOCTYPE html>

+<html>

 <head>

 	<title>Class 6 Maths Matching Angles and Shapes</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/image/favicon.ico" /> 

-	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

+	<link type="text/css" rel="stylesheet" href="../../css/karma.css" />

+	<link type="text/css" rel="stylesheet" href="../../css/ui.kHeader.css" />

+	<link type="text/css" rel="stylesheet" href="../../css/ui.kFooter.css" />

+	<link type="text/css" rel="stylesheet" href="css/lesson.css" />

+

+	<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>

+	<script type="text/javascript" 

+		src="../../js/ui.core-draggable-resizable-dialog.js"></script>

+	<script type="text/javascript" src="../../js/jquery.i18n.js"></script>

+	<script type="text/javascript" src="../../js/jquery.ne.json"></script>

+	<script type="text/javascript" src="../../js/ui.kHeader.js"></script>

+	<script type="text/javascript" src="../../js/ui.kFooter.js"></script>

+	<script type="text/javascript" src="../../js/ui.kFooter.ne.json"></script>

+	<script type="text/javascript" src="../../js/ui.feedback.js"></script>

+	<script type="text/javascript" src="../../js/karma.js"></script>

 	<script type="text/javascript" src="js/lesson.js"></script>

+

 </head>

 <body>

-	<div id="header">

-		<div id="topbtn_left"><a href="http://olenepal.org"><div id="linkOle"></div></a></div>

-		<div id="lesson_title">

-			<img src="assets/image/title_block_lt.png" width="33" height="89" align="absmiddle" />

-				Matching Angles and Shapes<span id="currentTitle"></span> 

-			<img src="assets/image/title_block_rt.png" width="33" height="89" align="absmiddle" />

-		</div>

-		<div id="topbtn_right"><a href="#"><div id="linkHelp"></div></a></div>

-		<div id="topbtn_right"><a href="http://olenepal.org"><div id="linkOle"></div></a></div>		

-	</div>

 

-	<div id="content">

-		<div id="section"></div>

-		<div id="help"></div>

-	</div>

+	<div id="kHeader"></div>

+

 	<form name="delayForm">

 		<input type="hidden" name="delayval" size="5">

 	</form>

+

+	<div id="kMain"> 

+	  <div id="content">

+            <div id="section"></div>

+	  </div>

+	</div>

+	

+	<div id="kFooter" >

+	    <div id="clickTitle">Clicks:</div>

+	    <div id="clickBox"></div>

+	</div>

 	

+</body>

+</html>

 

-	<div id="footer">

-		<!-- Timer Section  -->

+

+<!--<div id="footer">

 		<div id ="timerBar">

 			<div id="timerTitle">Timer:</div>

 			<div id="timerBox1"  class="timerBoxes"></div>

@@ -45,6 +60,4 @@
 			<div id="botbtn_right"><a href="#"><div id="linkStart"></div></a></div>				

 			<div id="botbtn_right"><a href="#"><div id="linkPlayAgain"></div></a></div>

 		

-	</div>

-</body>

-</html>

+	</div> -->

diff --git a/examples/6_Maths_matchingAnglesAndShapes/js/lesson.js b/examples/6_Maths_matchingAnglesAndShapes/js/lesson.js
index e62cdae..46cbf77 100755
--- a/examples/6_Maths_matchingAnglesAndShapes/js/lesson.js
+++ b/examples/6_Maths_matchingAnglesAndShapes/js/lesson.js
@@ -1,6 +1,7 @@
 $(document).ready(function() {
-	var i,j,flag;
-	var s=0;	var m=0;	var h=0;   //varoiables for timer
+
+	var i = 0, j = 0, flag = 0;
+	var s=0, m=0, h=0;   
 	var clickedObjects = [];   //array storing the clicks of the two succesive clicks
 	var clickedObject = 0;    //store the clicked image id
 	var matchedObjects = [];//store the matched images
@@ -14,100 +15,55 @@ $(document).ready(function() {
 	var clickCounter = 0;
 	var NUM_OBJECTS = 24;  //total number of objects in the game
 	var shapes_angles = new Array('Acute-Angle','Right-Angle','Obtuse-Angle','Triangle','Square','Rhombus','Rectangle','Parallelogram','Pentagon','Hexagon','Septagon','Octagon','Acute-Angle','Right-Angle','Obtuse-Angle','Triangle','Square','Rhombus','Rectangle','Parallelogram','Pentagon','Hexagon','Septagon','Octagon');
-	var section = $('#section');	
+	//var section = $('#section');	
+	var $content = $('#content');
 	var shapes;  //store the current shape or angle name
 
+		      
+	Karma.scaleWindow();
+	$('#kHeader').kHeader({title:"Maths: Matching Angles with Shapes"});
+	var $kFooter = $('#kFooter').kFooter({scoreboard: false, startButton: true,
+		pauseButton: true, restartButton: true, timer: true});
+
+	$kFooter.bind('kFooterStart', game);  		      
+	$kFooter.bind('kFooterRestart', game);
+
 
-	var checkTime = function(timePara){
+        var checkTime = function(timePara){
 	    if (timePara<10 )
 	    {
 		timePara="0" + timePara;
 	    }
 	    return timePara;
 	};
-
 	
-	var startTimer = function(){
-				s=checkTime(s);					
-				m=checkTime(m);
-				h=checkTime(h);
-				clickCounter = checkTime(clickCounter);
-				document.getElementById('clickBox').innerHTML=clickCounter;
-				document.getElementById('timerBox1').innerHTML=s;
-				document.getElementById('timerBox2').innerHTML=m;
-				document.getElementById('timerBox3').innerHTML=h;
-				
-	};
-	
-	var increaseTime = function(){
-	    if(play == 1){
-			if(restart == 1){
-			s = 0;
-			m = 0;
-			h = 0;
-			}
-		s++;
-		if(s>60){
-		    m++;
-		    m=checkTime(m);
-		    document.getElementById('timerBox2').innerHTML=m;
-		    s = 0;
-		}
-		if(m>60){
-		    h++; 
-		    h=checkTime(h);
-		    document.getElementById('timerBox3').innerHTML=h;
-		    
-		    m=0;
-		    
-		}				
-		s=checkTime(s);					
-		
-		document.getElementById('timerBox1').innerHTML=s;
-		
-		var t=setTimeout(function(){increaseTime();},1000);
-	    }
-	};
 
-	
 
-	
+        var generate_random_objects_no = function(){
+	    
+	    for(i=1; i<NUM_OBJECTS; i++){
+		objrand[i] = i;
+	    }
 
-	var generate_random_no = function()	{                //generate random number
-		var rand_no = Math.floor(NUM_OBJECTS*Math.random());		
-		return rand_no;
-	};
-	
-	var generate_random_objects_no = function(){
-		
-		objrand[0]=generate_random_no();   
-		for(i=1; i<NUM_OBJECTS; i++){
-			do{
-				flag = 0;
-				objrand[i] = generate_random_no();
-				for(j=0; j<i; j++){
-					if(objrand[i]===objrand[j]){
-						flag++;
-					}
-				}
-			}while(flag != 0 );  //end of do while loop	
-		}
+	    objrand = Karma.shuffle(objrand);
+
+	    
 		
 	};
 	
-	
-	
+
 	var check_game_over = function(){
 		if(numMatched === NUM_OBJECTS){   //show all
 			play = 0;
-			$('#section').html('');
-			$('#section').append('<div id="gameOver">GAME OVER<br/>Congratulations!!!</div>');
-			$('#section').append('<div id="gameOverInfo">You have completed the game in <span class="specialText">'+clickCounter+
+			$('#content').html('');
+			$('#content').append('<div id="gameOver">GAME OVER<br/>Congratulations!!!</div>');
+			$('#content').append('<div id="gameOverInfo">You have completed the game in <span class="specialText">'+clickCounter+
 					'</span> clicks within  <span class="specialText">'+h+'</span> hour  <span class="specialText">'+m+
 					'</span> minutes and  <span class="specialText">'+s+'</span> seconds .</div>');
 		}
 	};
-	
+
+
 	var store_clicked_object = function(objectClicked){
 			if(play === 1){			
 		    clickedObject = objectClicked;
@@ -136,14 +92,10 @@ $(document).ready(function() {
 		}
 			
 	};
+		       
 
 	var process_object = function(){
 		var matchedCondition = 0;  //not matched
-		/*
-		 alert('Clicked Objects:'+clickedObjects[0]+' & '+clickedObjects[1]+'\n'+
-			 'Actual Positions:'+actualObjects[0]+' & '+actualObjects[1]+'\n'+
-			 'Rand Objects: '+objrand);
-		 */
 		
 		if(Math.abs(clickedObjects[0]-clickedObjects[1]) === 12 && (clickedObjects[0] != clickedObjects[1])){
 			matchedCondition = 1;
@@ -216,44 +168,38 @@ $(document).ready(function() {
 	       $('#object'+clickedObject).html(shapes);
 	    }
 	};
+	
+	
 
 	var assignSquares = function (square){	    
-	    section.append('<a href="#"></a>');
-	    $('#section a:last-of-type').append('<div class="default" id="object'+square+'"></div>'); 	
-	    $('#section a:last-of-type').click(function(){		    
+	    $content.append('<a href="#"></a>');
+	    $('#content a:last-of-type').append('<div class="default" id="object'+square+'"></div>'); 	
+	    $('#content a:last-of-type').click(function(){		    
 		    store_clicked_object(square);
 		});
 	};
-		
 	
+
 	function game(){
 		numClicked = 0;
 		numMatched = 0;
 		clickCounter = 0;
 		matchedObjects = [];
-		s=0;	m=0;	h=0;   
-		$('#section').html('');
-		$('#timerBox1').html('');$('#timerBox2').html('');$('#timerBox3').html('');
+		$('#content').html('');
 		$('#clickBox').html('00');
 		generate_random_objects_no();
-		startTimer();
 		var square;
 		for(i=0; i<NUM_OBJECTS; i++){
 		    assignSquares(i);
 		}
 		play = 1;
-		increaseTime();		
+		//increaseTime();		
 	}
-	$('#linkStart').click(function(){
-		game();
-	});
 
-	$('#linkPlayAgain').click(function(){
-		game();
-		
-	});
 	$('#section').html('');
 	$('#clickBox').html('00');
 	game();
 
+
 });//end of DOM
+