Web   ·   Wiki   ·   Activities   ·   Blog   ·   Lists   ·   Chat   ·   Meeting   ·   Bugs   ·   Git   ·   Translate   ·   Archive   ·   People   ·   Donate
summaryrefslogtreecommitdiffstats
path: root/examples/6_English_matchingProductsAndWords
diff options
context:
space:
mode:
Diffstat (limited to 'examples/6_English_matchingProductsAndWords')
-rwxr-xr-xexamples/6_English_matchingProductsAndWords/css/lesson.css245
-rwxr-xr-xexamples/6_English_matchingProductsAndWords/index.html59
-rwxr-xr-xexamples/6_English_matchingProductsAndWords/js/lesson.js116
3 files changed, 92 insertions, 328 deletions
diff --git a/examples/6_English_matchingProductsAndWords/css/lesson.css b/examples/6_English_matchingProductsAndWords/css/lesson.css
index 6bc2bdc..3fe81fa 100755
--- a/examples/6_English_matchingProductsAndWords/css/lesson.css
+++ b/examples/6_English_matchingProductsAndWords/css/lesson.css
@@ -1,147 +1,48 @@
-@CHARSET "ISO-8859-1";
@CHARSET "UTF-8";
/****** Page Styles ****/
-body {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 10pt;
- margin: 0px;
- background-color: #FFFFCC;
-}
-#header {
- background-image: url(../assets/image/bg_header.png);
- background-repeat: repeat-x;
- height: 89px;
- width: 100%;
- position: absolute;
- left: 0px;
- top: 0px;
-}
-#topbtn_left {
- float: left;
- height: 60px;
- width: 60px;
- padding-top: 13px;
- padding-left: 5px;
-}
-
-
- #linkBack{
- width: 60px; height: 59px;
- background:url(../assets/image/btn_back.png);
- }
- #linkBack:hover{
- background:url(../assets/image/btn_back_hover.png);
- }
-
-#lesson_title {
- float: left;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 16pt;
- font-weight: bold;
- color: #FFFFFF;
- margin-left: 10px;
- background-image: url(../assets/image/bg_title_block.png);
-}
-#topbtn_right {
- float: right;
- height: 60px;
- width: 60px;
- padding-top: 13px;
- padding-right: 5px;
-}
- #linkHelp{
- width: 60px; height: 60px;
- background:url(../assets/image/btn_help.png);
- }
- #linkHelp:hover{
- background:url(../assets/image/btn_help_hover.png);
- }
- #linkOle{
- width: 60px; height: 60px;
- background:url(../assets/image/btn_ole.png);
- }
- #linkOle:hover{
- background:url(../assets/image/btn_ole_hover.png);
- }
- #linkNext{
- width: 60px; height: 60px;
- background:url(../assets/image/btn_next.png);
- }
- #linkNext:hover{
- background:url(../assets/image/btn_next_hover.png);
- }
-#footer {
- background-image: url(../assets/image/bg_footer.png);
- background-repeat: repeat-x;
- position: absolute;
- height: 69px;
- width: 100%;
- left: 0px;
- bottom: 0px;
-}
-#score_box {
- float: left;
- padding-left: 10px;
- padding-top: 10px;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- color: #FFFF00;
- font-size: 16pt;
- font-weight: bold;
-}
-#botbtn_right {
- float: right;
- height: 55px;
- width: 251px;
- padding-right: 5px;
- padding-top: 5px;
+
+#clickBox{
+ margin-top: -5px;
+ padding:4px;
+ border:2px dashed blue;
+ background-color:white;
+ color:black;
}
- #linkStart{
- width: 251px; height: 55px;
- background:url(../assets/image/btn_start.png);
- }
- #linkStart:hover{
- background:url(../assets/image/btn_start_hover.png);
- }
- #linkStart:active{
- background:url(../assets/image/btn_start_mouse_down.png);
- }
- #linkPlayAgain{
- width: 251px; height: 55px;
- background:url(../assets/image/btn_play_again.png);
- }
- #linkPlayAgain:hover{
- background:url(../assets/image/btn_play_again_hover.png);
- }
- #linkPlayAgain:active{
- background:url(../assets/image/btn_play_again_mouse_down.png);
- }
/**** End of the page style ****/
/**** Game Styles ****/
-a{
- color:white;
+#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;
+
}
-#currentTitle{
- width: 150px;
- height: 80xp;
- font:25px/30px "Courier New", Courier, monospace;
- font-weight: bold;
- color: red;
+
+#content a>div{
+ margin: auto auto auto auto;
+ line-height: 9em;
}
+
#content{
- margin: 0px auto;
- margin-top: 90px;
- width: 95%;
- height: 375px;
-}
-#section{
- margin: 0px auto;
- width: 620px;
+ margin-top: 2em;
+ margin-right: auto;
+ margin-bottom: 0;
+ margin-left:auto;
+ width: 78%;
+ height: 100%;
}
+
#gameOver{
margin-top:150px;
text-align:center;
@@ -165,21 +66,11 @@ a{
}
+
.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;
-}
-.showText{
- float:left;
- width: 90px;
- height: 90px;
+ width: 90px;
+ height: 90px;
background-color: #99E6FF;
margin: 0.2em;
text-align:center;
@@ -187,73 +78,11 @@ a{
font-weight:bold;
color:black;
}
+
.matched{
float:left;
- width: 90px;
- height: 90px;
+ width: 9.6em;
+ height: 9.6em;
background-color: blue;
}
-#timerBar {
- float: left;
- width: 215px;
- height:35px;
- padding-left: 10px;
- padding-top: 0px;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- color: #FFFF00;
- font-size: 16pt;
- font-weight: bold;
-}
-#timerTitle{
- float: left;
- margin-top: 20px;
- width: 50px;
- height: 35px;
-}
-
-.timerBoxes{ /* Show the timer running after the game has began.... */
-float:right;
-margin: 0.5em 0 0 0.1em;
-width: 35px;
-height: 30px;
-border: 2px dotted green;
-padding: 3px;
-color: blue;
-font : bold 25px Arial Black, Times New Roman;
-background: #ACC;
-}
-
-#clickDisplay{
- float: left;
- width: 150px;
- height:35px;
- margin-left: 50px;
- padding-left: 20px;
- padding-top: 0px;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- color: #FFFF00;
- font-size: 16pt;
- font-weight: bold;
-}
-#clickTitle{
- float: left;
- margin-top: 20px;
- width: 50px;
- height: 35px;
-
-}
-
-#clickBox{
-float:right;
-margin: 0.5em 0 0 0.1em;
-height: 30px;
-border: 2px dotted green;
-padding: 3px;
-color: red;
-font : bold 25px Arial Black, Times New Roman;
-background: #ACC;
-}
-
-
-
diff --git a/examples/6_English_matchingProductsAndWords/index.html b/examples/6_English_matchingProductsAndWords/index.html
index b6f7057..b6a84f8 100755
--- a/examples/6_English_matchingProductsAndWords/index.html
+++ b/examples/6_English_matchingProductsAndWords/index.html
@@ -1,50 +1,37 @@
<!DOCTYPE html>
<head>
<title>Class 6 Maths Matching Products and Words</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/ui.kHeader.js"></script>
+ <script type="text/javascript" src="../../js/ui.kFooter.js"></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 Products and Words <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="footer">
- <!-- Timer Section -->
- <div id ="timerBar">
- <div id="timerTitle">Timer:</div>
- <div id="timerBox1" class="timerBoxes"></div>
- <div id="timerBox2" class="timerBoxes"></div>
- <div id="timerBox3" class="timerBoxes"></div>
- </div>
- <div id="clickDisplay">
- <div id="clickTitle">Clicks:</div>
- <div id="clickBox"></div>
- </div>
-
- <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 id="kFooter" >
+ <div id="clickTitle">Clicks:</div>
+ <div id="clickBox"></div>
</div>
</body>
</html>
diff --git a/examples/6_English_matchingProductsAndWords/js/lesson.js b/examples/6_English_matchingProductsAndWords/js/lesson.js
index 6d8de62..a0f62af 100755
--- a/examples/6_English_matchingProductsAndWords/js/lesson.js
+++ b/examples/6_English_matchingProductsAndWords/js/lesson.js
@@ -1,4 +1,5 @@
$(document).ready(function() {
+
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
@@ -14,7 +15,18 @@ $(document).ready(function() {
var clickCounter = 0;
var NUM_OBJECTS = 24; //total number of objects in the game
var products_words = new Array('Cow','Hen','Wood','Bee','Tap','House','Sheep','Cloth','Lamp','Leather','Wheat','Sugar','Milk','Egg','Chair','Honey','Water','Brick','Wool','Shirt','Light','Shoes','Flour','Sweet');
- var section = $('#section');
+ //var section = $('#section');
+ var $content = $('#content');
+
+ Karma.scaleWindow();
+ $('#kHeader').kHeader({title:"English: Matching Words with Products"});
+ 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){
@@ -24,84 +36,26 @@ $(document).ready(function() {
}
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;
}
- };
-
-
-
+ objrand = Karma.shuffle(objrand);
- 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
- }
+
};
- //alert(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>');
}
@@ -117,6 +71,7 @@ $(document).ready(function() {
clickCounter++;
clickCounter = checkTime(clickCounter); //for showing format as 1 for 01
$("#clickBox").html(clickCounter);
+
show_processed_image();
return true;
@@ -211,9 +166,9 @@ $(document).ready(function() {
};
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);
});
};
@@ -225,27 +180,20 @@ $(document).ready(function() {
clickCounter = 0;
matchedObjects = [];
s=0; m=0; h=0;
- $('#section').html('');
- $('#timerBox1').html('');$('#timerBox2').html('');$('#timerBox3').html('');
+ $('#content').html('');
+ //$('#timerBox1').html('');$('#timerBox2').html('');$('#timerBox3').html('');
$('#clickBox').html('00');
generate_random_objects_no();
- startTimer();
+ //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('');
+
+ $('#content').html('');
$('#clickBox').html('00');
//game();
generated by cgit v0.9.1 at 2024-05-17 21:24:46 (GMT)