diff options
-rwxr-xr-x | examples/adding_up_to_10/css/lesson.css | 10 | ||||
-rwxr-xr-x | examples/adding_up_to_10/index.html | 18 | ||||
-rwxr-xr-x | examples/adding_up_to_10/js/lesson.js | 140 |
3 files changed, 124 insertions, 44 deletions
diff --git a/examples/adding_up_to_10/css/lesson.css b/examples/adding_up_to_10/css/lesson.css index c6044b0..2039dee 100755 --- a/examples/adding_up_to_10/css/lesson.css +++ b/examples/adding_up_to_10/css/lesson.css @@ -68,7 +68,7 @@ position:absolute; top:50px; } -#topLtCanvas { +#topLtPaper { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; @@ -93,7 +93,7 @@ position:absolute; right: 50px; top: 50px; } -#topRtCanvas { +#topRtPaper { background:none none repeat scroll 0 0; position:absolute; left: 50px; @@ -139,7 +139,7 @@ top:10px; left:25px; } -#timerCanvas { +#timerPaper { position:absolute; width:100px; height:150px; @@ -155,7 +155,7 @@ top:10px; left:25px; } -#scoreboxCanvas { +#scoreboxPaper { position:absolute; width:100px; height:150px; @@ -164,7 +164,7 @@ left:25px; } -#chimpCanvas { +#chimpPaper { position:absolute; top:10px; left:25px; diff --git a/examples/adding_up_to_10/index.html b/examples/adding_up_to_10/index.html index 6a7db8b..1918c9f 100755 --- a/examples/adding_up_to_10/index.html +++ b/examples/adding_up_to_10/index.html @@ -24,7 +24,7 @@ <div id="topLtSide"> <img id="topLtBox" src="assets/generic/images/yellowBox.png" alt="" /> - <div id="topLtCanvas" ></div> + <div id="topLtPaper" ></div> </div> <div id="topMd"> @@ -32,24 +32,24 @@ </div> <div id="topRtSide"> <img id="topRtBox" src="assets/generic/images/yellowBox.png" alt=""/> - <div id="topRtCanvas"></div> + <div id="topRtPaper"></div> </div> </div> <div id="bottom"> - <!-- <div id="bottomCanvas"></div> --> + <!-- <div id="bottomPaper"></div> --> <div id="bottomLt" class="bottom"> <img class="bottomBox" src="assets/generic/images/yellowBox.png" alt=""/> - <div id="bottomLtCanvas" class="bottomBox"> </div> + <div id="bottomLtPaper" class="bottomBox"> </div> </div> <div id="bottomMd" class="bottom"> <img class="bottomBox" src="assets/generic/images/yellowBox.png" alt=""/> - <div id="bottomMdCanvas" class="bottomBox"> </div> + <div id="bottomMdPaper" class="bottomBox"> </div> </div> <div id="bottomRt" class="bottom"> <img class="bottomBox" src="assets/generic/images/yellowBox.png" alt=""/> - <div id="bottomRtCanvas" class="bottomBox"> </div> + <div id="bottomRtPaper" class="bottomBox"> </div> </div> </div> @@ -58,14 +58,14 @@ <div id="sidebar"> <div class="sidebarItem"> <img id="timer" src="assets/generic/images/scorebox.png" alt=""/> - <div id="timerCanvas"> </div> + <div id="timerPaper"> </div> </div> <div class="sidebarItem"> <img id="scorebox" src="assets/generic/images/scorebox.png" alt=""/> - <div id="scoreboxCanvas"></div> + <div id="scoreboxPaper"></div> </div> <div class="sidebarItem"> - <div id="chimpCanvas"> </div> + <div id="chimpPaper"> </div> <div id="buttons"> <button id="start">Start</button> <button id="stop">Stop</button> diff --git a/examples/adding_up_to_10/js/lesson.js b/examples/adding_up_to_10/js/lesson.js index f471f38..ad4ec6b 100755 --- a/examples/adding_up_to_10/js/lesson.js +++ b/examples/adding_up_to_10/js/lesson.js @@ -17,14 +17,14 @@ $(document).ready(function(){ ] , - sounds: [ +/* sounds: [ {name: "correct", file: "correct.ogg"}, {name: "incorrect", file: "incorrect.ogg"}, {name: "trigger", file: "trigger.ogg", localized: false} ], -/* surfaces: [ + surfaces: [ {name:"topLt", canvas:"topLtCanvas"}, {name:"topRt", canvas:"topRtCanvas"}, {name:"bottomLt", canvas:"bottomLtCanvas"}, @@ -56,7 +56,46 @@ k.main(function() { var endTimerY = 100; var offsetTimerY = 5; var timerId; + var timerPaper, timerRect, chimpPaper, normalChimp, sadChimp, + happyChimp, + topLtBox, topRtBox, bottomLtBox, bottomMdBox, bottomRtBox; + + topLtBox = createBox("topLt"); + topRtBox = createBox("topRt"); + bottomLtBox = createBox("bottomLt"); + bottomMdBox = createBox("bottomMd"); + bottomRtBox = createBox("bottomRt"); +// topLtPaper, topRtPaper, bottomLtPaper, bottomMdPaper, bottomRtPaper; +// topLtSet, topRtSet, bottomLtSet, bottomMdSet, bottomRtSet, sets; + +/* topLtPaper = Raphael('topLtPaper', 200, 200); + topRtPaper = Raphael('topRtPaper', 200, 200); + bottomLtPaper = Raphael('bottomLtPaper', 200, 200); + bottomMdPaper = Raphael('bottomMdPaper', 200, 200); + bottomRtPaper = Raphael('bottomRtPaper', 200, 200); + + topLtBox = { "paper": topLtPaper, "prefix":"topLt", + "set": topLtPaper.set()}; + topRtBox = { "paper": topRtPaper, "prefix":"topRt", + "set": topRtPaper.set()}; + bottomLtBox = { "paper": bottomLtPaper, "prefix":"bottomLt", + "set": bottomLtPaper.set()}; + bottomMdBox = { "paper": bottomMdPaper, "prefix":"bottomMd", + "set": bottomMdPaper.set()}; + bottomRtBox = { "paper": bottomRtPaper, "prefix":"bottomRt", + "set": bottomRtPaper.set()}; +*/ + sets = [topLtBox["set"], topRtBox["set"], bottomLtBox["set"], + bottomMdBox["set"], bottomRtBox["set"]]; + + var createBox = function (box, paperName) { + var set, paper; + paper = Raphael(paperName, 200, 200); + set = paper.set(); + return { "paper": paper, "prefix": paperName, "set": set}; + }; +/* var timerFn = function () { k.surfaces['timer'].clear(); @@ -74,13 +113,11 @@ k.main(function() { } }; - - function game () { - $.each(k.surfaces, function () { - if (this.name != "chimp"){ - this.clear(); - } - }); +*/ +/* function game () { +// $.each(sets, function () { +// this.remove(); +// }); writeScore(); @@ -111,16 +148,21 @@ k.main(function() { var imgId = imgNames[ level ] ; - var card = function (surface, n, minx, miny, d ) { - surface.save(); - var r = k.rectangle({x:minx, y:miny, width:maskd, height:maskd, - stroke:false,fill:false}).draw(surface); + var card = function (paper, prefix, n, d ) { + + // var r = k.rectangle({x:minx, y:miny, width:maskd, height:maskd, + // stroke:false,fill:false}).draw(surface); //do the clip //surface.clip(); var pos = []; var x, y, flag; + var imgNames = {}; + var x, y; + + imgNames[prefix] = []; + for (var i=0; i<n; i++) { do { @@ -145,6 +187,7 @@ k.main(function() { surface.restore(); } + //put the cards card(k.surfaces["topLt"], n0 , 0, 0, d); @@ -154,7 +197,8 @@ k.main(function() { card(k.surfaces["bottomRt"], choices[ 2 ] , 0, 0, d); } - +*/ +/* var writeScore = function (){ k.surfaces["scorebox"].save(). clear(). @@ -197,26 +241,26 @@ k.main(function() { }; +*/ + var animateChimp = function (answer) { var timerChimp; - k.surfaces["chimp"].clear(); + normalChimp.hide(); if( answer === true){ - k.library.images["happyChimp"].draw(k.surfaces["chimp"], 0, 0); + happyChimp.show(); } else { - k.library.images["sadChimp"].draw(k.surfaces["chimp"], 0, 0); + sadChimp.show(); } - var restoreChimp = function () { - k.surfaces["chimp"].clear(); - k.library.images["normalChimp"].draw(k.surfaces["chimp"], 0, 0); - }; - - timerChimp = setTimeout(restoreChimp, 800); - - + + timerChip = setTimeout(function() { + happyChimp.hide(); + sadChimp.hide(); + normalChimp.show();}, 800); + }; - var changeTimer = function (status){ +/* var changeTimer = function (status){ startTimerY = 10; k.surfaces["timer"].clear(); clearInterval(timerId); @@ -256,7 +300,7 @@ k.main(function() { }; - +*/ /* //put the buttons @@ -290,17 +334,53 @@ k.main(function() { k.library.images["normalChimp"].draw(k.surfaces["chimp"], 0, 0); */ + + var addImages = function(paper, set, prefix, img, num){ + var i; + var imgNames = {}; + var x, y; + + imgNames[prefix] = []; + +// paper.image(img, 0, 20, 100, 100); + + for (i = 0; i < num; i++){ + x = k.math.rand( 0, 160 ); + y = k.math.rand( 0, 160 ); + imgNames[prefix][i] = paper.image(img, x , y, 40, 40); + set.push(imgNames[prefix][i]); + } + + }; + - var timerPaper = Raphael('timerCanvas', 100, 150); - var timerRect = timerPaper.rect(10, 25, 85, 20, 3); + timerPaper = Raphael('timerPaper', 100, 150); + timerRect = timerPaper.rect(10, 25, 85, 20, 3); timerRect.attr('fill', "#fff"); timerRect.animate({y: 130}, 2000, function(){ timerRect.attr("y", "25");}); - + chimpPaper = Raphael('chimpPaper', 120, 125); + normalChimp = chimpPaper.image(k.library.images["normalChimp"].src, 0, 20, 100, 100); + sadChimp = chimpPaper.image(k.library.images["sadChimp"], 0, 20, 100, 100); + sadChimp.hide(); + happyChimp = chimpPaper.image(k.library.images["happyChimp"].src, 0, 20, 100, 100); + happyChimp.hide(); + + topLtBox["paper"] = Raphael('topLtPaper', 200, 200); + topLtBox["set"] = topLtBox["paper"].set(); +// addImages(topLtPaper, topLtSet, 'topLt', k.library.images["ball"].src, 7); +// var ball2 = topLtPaper.image(k.library.images["ball"].src, 0, 50, 40, 90); +// topLtSet.push(ball1, ball2); +// var timerId5 = setTimeout(function(){topLtSet.remove();}, 1000); + topLtBox["set"].remove(); + topLtBox["set"] = topLtBox["paper"].set(); + //end of Karma.main }); + + //end of ready });
\ No newline at end of file |