From aeb50aa30708c04cd816172753ea4972815b207c Mon Sep 17 00:00:00 2001 From: Bryan Berry Date: Wed, 17 Feb 2010 11:01:27 +0000 Subject: make lesson generic --- 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; -} diff --git a/index.html b/index.html index 3fab793..f58e3c4 100755 --- a/index.html +++ b/index.html @@ -1,16 +1,19 @@ - English_Animal Identification + My First Karma Lesson - + + + + @@ -22,6 +25,8 @@ + + @@ -29,29 +34,18 @@
- +
Help text here
- +
-
What is this?
- - -
- - - - - - -
- -
- Game Over -
+ It Works!
+ +
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 - Start Page for English Animal Identification + Start Page for My First Karma Lesson - - - - + + + +
- +
@@ -29,10 +29,10 @@
अँग्रेजी
- This is a lesson for identifying animals + This is a lesson that teaches something