diff options
Diffstat (limited to 'js/lesson.js')
| -rwxr-xr-x | js/lesson.js | 218 |
1 files changed, 218 insertions, 0 deletions
diff --git a/js/lesson.js b/js/lesson.js new file mode 100755 index 0000000..2e2018a --- /dev/null +++ b/js/lesson.js @@ -0,0 +1,218 @@ +$(document).ready(function() { + var k = Karma({ + audio: [{'name':'correct','file':'correct.ogg'}]}); + + k.ready(function(){ + + //initialize the variables used and display initial value + var drag_no = 0; //store the current dragged no + var drop_no = 0; //store the current dropped on no + var imgrand = []; //stores the random variables generated + var imgPosition = []; //stores the position of the random variable + var drag_position = 0; //position of dragged object + var drop_position = 0; //position of dropped object + var flag, i ,j; + var moves_count = 0; + var imgPath; + + + var feedbackImage = $('#feedback_image'); + for(var i=0; i<16; i++){ + feedbackImage.append("<img class='dragme' id='imgdrag" + + i + "' draggable='true' src='' alt='' />"); + } + + + game("img1"); + + $('a#anchorImg1').click(function(){ + $("#"+imgPath+"").hide(); + $(".dragme").show(); + game("img1"); + + + }); + + $('a#anchorImg2').click(function(){ + $("#"+imgPath+"").hide(); + $(".dragme").show(); + game("img2"); + + }); + + $('a#anchorImg3').click(function(){ + $("#"+imgPath+"").hide(); + $(".dragme").show(); + game("img3"); + + }); + + function generate_random_no() { //generate random number + var rand_no = Math.ceil(16*Math.random()); + return rand_no; + } + + //update the Random variable number according to the position + //update number according to the position and the value + function update_Numbers_position(){ + imgrand[drag_position] = drop_no; + imgrand[drop_position] = drag_no; + } + + //Check the game over + function check_game_over(){ + var x = 0; + for(i=0;i<16;i++){ + if(imgrand[i] == i+1){ + x++; + } + } + if(x == 16){ //puzzle solved . Hurray + k.audio.correct.play(); + $(".dragme").hide(); + $("#"+imgPath+"").fadeIn(5000); + + + } + } + + function game(imgPuzzle){ //draws the necessary random numbers for the game + imgPath = imgPuzzle; + imgrand[0]=generate_random_no(); //1 number generated, 3 different numbers to be generated + for(i=1; i<16; i++){ + do{ + flag = 0; + imgrand[i] = generate_random_no(); + for(j=0; j<i; j++){ + if(imgrand[i]===imgrand[j]){ + flag++; + } + } + }while(flag != 0 ); //end of do while loop + } + + for(i=0; i<16; i++){ + imgPosition[i] = i; + document.getElementById("imgdrag"+i+"").src = "assets/image/"+imgPath+"/"+imgrand[i]+".png"; + } + + } //end of game() + $('#feedback_image').bind('dragstart', function(ev) { + if (!$(ev.target).hasClass('dragme')) + return true; + switch (ev.target.id) { + case 'imgdrag0': + drag_no = imgrand[0]; drag_position = 0; break; + case 'imgdrag1': + drag_no = imgrand[1]; drag_position = 1; break; + case 'imgdrag2': + drag_no = imgrand[2]; drag_position = 2; break; + case 'imgdrag3': + drag_no = imgrand[3]; drag_position = 3; break; + case 'imgdrag4': + drag_no = imgrand[4]; drag_position = 4; break; + case 'imgdrag5': + drag_no = imgrand[5]; drag_position = 5; break; + case 'imgdrag6': + drag_no = imgrand[6]; drag_position = 6; break; + case 'imgdrag7': + drag_no = imgrand[7]; drag_position = 7; break; + case 'imgdrag8': + drag_no = imgrand[8]; drag_position = 8; break; + case 'imgdrag9': + drag_no = imgrand[9]; drag_position = 9; break; + case 'imgdrag10': + drag_no = imgrand[10]; drag_position = 10; break; + case 'imgdrag11': + drag_no = imgrand[11]; drag_position = 11; break; + case 'imgdrag12': + drag_no = imgrand[12]; drag_position = 12; break; + case 'imgdrag13': + drag_no = imgrand[13]; drag_position = 13; break; + case 'imgdrag14': + drag_no = imgrand[14]; drag_position = 14; break; + case 'imgdrag15': + drag_no = imgrand[15]; drag_position = 15; break; + } + + //document.display.dragBox.value = drag_no; + //document.display.dragPos.value = drag_position; + + return true; + }); + + // Set up the drop zone. + $('#feedback_image').bind('dragenter', function(ev) { // Update the drop zone class on drag enter/leave + if (!$(ev.target).hasClass('dragme')) return true; + $(ev.target).addClass('dragover'); return false; + }) + + .bind('dragleave', function(ev) { + if (!$(ev.target).hasClass('dragme')) return true; + $(ev.target).removeClass('dragover'); return false; + }) + + // Allow drops of any kind into the zone. + .bind('dragover', function(ev) { + if (!$(ev.target).hasClass('dragme')) return true; + return false; + }) + + // Handle the final drop... + .bind('drop', function(ev) { + if (!$(ev.target).hasClass('dragme')) return true; + switch (ev.target.id) { + case 'imgdrag0': + drop_no = imgrand[0]; drop_position = 0; break; + case 'imgdrag1': + drop_no = imgrand[1]; drop_position = 1; break; + case 'imgdrag2': + drop_no = imgrand[2]; drop_position = 2; break; + case 'imgdrag3': + drop_no = imgrand[3]; drop_position = 3; break; + case 'imgdrag4': + drop_no = imgrand[4]; drop_position = 4; break; + case 'imgdrag5': + drop_no = imgrand[5]; drop_position = 5; break; + case 'imgdrag6': + drop_no = imgrand[6]; drop_position = 6; break; + case 'imgdrag7': + drop_no = imgrand[7]; drop_position = 7; break; + case 'imgdrag8': + drop_no = imgrand[8]; drop_position = 8; break; + case 'imgdrag9': + drop_no = imgrand[9]; drop_position = 9; break; + case 'imgdrag10': + drop_no = imgrand[10]; drop_position = 10; break; + case 'imgdrag11': + drop_no = imgrand[11]; drop_position = 11; break; + case 'imgdrag12': + drop_no = imgrand[12]; drop_position = 12; break; + case 'imgdrag13': + drop_no = imgrand[13]; drop_position = 13; break; + case 'imgdrag14': + drop_no = imgrand[14]; drop_position = 14; break; + case 'imgdrag15': + drop_no = imgrand[15]; drop_position = 15; break; + } + + moves_count++; + //document.display.dropBox.value = drop_no; + //document.display.dropPos.value = drop_position; + //document.display.moves.value = moves_count; + + document.getElementById("imgdrag"+imgPosition[drag_position]+"").src = "assets/image/"+imgPath+"/"+drop_no+".png"; + document.getElementById("imgdrag"+imgPosition[drop_position]+"").src = "assets/image/"+imgPath+"/"+drag_no+".png"; + + update_Numbers_position(); + + + //Game over condition + check_game_over(); + + ev.stopPropagation(); + return false; + }); + + }); +}); //end of document.ready |