From 7a995451f8fe8dc10d1d12e4d5831208473dba8a Mon Sep 17 00:00:00 2001 From: Bryan Berry Date: Fri, 26 Feb 2010 06:01:52 +0000 Subject: refactor to use kFooter and kHeader. Still works but needs css cleaning up --- 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 @@ + Class 6 Maths Matching Angles and Shapes - - - + - + + + + + + + + + + + + + + + - -
-
-
-
+
+
+ +
+
+
+
+
+ +
+
Clicks:
+
+
+ + - '); - $('#section').append('
You have completed the game in '+clickCounter+ + $('#content').html(''); + $('#content').append('
GAME OVER
Congratulations!!!
'); + $('#content').append('
You have completed the game in '+clickCounter+ ' clicks within '+h+' hour '+m+ ' minutes and '+s+' seconds .
'); } }; - + + 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(''); - $('#section a:last-of-type').append('
'); - $('#section a:last-of-type').click(function(){ + $content.append(''); + $('#content a:last-of-type').append('
'); + $('#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