diff options
Diffstat (limited to 'content/js/learner_subject.js')
| -rwxr-xr-x | content/js/learner_subject.js | 216 |
1 files changed, 216 insertions, 0 deletions
diff --git a/content/js/learner_subject.js b/content/js/learner_subject.js new file mode 100755 index 0000000..443355a --- /dev/null +++ b/content/js/learner_subject.js @@ -0,0 +1,216 @@ +$(document).ready( + function(){ + var k = Karma(assetList); + + k.ready(function() { + + logos; + + activities; + + k.ready(function(){ + + //game logic + + function draw(){ + var canvas = document.getElementById('ladder'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + var cells = 6; + var rows = 2 + (activities.length / cells); + var maxx = 1200; + var cellsize = 64; + var sz = cellsize; + var maxy = rows * 1.5 * cellsize; + if (maxy < 673){ + maxy = 673;; + }; + canvas.setAttribute('width', maxx); + canvas.setAttribute('height', maxy); + var x = 0; + var y = 0; + var odd = 1; + var xstart = 1.7 * cellsize; + var ystart = maxy - cellsize; + var row = 0; + var cell = 0; + var id = -1; + var ix = 0; + var idm = 0; + var activity = 0; + var flag = 0; + var acts = new Array(); + var idx = 0 + var il = "" + var xy; + var pth; + var count = 0; + + $("canvas").click(function($e) { + // find out which act in acts was clicked + x = $e.pageX + y = $e.pageY + $.each(acts, function() { + xy = this; + // directory structure: content/subject/milestone/activity + // for learners, we want the red milestone + if( xy[5] == 'red'){ + pth = xy[4]+'/index.html'; + window.location = pth; + }; + }); + }); + // ladder + ctx.font = "14pt Arial"; + ctx.textAlign = "center"; + x = xstart; + y = ystart; + ctx.beginPath(); + sz = cellsize; + drawarrow(x,y,sz); + offset=0; + delta = 1; + for(row=0;row<rows;row++){ + if (activity == activities.length) { + break; + }; + if (offset == 0){ + x = xstart; + } else { + x = xstart+offset-sz*3/2; + }; + for(cell=0;cell<cells;cell++){ + xsave = x; + if (activity < activities.length){ + ctx.fillStyle = 'yellow'; + ctx.fillRect(x,y,sz*3/2, sz/4); + drawlogo(x,y,activity); + activity = activity + 1; + x = x + 3/2*sz; + if (delta > 0) { + if (cell+1 < cells) { + ctx.fillstyle='yellow'; + ctx.fillRect(x,y,sz,sz/4); + x = xsave + sz*5/2; + } else { + x = xsave + sz*3/2; + }; + } else { + if (cell > 0) { + ctx.fillStyle = 'yellow'; + ctx.fillRect(x,y,sz,sz/4); + }; + if (cell+1<cells){ + x = xsave - sz*5/2; + } else { + x = xsave-sz*3/2; + }; + }; + }; + }; + if ((row + 1 < rows) && + (activity < activities.length)) { + if (row % 2 == 0) { + ctx.beginPath(); + ctx.moveTo(x,y); + ctx.arc(x, y-cellsize, cellsize, Math.PI/2, 0, 1); + ctx.arc(x, y-cellsize, 1.25*cellsize, 0, Math.PI*3/2, 1); + ctx.arc(x, y-cellsize, cellsize, Math.PI*3/2, 0, 0); + ctx.arc(x, y-cellsize, 1.25*cellsize, 0, Math.PI/2, 0); + ctx.closePath(); + ctx.fillStyle='yellow' + ctx.fill() + } else { + x = xstart; + ctx.beginPath(); + ctx.moveTo(x,y); + ctx.arc(x, y-cellsize, cellsize, Math.PI/2, Math.PI, 0); + ctx.arc(x, y-cellsize, 1.25*cellsize, Math.PI, Math.PI*3/2, 0); + ctx.arc(x, y-cellsize, cellsize, Math.PI*3/2, Math.PI, 1); + ctx.arc(x, y-cellsize, 1.25*cellsize, Math.PI, Math.PI/2, 1); + ctx.closePath(); + ctx.fillStyle='yellow' + ctx.fill() + } + } + y = y - 2.25 * cellsize; + offset = x - xstart; + delta = -delta; + } + } + + function drawarrow(x,y,sz) { + ctx.fillStyle = 'black' + ctx.fillRect(x-sz*4/5,y+sz/8,sz/2,sz/8); + ctx.moveTo(x-sz/2,y); + ctx.lineTo(x-sz/5,y+sz/8); + ctx.moveTo(x-sz/2,y+sz/2); + ctx.lineTo(x-sz/5,y+sz/8); + ctx.stroke(); + }; + + function drawmilestone(activity){ + var capcolor; + x = activity[1]; + y = activity[2]; + capcolor = activity[5]; + ctx.fillStyle = 'chartreuse'; + ctx.fillRect(x,y-cellsize,cellsize,cellsize); + ctx.fillStyle = 'black' + ctx.fillText(ix, x + (cellsize * 0.3), y-(cellsize * 0.4), cellsize); + ctx.beginPath(); + ctx.moveTo(x, y-cellsize); + ctx.arc(x+0.5*cellsize,y-cellsize,0.5*cellsize,Math.PI,0,0); + ctx.closePath(); + ctx.fillStyle = capcolor; + ctx.fill(); + ctx.fillStyle = 'yellow'; + }; + + function drawlogo(x, y, activity) { + var il, ty, ls, cc; + id = 0; /* we always have a milestone here */ + ix = activities[activity][1]; + if ((activities[activity].length) > 1){ + il = activities[activity][2]; + } else { + il = ""; + }; + if ((activities[activity].length) > 2){ + ty = activities[activity][3]; + }else{ + ty = ""; + }; + if ((activities[activity].length) > 3){ + ls = activities[activity][4]; + }else{ + ls = ""; + }; + if ((activities[activity].length) > 4){ + cc = activities[activity][5]; + }else{ + cc = 'cyan'; + }; + idx = idx + 1; + acts[idx] = [il, x, y, ty, ls, cc]; + if (id < 2){ + drawmilestone(acts[idx]); + } else { + // draw logo + alert('draw logo - should not happen'); + ctx.drawImage(k.image[logos[id-1]].media, x, y - cellsize); + if (ix > 0) { + ctx.textAlign = 'center' + ctx.fillStyle = 'black' + ctx.fillText(ix, x + cellsize/2, y+cellsize/4, cellsize); + }; + }; + } + } + + draw(); + + }); + }); + +}); |