diff options
author | Bryan Berry <bryan@olenepal.org> | 2010-02-14 11:55:06 (GMT) |
---|---|---|
committer | Bryan Berry <bryan@olenepal.org> | 2010-02-14 11:55:06 (GMT) |
commit | 8346ca30b1b7677b694b6a4f1acc3268eeb4173a (patch) | |
tree | f5a184b66bdb266046ec24f856987e7788a8c389 | |
parent | f1a6b7cbb5700287dcdc3e3cfc449401b675f7ee (diff) |
add back up-to-date js,css, and examplesfix-repo
24 files changed, 1038 insertions, 795 deletions
diff --git a/css/kDoc.css b/css/kDoc.css index fe0fe41..4830e03 100755 --- a/css/kDoc.css +++ b/css/kDoc.css @@ -1,9 +1,10 @@ #kDoc{ background-color: white; - /* width: 100%; - height: 100%;*/ + width: 100%; + height: 100%; } +/* #zoomIn{ background-image: url(epaath_images/btn_plus.png); } @@ -19,6 +20,7 @@ #zoomOut:hover{ background-image: url(epaath_images/btn_minus_hover.png); } +*/ #iframeLessonPlan{ width:100%; diff --git a/css/kStart.css b/css/kStart.css index 36b53c5..b5c07aa 100755 --- a/css/kStart.css +++ b/css/kStart.css @@ -8,13 +8,16 @@ } #kStart .center{ - width: 100%; - float: left; - text-align: center; + /* width: 100%; + float: left;*/ + width: 800px + margin-left: auto; + margin-right: auto; + text-align: center; } #kStart #top{ - height: 15%; + height: 13%; width: 100%; color: #8a72c4; } @@ -56,34 +59,12 @@ color: white; height: 70%; width: 90%; - margin-left: 60px; - margin-right: 60px; + margin-left: auto; + margin-right: auto; position:relative; - /* background-color: blue; - opacity: 0.7;*/ - background: transparent; + background-color: rgba(0,0,200,0.3); } - #blueOverlay{ - position:absolute; - background-color: #8a72c4; - width: 100%; - height: 100%; - border: 2px solid white; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - opacity: 0.7; - z-index: 10; - } - - #textOverlay{ - position:absolute; - width: 100%; - height: 100%; - opacity: 1.0; - z-index:11; - } - #grade{ margin-top: 0.5em; } @@ -167,22 +148,24 @@ width: 100%; color: white; } - #logo>div{ - width: 150px; + #logo{ + display: block; + width: 320px; height: 60px; + float: none; background-image: url(epaath_images/ole_logo.png); background-repeat: no-repeat; - text-align:center; - -webkit-background-size: 100% 100%; - -moz-background-size:100% 100%; + /* text-align:center;*/ + /* -webkit-background-size: 100% 100%; + -moz-background-size:100% 100%;*/ margin-left:auto; margin-right:auto; - margin-top: 0.4em; + margin-top: 0.8em; } #kStart #copyright{ - position: absolute; + position: fixed; left: 5px; bottom: 0px; color: white; diff --git a/css/karma.css b/css/karma.css index bc27c51..607bcbb 100755 --- a/css/karma.css +++ b/css/karma.css @@ -2,134 +2,42 @@ @import url(./ui.base.css); @import url(./theme/jquery-ui-1.7.2.custom.css); @import url(./ui.dialog.css); -@import url(./ui.kFooter.css); @import url(./ui.resizable.css); @import url(./ui.feedback.css); -/* special hack for the curren karma-loader notification */ +/* special hack for the current karma-loader notification */ @media screen { #karma-loader{ - position:fixed; + position:absolute; top:0; left:0; padding: 2px 2px 1px 5px; - font-family: arial; font-size: 12px; background: #0066cc; color: #ffffff; } - #karma-loader.status{ - + #karma-loader.status{ left:110px; - } } body{ - margin:0px; + padding: 0px; + margin: 0 auto 0 auto; + width: 1200px; + height: 900px; overflow: hidden; + position: relative; + background-color: purple; } - -#kHeader{ - background-image: url('./epaath_images/bg_header.png'); - height: 75px; - width: 100%; +#kMain { + width: 1200px; + height: 760px; float: left; - background-repeat: none; - -moz-background-size: 100% 100%; - -webkit-background-size: 100% 100%; - + clear: both; + background-color: white; } - #kHeader .left{ - float: left; - } - - #kHeader .right{ - float: right; - } - - #kHeader>div{ - display:inline; - margin-left: 0.2em; - margin-right:0.2em - } - - #kHeader .kHeaderBtn{ - width: 60px; - height: 60px; - margin-top: 7px; - cursor:pointer; - } - - #kHeaderBackBtn div{ - background-image:url(./epaath_images/btn_back.png); - } - #kHeaderBackBtn div:hover{ - background:url('./epaath_images/btn_back_hover.png'); - } - - #kHeaderBackBtn div{ - background-image:url(./epaath_images/btn_back.png); - } - - #kHeaderBackBtn div:hover{ - background:url('./epaath_images/btn_back_hover.png'); - } - - #kHeaderHelpBtn div{ - background-image:url(./epaath_images/btn_help.png); - } - - #kHeaderHelpBtn div:hover{ - background:url(./epaath_images/btn_help_hover.png); - } - - #kHeaderOleBtn div{ - background-image:url(./epaath_images/btn_ole.png); - } - - #kHeaderOleBtn div:hover{ - background:url(./epaath_images/btn_ole_hover.png); - } - - -#kHeaderLessonTitle { - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: larger; - font-weight: bold; - color: #FFFFFF; - margin-left: 2em; - margin-top: 18px; - border:0.2em solid black; - padding-left:0.5em; - padding-right:0.5em; - padding-top: 0.2em; - padding-bottom: 0.2em; - -moz-border-radius:1.3em; - -webkit-border-radius: 1.3em; -} - -#kHelpText{ - font-size:small; -} - - - -/* -#kHelpText>div:first>span:first{ - font-size:larger; -}*/ - -div.ui-dialog { - margin-top: 10px; -} - -.ui-dialog [role=button]{ - height:48px; - width: 48px; - top: 20%; -} diff --git a/css/ui.kFooter.css b/css/ui.kFooter.css index 5cae39d..db7edba 100755 --- a/css/ui.kFooter.css +++ b/css/ui.kFooter.css @@ -1,66 +1,56 @@ -.ui-kFooter-container{ +.ui-kFooter{ background-image: url('./epaath_images/bg_footer.png'); - background-repeat: no-repeat; - -moz-background-size: 100% 100%; - -webkit-background-size: 100% 100%; + background-repeat: repeat; + height: 70px; width: 100%; - height: 75px; - position: absolute; - bottom: 0px; - float:left; + margin:0; + padding: 0; + float: left; + clear: both; border-style: none; + color: #FFFF00; } -.ui-kFooter-spacing{ + +.ui-kFooter>ul{ + margin-left: 0px; + padding-left: 5px; + list-style: none; +} +.ui-kFooter>ul>li{ display:inline; - margin-top: 10px; - margin-right: 0.4em; + margin-right: 10px; + margin-left: 0px; } -.ui-kFooter-left{ + +.ui-kFooter .left{ float: left; } -.ui-kFooter-right{ +.ui-kFooter .right{ float: right; } -.ui-kFooter-text,.ui-kFooter-number{ - margin-top: 15px; -} - -.ui-kFooter-text span{ - color: #FFFF00; - margin-left: 0.2em; -} - -.ui-kFooter-number span { +.ui-kFooter .number{ background-color:white; color: black; padding-left:0.4em; padding-right:0.4em; } -.ui-kFooter-button{ + +.ui-kFooter button{ cursor:pointer; - height: 55px; -} + margin-top: -10px; +} -.ui-kFooter-icon{ -float: left; +.ui-kFooter button span{ + float: left; } -.ui-kFooter-button-text { -float: left; -color: #FFFFFF; +.ui-kFooter button .text{ +color: #FFA000; padding-top: 10px; +font-weight: bold; } - -.ui-state-default.ui-kFooter-button{ - background:#ff7c0f; - border: 2px solid #FFFF00; -} - -.ui-state-hover.ui-kFooter-button{ - background:#ffb70f; -}
\ No newline at end of file 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(); diff --git a/examples/English_Animal_Identification/css/lesson.css b/examples/English_Animal_Identification/css/lesson.css index 75bba59..883b4c3 100755 --- a/examples/English_Animal_Identification/css/lesson.css +++ b/examples/English_Animal_Identification/css/lesson.css @@ -1,43 +1,38 @@ @CHARSET "UTF-8"; -body { - background: url(../assets/image/background.png) no-repeat; - width: 1200px; - height: 884px; - -moz-background-size: 100% 100%; - -webkit-background-size: 100% 100%; -} - - -#gameArea{ - margin-top:5%; - margin-left: 10%; - float: left; - width: 50% - padding:10px; +#kMain { + background: url(../assets/image/background.png) no-repeat; + width: 1200px; + height: 900px; + -moz-background-size: 100% 100%; + -webkit-background-size: 100% 100%; + float: left; + clear: both; } #questionBox{ color: blue; - width: 300px; + /*width: 300px; */ + width: 30%; font: "Helvetica", Verdana, Geneva, Arial, sans-serif; font-weight: bold; font-size: 2em; + margin-top: 10%; + margin-left: 15%; + } .imageBox{ - margin-top: 25px; - margin-left: 30px; + margin-top: 2%; + margin-left: 20%; width: 220px; height: 220px; - padding: 10px; } #options{ - margin-left:25px; - margin-top:50px; + margin-left:5%; + margin-top:2%; width:600px; height:80px; - padding: 10px; } .optImg{ diff --git a/examples/English_Animal_Identification/index.html b/examples/English_Animal_Identification/index.html index 5f80bb1..faa7301 100755 --- a/examples/English_Animal_Identification/index.html +++ b/examples/English_Animal_Identification/index.html @@ -7,12 +7,18 @@ <link type="image/ico" rel="icon" href="../../assets/image/favicon.ico" />
<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/jquery.i18n.js"></script>
+ <script type="text/javascript" src="../../js/jquery.i18n.ne.json"></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.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>
@@ -20,36 +26,13 @@ </head>
<body>
<div id="kHeader">
- <div id="kHeaderBackBtn" class="left">
- <a href="../../list.html">
- <div class="kHeaderBtn">
- </div>
- </a>
- </div>
- <div id="kHeaderLessonTitle" class="left">
- Animal Identification
- </div>
- <div id="kHeaderHelpBtn" class="right">
- <a>
- <div class="kHeaderBtn">
- </div>
- </a>
- </div>
- <div id="kHeaderOleBtn" class="right">
- <a href="http://olenepal.org" title="साझा शिक्षा ई-पाटी">
- <div id="linkOle" class="kHeaderBtn">
- </div>
- </a>
- </div>
-
</div>
<!-- Put the help text here -->
- <div id="kHelpText" title="Help Title"> Help text here</div>
+ <div id="kHelp" title="Help Title"> Help text here</div>
<div id="feedback"></div>
-
- <div id="gameArea">
+ <div id="kMain">
<div id="questionBox">What is this?</div>
<img class = "imageBox" id="imgObject" src="" alt=""/>
diff --git a/examples/English_Animal_Identification/js/lesson.js b/examples/English_Animal_Identification/js/lesson.js index 8ddb02d..ecbe8aa 100755 --- a/examples/English_Animal_Identification/js/lesson.js +++ b/examples/English_Animal_Identification/js/lesson.js @@ -6,8 +6,9 @@ $(document).ready( {'name':'incorrect','file':'incorrect.ogg'} ]}); - k.scaleToViewport(); - + k.scaleWindow(); + $.i18n.setLocale('ne'); + k.ready( function(){ @@ -34,6 +35,9 @@ $(document).ready( $('#kHeaderHelpBtn').click(function(){ $help.dialog('open');}); + + $('#kHeader').kHeader({'title': 'English Animal Identification'}); + var kFooter = $('#kFooter').kFooter({'winningScore': 6}); kFooter.bind('kFooterWinGame', function(){ diff --git a/examples/English_Animal_Identification/kDoc.html b/examples/English_Animal_Identification/kDoc.html index 4e2aa5e..efe2890 100755 --- a/examples/English_Animal_Identification/kDoc.html +++ b/examples/English_Animal_Identification/kDoc.html @@ -4,51 +4,45 @@ <title>Lesson Plan for English Animal Identification</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link type="image/ico" rel="icon" href="../../assets/image/favicon.ico" /> - <link type="text/css" rel="stylesheet" href="../../css/kDoc.css" /> <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/kDoc.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/karma.js"></script> + <script type="text/javascript" src="../../js/ui.kHeader.js"></script> <script type="text/javascript" src="../../js/kDoc.js"></script> </head> <body id="kDoc"> <div id="kHeader"> - <div id="kHeaderBackBtn" class="left"> - <a> - <div class="kHeaderBtn"> - </div> - </a> - </div> - <div id="kHeaderLessonTitle" class="left"> - Animal Identification - </div> - <div id="zoomIn" class="left kHeaderBtn"> - </div> - <div id="zoomOut" class="left kHeaderBtn"> - </div> - <div id="kHeaderHelpBtn" class="right"> - <a> - <div class="kHeaderBtn"> - </div> - </a> - </div> - <div id="kHeaderOleBtn" class="right"> - <a href="http://olenepal.org" title="साझा शिक्षा ई-पाटी"> - <div id="linkOle" class="kHeaderBtn"> - </div> - </a> - </div> </div> -<div id="kHelpText" title="Help"> -<p> -</p> -</div> + <div id="kHelp" title="Help"> + <p> + पाठविवरणर पाठयोजना सहज तरिकाले पढ्न तपाईले निम्न कार्य गर्न सक्नु हुन्छ ।</p> + + <p> वायाँ तर्फ फर्किएको तिर थिच्दा <br /> + तपाईले हाल पढिरहेको पृष्टबाट आधिल्लो पृष्टमा पुग्नुहुन्छ।</p> + + <p> दायाँ तर्फ फर्किएको तिर थिच्दा <br /> + तपाईले हाल पढिरहेको पृष्टबाट पछिल्लो पृष्टमा पुग्नुहुन्छ।</p> + + दायाँ र वायाँ तर्फ फर्किएको तिरहरुको बिचको सेतो कोठा + तपाई जान चाहनु भएको पृष्ट नम्बर टाइप गरी थिच्नुहोस । तपाई जान चाहनु भएको पृष्ट देखिन्छ। + + अक्षर आकार सानो बनाउन सक्नुहुन्छ। + + अक्षर आकार ठुलो बनाउन सक्नुहुन्छ। + + पाठ पृष्टको दाईने तर्फको ठाडो रेखा तल माथि गर्दा + तपाईले हाल पढिरहेको पृष्टलाई आवश्यकता अनुसार तल माथि गर्न सक्नुहुन्छ + + </div> -<iframe id="iframeLessonPlan" src=''> -</iframe> + <iframe id="iframeLessonPlan" src=''> + </iframe> </body> </html>
\ No newline at end of file diff --git a/examples/English_Animal_Identification/start.html b/examples/English_Animal_Identification/start.html index bc9ab7f..3ee8538 100755 --- a/examples/English_Animal_Identification/start.html +++ b/examples/English_Animal_Identification/start.html @@ -24,13 +24,10 @@ <div id="middle"> - <div id="blueOverlay"></div> - - <div id="textOverlay"> - <div id="grade" class="center"> - <span id="gradeText">कक्षा:</span><span id="gradeNum">२ </span> + <div id="grade" class="center"> + <span id="gradeText">कक्षा:</span><span id="gradeNum">२</span> </div> - <div id="subject" class="center">अँग्रेजी </div> + <div id="subject" class="center">अँग्रेजी</div> <div id="lessonTitle" class="center"> <a href="./index.html">Identifying Animals</a> </div> @@ -39,7 +36,7 @@ </div> <div id="teachersNoteBtn" class="button"> <a href="./kDoc.html?back=start.html&doc=teachersNote"> - <div>Teacher's Note</div> + <div> Teacher's Note</div> <div>पाठविवरण</div> </a> </div> @@ -49,13 +46,12 @@ <div>पाठयोजना</div> </a> </div> - </div> </div> <div id="bottom"> - <a href="http://www.olenepal.org"> - <div id="logo" class="center"> + <a id="logo" href="http://www.olenepal.org"> + <!--<div id="logo" class="center"> <div></div> - </div> + </div>--> </a> <div id="copyright"> Copyright <a href="http://www.olenepal.org">OLE Nepal</a> 2009, diff --git a/js/jquery.i18n.es.json b/js/jquery.i18n.es.json new file mode 100644 index 0000000..699dc93 --- /dev/null +++ b/js/jquery.i18n.es.json @@ -0,0 +1 @@ +$.i18n.es = {};
\ No newline at end of file diff --git a/js/jquery.i18n.js b/js/jquery.i18n.js new file mode 100644 index 0000000..a393404 --- /dev/null +++ b/js/jquery.i18n.js @@ -0,0 +1,60 @@ +/* Copyright Bryan W Berry, 2009, + * under the MIT license http://www.opensource.org/licenses/mit-license.php + * + * this library is heavily influenced by the GNU LIBC library + * http://www.gnu.org/software/libc/manual/html_node/Locales.html + */ + +(function($){ + + $.i18n = function(string, locale){ + var lang = locale || $.i18n.lang; + return this.i18n[lang].strings['pause']||string; + }; + + $._ = $.i18n; + + $.i18n.setLocale = function (locale){ + $.i18n.lang = locale; + }; + + $.i18n.getLocale = function (){ + return $.i18n.lang; + }; + + + /** + * Converts a number to numerals in the specified locale. Currently only + * supports devanagari numerals for Indic languages like Nepali and Hindi + * @param {Number} Number to be converted + * @param {locale} locale that number should be converted to + * @returns {String} Unicode string for localized numeral + */ + $.i18n._n = function(num, locale){ + + locale = locale || $.i18n.lang; + + //48 is the base for western numerals + var numBase = $.i18n[$.i18n.lang].numeralBase || 48; + var prefix = $.i18n[$.i18n.lang].numeralPrefix || "u00"; + + var convertDigit = function(digit){ + return '\\' + prefix + + (numBase + parseInt(digit)).toString(16); + }; + + var charArray = num.toString().split("").map(convertDigit); + return eval('"' + charArray.join('') + '"'); + }; + + $._n = $.i18n._n; + + /* ToDo + * implement sprintf + * conversion functions for monetary and numeric + * sorting functions (collation) for different locales + */ + + })(jQuery); + + diff --git a/js/jquery.i18n.js~ b/js/jquery.i18n.js~ new file mode 100644 index 0000000..3a7aeb2 --- /dev/null +++ b/js/jquery.i18n.js~ @@ -0,0 +1,14 @@ +(function($){ + $.fn.i18n.setLocale = function (locale){ + + $.i18n.lang = locale; + }; + + + + + + $.fn._ = $.fn.i18n; + + + })(jQuery);
\ No newline at end of file diff --git a/js/jquery.i18n.ne.json b/js/jquery.i18n.ne.json new file mode 100644 index 0000000..fe5e97b --- /dev/null +++ b/js/jquery.i18n.ne.json @@ -0,0 +1,13 @@ +$.i18n.ne = { + numeralBase : 2406, + numeralPrefix:"u0" + /* + * additional values that could be added + * + * monetary format + * non-monetary numeric format + * date format + * time format + * yes, no for yes, no questions + */ +};
\ No newline at end of file diff --git a/js/jquery.i18n.ne.json~ b/js/jquery.i18n.ne.json~ new file mode 100644 index 0000000..81c7332 --- /dev/null +++ b/js/jquery.i18n.ne.json~ @@ -0,0 +1 @@ +$.i18n.ne = {};
\ No newline at end of file @@ -3,15 +3,7 @@ $(document).ready( var back = 'index.html'; - - var $help = $('#kHelpText').dialog({ - position:[ "right", "top"], - modal:'true',autoOpen:false,width:500, - height: 400 - }); - var parseUrlParams = function(){ - var doc = ''; var params = window.location.search.slice(1).split('&'); if (params){ @@ -22,50 +14,11 @@ $(document).ready( $('#iframeLessonPlan').attr('src', "" + doc + ".html"); }; - parseUrlParams(); + var $kHeader = $('#kHeader').kHeader({title:"Lesson Plan", zoom: true}); - $('#kHeaderHelpBtn').click(function(){ $help.dialog('open');}); - - $('#kHeaderBackBtn').click(function(){ - window.location = back; - }); - - $('#iframeLessonPlan').load( - function(){ - - var iframeScale = 1.0; - var iframeStyle = window.frames[0].document.body.style; - var translateY = 0; - - $('#zoomIn').click( - function(){ - iframeScale = iframeScale + 0.1; - translateY = translateY + 50; - var scale = 'scale(' + iframeScale + ')'; - var translate = "translate(0px, " + translateY + "px)"; - - iframeStyle.MozTransform = scale + ' ' + translate; - iframeStyle.WebkitTransform = scale + ' ' + translate; - }); - - $('#zoomOut').click( - function(){ - iframeScale = iframeScale - 0.1; - translateY = translateY - 50; - - var scale = 'scale(' + iframeScale + ')'; - var translate = "translate(0px, " + translateY + "px)"; - - - iframeStyle.MozTransform = scale + ' ' + translate; - iframeStyle.WebkitTransform = scale + ' ' + translate; - - }); - - }); + $('#kHeaderBackBtn').click(function(){ window.location = back; }); + parseUrlParams(); Karma.scaleToViewport(); - - });
\ No newline at end of file diff --git a/js/karma.js b/js/karma.js index 928a06c..3d29073 100755 --- a/js/karma.js +++ b/js/karma.js @@ -275,6 +275,29 @@ Karma.scaleToViewport = function(){ document.body.style.height = height; }; +Karma.scaleWindow = function(){ + var width = "1200px"; + var height = "900px"; + var viewportHeight = "760px"; + var $body = $('body'); + var $kMain = $('#kMain'); + + if (window.innerWidth < 1150){ + width = "950px"; + height = "600px"; + viewportHeight = "460px"; + $body.css('border', '2px solid black'); + + // 460/760 * 16 = 9.6 + $kMain.css('font-size', '9.6px'); + } + + $body.css({border: '2px solid black', width: width, height: height}); + $kMain.css({width: width, height: viewportHeight}); + + +}; + // Below are geometry and math helper methods /** diff --git a/js/ui.kFooter.js b/js/ui.kFooter.js index c126521..02d7937 100755 --- a/js/ui.kFooter.js +++ b/js/ui.kFooter.js @@ -1,5 +1,5 @@ /** -* @fileOverview a scoreboard widget +* @fileOverview a footer widget * @author Bryan Berry <bryan@olenepal.org> * uses MIT License */ @@ -11,7 +11,7 @@ // This is a dummy function, just here as placeholder to // to make the jsdoc tool happy /** @name $.ui.kFooter - * @namespace KFooter widget + * @namespace kFooter widget * @example Emits the event kFooterWinGame when the maxScore is reached <br /> * Emits the event kFooterRestart when game restarted <br /> * Start button emits kFooterStart event when clicked <br /> @@ -94,62 +94,74 @@ this._setData('total', this._getData('total') - decVal); this._refresh(); }, - _ : function(val, loc){ - var self = this; - var locale = self._getData('locale') || loc; - var convertNumLocale = function(num){ - //48 is the base for western numerals - var convertDigit = function(digit){ - - var numBase = 48; - var prefix = "u00"; - - if (self._getData('locale') === "ne"){ - prefix = "u0"; - numBase = 2406; + /** Start the timer, defaults to 0:00 if no arguments supplied + * @param {Number} [minutes] value for minutes, default to 0 + * @param {Number} [seconds] value for seconds, default to 0 + */ + startTimer : function(minutes, seconds){ + var timerRunning = this._getData('timerRunning')|| false; + + if (this._$timer && timerRunning === false){ + var mins = minutes || 0; + var secs = seconds || 0; + var timerId = null; + var self = this; + + + this._setData('mins', mins); + this._setData('secs', secs); + + var addLeadingZero = function(num){ + if(''.concat(num).length === 1){ + return "0".concat(num); + } else { + return num; } - - return '\\' + prefix + - (numBase + parseInt(digit)).toString(16); + }; - - var charArray = num.toString().split("").map(convertDigit); - return eval('"' + charArray.join('') + '"'); - }; - - var convertStringLocale = function (str){ - if (self._getData('locale') === "ne"){ - switch(str){ - case "Score": - return "अङ्क"; - case "Total": - return "जम्मा"; - case "Play Again": - return "फेरी खेलौ"; - case "Pause": - return "खेल रोकौ"; - case "Start": - return "सुरु गरौ"; - default: - return "string not translated"; + + var increaseTimer = function(){ + if (self._getData('timerRunning') === false){ + return; } - } - return "String really not translated"; - }; + + var s = self._getData('secs') + 1; + var m = null; + var timerId = null; + + if (s < 60) { + self._setData('secs', s); + self._$timerSecs.text(self._n(addLeadingZero(s))); + } else { + s = 0; + m = self._getData('mins') + 1; + self._$timerSecs.text(self._n(addLeadingZero(s))); + self._$timerMins.text(self._n(addLeadingZero(m))); + self._setData('secs', s); + self._setData('mins', m); + } + + timerId = setTimeout(increaseTimer, 1000); + self._setData('timerId', timerId); + + }; - - - if (typeof val === "number"){ - return convertNumLocale(val); - } - - if (locale !== "en"){ - return convertStringLocale(val); - }else { - return val; - } + timerId = setTimeout(increaseTimer , 1000); - + this._setData('timerRunning', true); + this._setData('timerId', timerId); + } + }, + /** Stop the timer + */ + stopTimer : function(){ + this._setData('timerRunning', false); + }, + _ : function(val, loc){ + return $.i18n.call($.ui.kFooter, val, loc); + }, + _n : function(val, loc){ + return $._n(val, loc); }, _init : function(){ @@ -169,111 +181,117 @@ this.element.addClass('ui-widget ui-widget-content ' + - ' ui-kFooter-container'); - - var $parent = $('<div>') - .addClass('ui-kFooter-spacing'); + ' ui-kFooter'); + + + var $kFooter = $("<ul></ul>"); - this._scoreText = $('<div><span>' + this._("Score") + - "</span></div>") - .addClass('ui-kFooter-spacing ui-kFooter-left ui-kFooter-text') - .appendTo($parent); - - this._score = $("<div><span>" + this._(score) + "</span></div>") - .addClass('ui-kFooter-spacing ui-kFooter-left' + - ' ui-kFooter-text ui-kFooter-number') - .find('span') - .addClass('ui-corner-all') - .end() - .appendTo($parent) - .find('span:first'); - - - $("<div><span>" + this._("Total") + "</span></div>") - .addClass('ui-kFooter-spacing ui-kFooter-left' + - ' ui-corner-all ui-kFooter-text') - .appendTo($parent); - - this._total = $("<div><span>" + this._(total) + "</span></div>") - .addClass('ui-kFooter-spacing ui-kFooter-left' + - ' ui-kFooter-text ui-kFooter-number') - .find('span') - .addClass('ui-corner-all') - .end() - .appendTo($parent) - .find('span:first'); - - - var $templateBtn = $('<button></button>') - .addClass('ui-kFooter-spacing ui-corner-all ' + - ' ui-state-default ui-kFooter-right ui-kFooter-button') - .append( - $('<span></span>') - .addClass('ui-icon ui-kFooter-icon') - ) - .append( - $('<span></span>') - .addClass('ui-kFooter-button-text') - ); - - if(options.restartButton){ - var $restartBtn = $templateBtn.clone() - .find('span:first') - .addClass('ui-icon-arrowrefresh-1-w') - .end() - .find('span:last') - .text(this._('Play Again')) - .end() - .click(function(){ self.restart();}) - .appendTo($parent); - } + + if(options.scoreboard === true){ + + var $scoreboard = $("<li class='left'>" + this._("Score") + + "</li>" + "<li class='left'>" + + "<span id='kFooterScore' class='ui-corner-all number'>" + + this._n(score) + "</span></li>" + + "<li class='left'>" + this._("Total") + "</li>" + + "<li class='left'><span id='kFooterTotal' " + + "class='ui-corner-all number'>" + + this._n(total) + "</span></li>") + .appendTo($kFooter); + + this._score = $('#kFooterScore', $scoreboard); + this._total = $('#kFooterTotal', $scoreboard); + } - if(options.pauseButton){ + if(options.timer === true){ + this._$timer = $("<li class='left'>" + this._("Timer") + + "</li>" + + "<li class='left'><span id='kFooterMins'" + + "class='ui-corner-all" + + " number timer'>" + this._n("00") + + "</span></li>" + + "<li class='left'><span id='kFooterSecs'" + + "class='ui-corner-all " + + "number timer'>"+ this._n("00") + + "</span></li>") + .appendTo($kFooter); - var $pauseBtn = $templateBtn.clone() - .find('span:first') // - .removeClass('ui-icon-arrowrefresh-1-w') - .addClass('ui-icon-pause') - .end() - .find('span:last') - .text(this._('Pause')) - .end() - .click(function(){ - self.element.trigger('kFooterPause'); - }) - .appendTo($parent); + this._$timerMins = $('#kFooterMins', this._$timer); + this._$timerSecs = $('#kFooterSecs', this._$timer); } - if(options.startButton){ - var $startBtn = $templateBtn.clone() - .find('span:first') - .addClass('ui-icon-play') - .end() - .find('span:last') - .text(this._('Start')) - .end() + //if options.checkAnswerBtn === true + + if (options.restartButton === true){ + var $restartButton = $("<li class='right'><button " + + "class='ui-corner-all ui-state-default'>" + + "<span class='ui-icon ui-icon-arrowrefresh-1-w'>" + + "</span>" + + "<span class='text left'>" + this._('Play Again') + + "</span></button></li>") .click(function(){ - self.element.trigger('kFooterStart'); - }) - .appendTo($parent); + self.startTimer(); + self.restart(); + }) + .appendTo($kFooter); + } + + if (options.pauseButton === true){ + var $pauseButton = $("<li class='right'><button " + + "class='ui-corner-all ui-state-default'>" + + "<span class='ui-icon ui-icon-pause'>" + + "</span>" + + "<span class='text left'>" + this._('Pause') + + "</span></button></li>") + .click(function(){ + self.stopTimer(); + self.element.trigger('kFooterPause'); + }) + .appendTo($kFooter); } - - $parent.find('button').hover( + if (options.startButton === true){ + var $startButton = $("<li class='right'><button " + + "class='ui-corner-all ui-state-default'>" + + "<span class='ui-icon ui-icon-play'>" + + "</span>" + + "<span class='text left'>" + this._('Start') + + "</span></button></li>") + .click(function(){ + self.startTimer(); + self.element.trigger('kFooterStart'); + }) + .appendTo($kFooter); + } + + $('button', $kFooter).hover( function(){ $(this).addClass("ui-state-hover"); }, function(){ $(this).removeClass("ui-state-hover"); }); + + + // Check if any html w/in this.element, if so wrap it in <li> </li> + // and add to $kFooter later + var $userHtml = this.element + .children() + .appendTo($kFooter); + - this.element.append($parent); + $userHtml.wrap('<li class="left"></li>'); + //get rid of userHtml + this.element.empty(); + + this.element.append($kFooter); + }, _refresh : function(){ - this._score.text(this._(this._getData('score'))); - this._total.text(this._(this._getData('total'))); + this._score.text(this._n(this._getData('score'))); + this._total.text(this._n(this._getData('total'))); }, /** Removes the kFooter widget and all related data from the DOM */ destroy : function(){ @@ -284,7 +302,10 @@ }); - $.ui.kFooter.getter = ['getScore', 'getTotal', '_convertNumLocale']; + $.ui.kFooter.getter = ['getScore', 'getTotal', '_n', '_' ]; + + $.ui.kFooter.i18n = {}; + /** Default settings for the kFooter widget * @namespace Default settings for the kFooter widget @@ -311,6 +332,11 @@ * @default "en" */ locale: "ne", + /** Display the scoreboard + * @type boolean + * @default true + */ + scoreboard: true, /** Display the Start Button * @type boolean * @default false @@ -325,7 +351,12 @@ * @type boolean * @default false */ - pauseButton: false + pauseButton: false, + /** Display the timer + * @type boolean + * @default false + */ + timer: false }; })(jQuery);
\ No newline at end of file diff --git a/js/ui.kFooter.ne.json b/js/ui.kFooter.ne.json new file mode 100644 index 0000000..1235c68 --- /dev/null +++ b/js/ui.kFooter.ne.json @@ -0,0 +1,5 @@ +$.ui.kFooter.i18n.ne = { +strings : { +"score":"अङ्क", "total": "जम्मा", "play again": "फेरी खेलौ", "pause": "खेल रोकौ", +"start": "सुरु गरौ" } +};
\ No newline at end of file diff --git a/js/ui.kFooter.ne.json~ b/js/ui.kFooter.ne.json~ new file mode 100644 index 0000000..8fadfaf --- /dev/null +++ b/js/ui.kFooter.ne.json~ @@ -0,0 +1,5 @@ +$.ui.kFooter.i18n.ne = { +strings : { +"score":"अङ्क", "total": "जम्मा", "play again": "फेरी खेलौ", "pause": "खेल रोकौ", +"start": "सुरु गरौ" } +j};
\ No newline at end of file diff --git a/js/ui.kHeader.js b/js/ui.kHeader.js new file mode 100755 index 0000000..b6382b3 --- /dev/null +++ b/js/ui.kHeader.js @@ -0,0 +1,208 @@ +/** +* @fileOverview a Header widget +* @author Bryan Berry <bryan@olenepal.org> +* uses MIT License +*/ + + + +(function($){ + + // This is a dummy function, just here as placeholder to + // to make the jsdoc tool happy + /** @name $.ui.kHeader + * @namespace kHeader widget + * @example + */ + $.ui.kHeader = function(){}; + + $.widget('ui.kHeader', + /** @lends $.ui.kHeader.prototype */ + { + _ : function(val, loc){ + var self = this; + var locale = self._getData('locale') || loc; + var convertNumLocale = function(num){ + //48 is the base for western numerals + var convertDigit = function(digit){ + + var numBase = 48; + var prefix = "u00"; + + if (self._getData('locale') === "ne"){ + prefix = "u0"; + numBase = 2406; + } + + return '\\' + prefix + + (numBase + parseInt(digit)).toString(16); + }; + + var charArray = num.toString().split("").map(convertDigit); + return eval('"' + charArray.join('') + '"'); + }; + + var convertStringLocale = function (str){ + if (self._getData('locale') === "ne"){ + switch(str){ + case "": + return ""; + default: + return "string not translated"; + } + } + return "String really not translated"; + }; + + + + if (typeof val === "number"){ + return convertNumLocale(val); + } + + if (locale !== "en"){ + return convertStringLocale(val); + }else { + return val; + } + + + }, + _init : function(){ + var options = $.extend({}, $.ui.kHeader.defaults, this.options); + + this.element.addClass('ui-widget ui-widget-content'); + + var $kHeader = $("<ul></ul>"); + + var backLink = "#"; + var urlParams = window.location.search.slice(1).split('&'); + if (urlParams){ + backLink = urlParams[0].split('=')[1]; + } + + var $backBtn = $("<li class='left'> <a href='" + backLink + + "' class='kHeader-btn kHeader-back'></a></li>") + .appendTo($kHeader); + + var $lessonTitle = $("<li class='left kHeader-title'>" + + "<span>" + options.title + "</span><span class='ui-widget-header ui-icon " + + "ui-icon-carat-1-s'></span></li>") + .appendTo($kHeader); + + if(options.zoom === true){ + + var iframeScale = 1.0; + var translateY = 0; + var getIframeStyle = function(){ + return window.frames[0].document.body.style; + }; + + var zoomIn = function(){ + var iframeStyle = getIframeStyle(); + iframeScale = iframeScale + 0.1; + translateY = translateY + 50; + var scale = 'scale(' + iframeScale + ')'; + var translate = "translate(0px, " + translateY + "px)"; + + iframeStyle.MozTransform = scale + ' ' + translate; + iframeStyle.WebkitTransform = scale + ' ' + translate; + }; + + var zoomOut = function(){ + var iframeStyle = getIframeStyle(); + iframeScale = iframeScale - 0.1; + translateY = translateY - 50; + + var scale = 'scale(' + iframeScale + ')'; + var translate = "translate(0px, " + translateY + "px)"; + + + iframeStyle.MozTransform = scale + ' ' + translate; + iframeStyle.WebkitTransform = scale + ' ' + translate; + + }; + + $("<li class='left kHeader-zoomIn kHeader-btn'>" + + " </li>") + .click(zoomIn) + .appendTo($kHeader); + + $("<li class='left kHeader-zoomOut " + + "kHeader-btn'> </li>") + .click(zoomOut) + .appendTo($kHeader); + } + + + + if($('#' + options.help).length){ + if($.ui.dialog){ + var $help = $('#'+ options.help) + .dialog({ + position:[ "right", "top"], + modal:'true',autoOpen:false,width:500, + height: 400, + dialogClass: 'kHeader-help' + }); + } else { + + if(console){ + console.log("You need to add the jQuery UI dialog" + + " widget in order to use Help feature."); + } + } + + } + + $("<li class='right'> <a href='#'" + + "' class='kHeader-btn kHeader-help'></a></li>") + .click(function(){ + if($.ui.dialog && $help){ + $help.dialog('open'); + } + }) + .appendTo($kHeader); + + + $("<li class='right'> <a href='http://olenepal.org'" + + "' class='kHeader-btn kHeader-brand'" + + "title='साझा शिक्षा ई-पाटी'></a></li>") + .appendTo($kHeader); + + this.element.append($kHeader); + + }, + /** Removes the kHeader widget and all related data from the DOM */ + destroy : function(){ + this.element.remove(); + $.widget.prototype.destroy.apply(this, arguments); + } + + + }); + + $.ui.kHeader.getter = []; + /** Default settings for the kHeader widget + * @namespace Default settings for the kHeader widget + * @extends $.ui.kHeader + */ + $.ui.kHeader.defaults = { + /** title + * @type String + * @default "" + */ + title: "", + /** Turns on zoom buttons + * @type boolean + * @default false + */ + zoom: false, + /** Id of element containing help text + * @type String + * @default "kHelp" + */ + help: "kHelp" + }; + + })(jQuery);
\ No newline at end of file diff --git a/js/ui.kHeader.js~ b/js/ui.kHeader.js~ new file mode 100755 index 0000000..e915764 --- /dev/null +++ b/js/ui.kHeader.js~ @@ -0,0 +1,310 @@ +/** +* @fileOverview a scoreboard widget +* @author Bryan Berry <bryan@olenepal.org> +* uses MIT License +*/ + + + +(function($){ + + // This is a dummy function, just here as placeholder to + // to make the jsdoc tool happy + /** @name $.ui.kFooter + * @namespace KFooter widget + * @example Emits the event kFooterWinGame when the maxScore is reached <br /> + * Emits the event kFooterRestart when game restarted <br /> + * Start button emits kFooterStart event when clicked <br /> + * Restart button emits kFooterRestart event when clicked <br /> + * Pause button emits the kFooterPause event when clicked <br /> + */ + $.ui.kFooter = function(){}; + + $.widget('ui.kFooter', + /** @lends $.ui.kFooter.prototype */ + { + /** Gets the current score + * @returns {Number} current score + */ + getScore : function(){ + return this._getData('score'); + }, + /** Sets the current score + * @param {Number} newScore new score + */ + setScore : function(newScore){ + this._setData('score', parseInt(newScore)); + this._refresh(); + }, + /** Gets the current total + * @returns {Number} current total + */ + getTotal : function(){ + return this._getData('total'); + }, + /** Sets the current total + * @param {Number} newTotal new total + */ + setTotal : function(newTotal){ + this._setData('total', parseInt(newTotal)); + this._refresh(); + }, + /** + * Resets the score and total to initial values and triggers + * the "kFooterRestart" event + */ + restart : function(){ + this.element.trigger('kFooterRestart'); + this._setData('score', this._getData('initialScore')); + this._setData('total', this._getData('initialTotal')); + this._refresh(); + }, + /** Increments the score by 1 or by the supplied numeric argument + * @param {Number} [val] increment value + */ + inc : function(val){ + var incVal = parseInt(val) || 1; + this._setData('score', this._getData('score') + incVal); + this._refresh(); + if(this._getData('winScore') === this._getData('score')){ + this.element.trigger('kFooterWinGame'); + } + }, + /** Increments the total by 1 or by the supplied numeric argument + * @param {Number} [val] increment value + */ + incTotal : function(val){ + var incVal = parseInt(val) || 1; + this._setData('total', this._getData('total') + incVal); + this._refresh(); + }, + /** Decrements the score by 1 or by the supplied numeric argument + * @param {Number} [val] decrement value + */ + dec : function(val){ + var decVal = parseInt(val) || 1; + this._setData('score', this._getData('score') - decVal); + this._refresh(); + }, + /** Decrements the total by 1 or by the supplied numeric argument + * @param {Number} [val] decrement value + */ + decTotal : function(val){ + var decVal = parseInt(val) || 1; + this._setData('total', this._getData('total') - decVal); + this._refresh(); + }, + _ : function(val, loc){ + var self = this; + var locale = self._getData('locale') || loc; + var convertNumLocale = function(num){ + //48 is the base for western numerals + var convertDigit = function(digit){ + + var numBase = 48; + var prefix = "u00"; + + if (self._getData('locale') === "ne"){ + prefix = "u0"; + numBase = 2406; + } + + return '\\' + prefix + + (numBase + parseInt(digit)).toString(16); + }; + + var charArray = num.toString().split("").map(convertDigit); + return eval('"' + charArray.join('') + '"'); + }; + + var convertStringLocale = function (str){ + if (self._getData('locale') === "ne"){ + switch(str){ + case "Score": + return "अङ्क"; + case "Total": + return "जम्मा"; + case "Play Again": + return "फेरी खेलौ"; + case "Pause": + return "खेल रोकौ"; + case "Start": + return "सुरु गरौ"; + default: + return "string not translated"; + } + } + return "String really not translated"; + }; + + + + if (typeof val === "number"){ + return convertNumLocale(val); + } + + if (locale !== "en"){ + return convertStringLocale(val); + }else { + return val; + } + + + }, + _init : function(){ + + var divDisplay = "inline"; + var score = this.options.score; + var total = this.options.total; + var self = this; + + var options = $.extend({}, $.ui.kFooter.defaults, this.options); + + this._setData('initialScore', parseInt(options.score)); + this._setData('initialTotal', parseInt(options.total)); + this._setData('score', parseInt(options.score)); + this._setData('total', parseInt(options.total)); + this._setData('winScore', parseInt(options.winningScore)); + this._setData('locale', options.locale); + + + this.element.addClass('ui-widget ui-widget-content ' + + ' ui-kFooter-container'); + + var $kFooter = $("<ul></ul>"); + + + if(options.scoreboard === true){ + + var $scoreboard = $("<li class='left'>" + this._("Score") + + "</li>" + "<li class='left'>" + + "<span id='kFooterScore' class='ui-corner-all number'>" + + this._(score) + "</span></li>" + + "<li class='left'>" + this._("Total") + "</li>" + + "<li class='left'><span id='kFooterTotal' " + + "class='ui-corner-all number'>" + + this._(total) + "</span></li>"); + + this._score = $('#kFooterScore', $scoreboard); + this._total = $('#kFooterTotal', $scoreboard); + + $kFooter.append($scoreboard); + } + + //need timer stuff + //if options.timer === true + + //if options.checkAnswerBtn === true + + if (options.restartButton === true){ + var $restartButton = $("<li class='right'><button " + + "class='ui-corner-all ui-state-default'>" + + "<span class='ui-icon ui-icon-arrowrefresh-1-w'>" + + "</span>" + + "<span class='text left'>" + this._('Play Again') + + "</span></button></li>") + .click(function(){ self.restart();}) + .appendTo($kFooter); + } + + if (options.pauseButton === true){ + var $pauseButton = $("<li class='right'><button " + + "class='ui-corner-all ui-state-default'>" + + "<span class='ui-icon ui-icon-pause'>" + + "</span>" + + "<span class='text left'>" + this._('Pause') + + "</span></button></li>") + .click(function(){ + self.element.trigger('kFooterPause'); + }) + .appendTo($kFooter); + } + + if (options.startButton === true){ + var $startButton = $("<li class='right'><button " + + "class='ui-corner-all ui-state-default'>" + + "<span class='ui-icon ui-icon-play'>" + + "</span>" + + "<span class='text left'>" + this._('Start') + + "</span></button></li>") + .click(function(){ + self.element.trigger('kFooterStart'); + }) + .appendTo($kFooter); + } + + $('button', $kFooter).hover( + function(){ + $(this).addClass("ui-state-hover"); + }, + function(){ + $(this).removeClass("ui-state-hover"); + }); + + + this.element.append($kFooter); + + }, + _refresh : function(){ + this._score.text(this._(this._getData('score'))); + this._total.text(this._(this._getData('total'))); + }, + /** Removes the kFooter widget and all related data from the DOM */ + destroy : function(){ + this.element.remove(); + $.widget.prototype.destroy.apply(this, arguments); + } + + + }); + + $.ui.kFooter.getter = ['getScore', 'getTotal', '_convertNumLocale']; + + /** Default settings for the kFooter widget + * @namespace Default settings for the kFooter widget + * @extends $.ui.kFooter + */ + $.ui.kFooter.defaults = { + /** Initial score + * @type Number + * @default 0 + */ + score: 0, + /** Initial total + * @type Number + * @default 0 + */ + total: 0, + /** The score that will win the game + * @type Number + * @default 0 + */ + winningScore: 0, + /** Default locale, valid options are "en" and "ne" + * @type String + * @default "en" + */ + locale: "ne", + /** Display the scoreboard + * @type boolean + * @default true + */ + scoreboard: true, + /** Display the Start Button + * @type boolean + * @default false + */ + startButton: true, + /** Display the Retart Button + * @type boolean + * @default true + */ + restartButton: true, + /** Display the Pause Button + * @type boolean + * @default false + */ + pauseButton: true + }; + + })(jQuery);
\ No newline at end of file |