diff options
author | Bryan Berry <bryan@olenepal.org> | 2010-02-26 06:01:52 (GMT) |
---|---|---|
committer | Bryan Berry <bryan@olenepal.org> | 2010-02-26 06:01:52 (GMT) |
commit | 7a995451f8fe8dc10d1d12e4d5831208473dba8a (patch) | |
tree | 2160c707e2e784289b8f84b2a3da18e039ebc5e5 | |
parent | d66cf3a713e698a4172b35ba01aede26750095f2 (diff) |
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 + |