diff options
| -rwxr-xr-x | css/karma.css | 6 | ||||
| -rwxr-xr-x | css/lesson.css | 59 | ||||
| -rwxr-xr-x | index.html | 32 | ||||
| -rw-r--r-- | js/jquery.i18n.js | 2 | ||||
| -rwxr-xr-x | js/lesson.js | 178 | ||||
| -rwxr-xr-x | js/ui.kFooter.js | 12 | ||||
| -rwxr-xr-x | start.html | 16 |
7 files changed, 66 insertions, 239 deletions
diff --git a/css/karma.css b/css/karma.css index 607bcbb..7481928 100755 --- a/css/karma.css +++ b/css/karma.css @@ -40,4 +40,10 @@ body{ background-color: white; } +/* for first-time users */ +#kMain #itWorks{ + text-align: center; + font-size: 4em; +} + diff --git a/css/lesson.css b/css/lesson.css index 883b4c3..7708716 100755 --- a/css/lesson.css +++ b/css/lesson.css @@ -1,67 +1,8 @@ @CHARSET "UTF-8"; #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: 30%; - font: "Helvetica", Verdana, Geneva, Arial, sans-serif; - font-weight: bold; - font-size: 2em; - margin-top: 10%; - margin-left: 15%; - - -} -.imageBox{ - margin-top: 2%; - margin-left: 20%; - width: 220px; - height: 220px; -} - -#options{ - margin-left:5%; - margin-top:2%; - width:600px; - height:80px; -} - -.optImg{ - width:120px; - height: 40px; - background-color: yellow; - padding:5px; - border: 2px solid green; -} - -.playAgain{ - position:absolute; - top: 10px; - margin-left:220px; - width:115px; - height: 30px; - padding: 2px 2px 2px 2px; - } -input{ - color:green; - -} -#gameOver{ - margin-left:300px; - width: 180px; - height: 20px; - display: none; - font: 25px "Rockwell Extra Bold", Geneva, Arial, Helvetica, sans-serif,Times New Roman; - font-weight: bold; - background-color: #ccc; - padding: 10px; -} @@ -1,16 +1,19 @@ <!DOCTYPE html>
<html>
<head>
- <title>English_Animal Identification</title>
+ <title>My First Karma Lesson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <link type="image/ico" rel="icon" href="./assets/image/favicon.ico" />
+ <!-- These are the css files to all Karma lessons -->
<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" />
+
+ <!-- This file holds the styles specific to your lesson -->
<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.ne.json"></script>
@@ -22,6 +25,8 @@ <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>
+
+ <!-- This is the code specific to your lesson -->
<script type="text/javascript" src="js/lesson.js"></script>
</head>
@@ -29,29 +34,18 @@ <div id="kHeader">
</div>
- <!-- Put the help text here -->
+ <!-- Put the help text inside #kHelp -->
<div id="kHelp" title="Help Title"> Help text here</div>
<div id="feedback"></div>
-
+ <!-- #kMain is where the magic happens, the main frame where your lesson
+ its stuff -->
<div id="kMain">
- <div id="questionBox">What is this?</div>
- <img class = "imageBox" id="imgObject" src="" alt=""/>
-
- <div id="options">
- <a href="#" id="anchorOpt0">
- <img class="optImg" id="option0" src="" alt=""/>
- </a>
- <a href="#" id="anchorOpt1"><img class="optImg" id="option1" src="" alt=""/></a>
- <a href="#" id="anchorOpt2"><img class="optImg" id="option2" src="" alt=""/></a>
- <a href="#" id="anchorOpt3"><img class="optImg" id="option3" src="" alt=""/></a>
- </div>
-
- <div id="gameOver">
- Game Over
- </div>
+ <strong id="itWorks">It Works!</strong>
</div>
+
+
<div id="kFooter">
</div>
</body>
diff --git a/js/jquery.i18n.js b/js/jquery.i18n.js index ac2193d..db142c4 100644 --- a/js/jquery.i18n.js +++ b/js/jquery.i18n.js @@ -37,7 +37,7 @@ locale = locale || $.i18n.lang; - if (!this.i18n[locale] || !this.i18n[locale].numBase ){ + if (!this.i18n[locale] || !this.i18n[locale].numeralBase ){ return num; } diff --git a/js/lesson.js b/js/lesson.js index 4d60c7d..dd7adea 100755 --- a/js/lesson.js +++ b/js/lesson.js @@ -1,45 +1,48 @@ $(document).ready( function(){ + + //preloads assets into karma 'collections' var k = Karma({ audio: [{'name':'correct','file':'correct.ogg'}, {'name':'incorrect','file':'incorrect.ogg'} ]}); + //this command will scale down the lesson if the user's browser window + //is smaller than 950px X 600px k.scaleWindow(); - $.i18n.setLocale('ne'); - + + //sets locale, otherwise defaults to English + $.i18n.setLocale('en'); + k.ready( function(){ + //put your main lesson code inside this callback - var flag, i ,j; - var object_counter = 1; - var imgNameRand = []; - var optPosition = []; - var optOtherPos = []; - var imageObject = []; - var imgNames = ["Bear", "Cow", "Elephant", "Horse", "Tiger", "Goat"]; - var correctPosition; - var selectedOption; - var score = 0; - var wrong_selected = 0; //wrong option selected so don't score up - var pos; - var t; - var current_image; - - var $help = $('#kHelpText').dialog({ - position:[ "right", "top"], modal:'true',autoOpen:false - }); - - var $feedback = $('#feedback').feedback(); - - $('#kHeaderHelpBtn').click(function(){ $help.dialog('open');}); + //This attaches the Karma Header widget to the div w/ the id #kHeader + //and initializes it w/ values + $('#kHeader').kHeader({'title': 'My First Karma Lesson', + lessonPlan: true, teachersNote: true}); - $('#kHeader').kHeader({'title': 'English Animal Identification', - lessonPlan: true, teachersNote: true}); + //set up the footer and initialize it with a winning score var kFooter = $('#kFooter').kFooter({'winningScore': 6}); + + //Set up feedback widget, this shows the user a correct or incorrect + //icon and sound when triggered programmatically + var $feedback = $('#feedback').feedback(); + + /* Here are examples of using the feedback widget + + $feedback.feedback('correct'); + $feedback.feedback('incorrect'); + $feedback.feedback('win'); + $feedback.feedback('lose'); + + */ + + //here are examples of binding behavior to events kFooter.bind('kFooterWinGame', function(){ $('.optImg').hide(); @@ -61,131 +64,8 @@ $(document).ready( } ); - - load_images(); //load the image numbers for random display - game(); //let the game begin - - - function checkDisplay(){ //Displays the correct and incorrect info - if(wrong_selected == 1){ - $feedback.feedback('incorrect'); - } - else if (object_counter === 7 ){ - $feedback.feedback('win'); - } else{ - $feedback.feedback('correct'); - } - } - - $("#anchorPlayAgain").click(function(){ - $('#gameOver').hide(); - $('.optImg').show(); - $('.imageBox').show(); - load_images(); - score = 0; - object_counter = 1; - wrong_selected = 0; - //display_score(); - kFooter.kFooter('reset'); - game(); - - }); - $("#anchorOpt0").click(function(){ - selected_Option_Process('0'); - }); - $("#anchorOpt1").click(function(){ - selected_Option_Process('1'); - }); - $("#anchorOpt2").click(function(){ - selected_Option_Process('2'); - }); - $("#anchorOpt3").click(function(){ - selected_Option_Process('3'); - }); - - - function load_images(){ - imageObject = k.shuffle([1, 2, 3, 4, 5, 6]); - } - - function selected_Option_Process(selectedOption){ - - if(selectedOption == correctPosition){ - object_counter++; - wrong_selected = 0; - score++; - kFooter.kFooter('inc'); - kFooter.kFooter('incTotal'); - checkDisplay(); - game(); - } - else { - wrong_selected = 1; - kFooter.kFooter('incTotal'); - checkDisplay(); - } - } - function game(){ - - wrong_selected = 0; - current_image = object_counter%6; - document.getElementById("imgObject").src = "assets/image/" + - imageObject[current_image] + ".png"; - - //find correct answer and apply it to the position - var currentImage = imageObject[current_image]; - imgNameRand[0] = currentImage; - //generate choices - - for(i=1; i<4; i++){ - do{ - flag = 0; - imgNameRand[i] = k.rand(1, 6); - for(j=0; j<i; j++){ - if(imgNameRand[i]===imgNameRand[j]){ - flag++; - } - } - }while(flag != 0 ); //end of do while loop - } - - - correctPosition = k.rand(0, 3); - - optOtherPos[0] = correctPosition; - - for(i=1; i<4; i++){ - do{ - flag = 0; - optOtherPos[i] = k.rand(0, 3); - for(j=0; j<i; j++){ //chek repeat within optOtherPos array - if(optOtherPos[i] === optOtherPos[j]){ - flag++; - } - } - - }while(flag != 0); - - } - - for(i=0; i<4; i++){ - pos = optOtherPos[i]; - optPosition[pos] = imgNameRand[i]; - //optPosition[pos] = imgNames[i]; - } - - - //random positions are stored in optOtherPos array. Great - - - for(i=0; i<4; i++){ - document.getElementById("option"+i+"").src = "assets/image/image_name/"+optPosition[i]+".png"; - } - - - } //no change }); //end of games }); //end of DOM
\ No newline at end of file diff --git a/js/ui.kFooter.js b/js/ui.kFooter.js index 02d7937..d25f6bd 100755 --- a/js/ui.kFooter.js +++ b/js/ui.kFooter.js @@ -157,11 +157,17 @@ stopTimer : function(){ this._setData('timerRunning', false); }, - _ : function(val, loc){ - return $.i18n.call($.ui.kFooter, val, loc); + _ : function(val, loc){ + if($.i18n){ + return $.i18n.call($.ui.kFooter, val, loc); + } + return val; }, _n : function(val, loc){ - return $._n(val, loc); + if ($.i18n){ + return $._n(val, loc); + } + return val; }, _init : function(){ @@ -1,18 +1,18 @@ <!DOCTYPE html> <html> <head> - <title>Start Page for English Animal Identification</title> + <title>Start Page for My First Karma Lesson</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/kStart.css" /> - <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script> - <script type="text/javascript" src="../../js/karma.js"></script> + <link type="image/ico" rel="icon" href="./assets/image/favicon.ico" /> + <link type="text/css" rel="stylesheet" href="./css/kStart.css" /> + <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script> + <script type="text/javascript" src="./js/karma.js"></script> </head> <body id="kStart"> <div id="top"> - <a href="../../list.html" title="Back"> + <a href="#" title="Back"> <div id='backBtn'> </div> </a> @@ -29,10 +29,10 @@ </div> <div id="subject" class="center">अँग्रेजी</div> <div id="lessonTitle" class="center"> - <a href="./index.html">Identifying Animals</a> + <a href="./index.html">My First Karma Lesson</a> </div> <div id="lessonDesc" class="center"> - This is a lesson for identifying animals + This is a lesson that teaches something </div> <div id="teachersNoteBtn" class="button"> <a href="./kDoc.html?back=start.html&doc=teachersNote"> |