diff options
Diffstat (limited to 'karma/js/lesson.js')
| -rwxr-xr-x | karma/js/lesson.js | 260 |
1 files changed, 260 insertions, 0 deletions
diff --git a/karma/js/lesson.js b/karma/js/lesson.js new file mode 100755 index 0000000..8a6591c --- /dev/null +++ b/karma/js/lesson.js @@ -0,0 +1,260 @@ +$(function(){ + +var k = Karma(); +k.ready(function(){ + var url = ' ' + window.location; + var temp = url.split('/') + var course = temp.pop().slice(7,9); //course_xx.html + var subject = temp.pop(); + subjectid = 'link' + subject; + /* set title in head */ + $('head title') + .empty() + .text(subject); + /* set navbar: linkHome link'subject', title, linkQuit */ + $('<div>',{ + class:'linkHome topbtn_left', + id:'linkHome', + title:'Home', + click:function(){ + window.location = 'http://localhost:8008/content/index.html'; + } + }) + .appendTo('#header'); + cls = 'link' + subjectid + ' ' + 'topbtn_left'; + $('<div>',{ + class:cls, + id:subjectid, + title:subject, + click:function(){ + location='http://localhost:8008/content/courses.html' + } + }) + .appendTo('#header'); + $('<div>',{ + id:'lesson_title' + }) + .text(subject) + .appendTo('#header'); + $('<img>',{ + src:'../karma/image/title_block_lt.png', + class:'title_img' + }) + .prependTo('#lesson_title'); + $('<img>',{ + src:'../karma/image/title_block_rt.png', + class:'title_img' + }) + .appendTo('#lesson_title'); + $('<div>',{ + class:'linkQuit topbtn_right', + id:'linkQuit', + title:'Quit', + click:function(){ + window.close(); + } + }) + .appendTo('#header'); + + function setPath(xy){ + pth = "unavailable.html"; + if (xy[3] == "EPaath"){ + pth = "../../../src/FrameWork.html#" + xy[4]; + }; + if (xy[3] == "basic"){ + pth = xy[4] + '/index.html'; + }; + if (xy[3] == 'Karma'){ + pth = xy[4] + '/index.html'; + }; + if (xy[3] == 'Sugar'){ + pth = xy[4] + '/index.html'; + }; + window.location = pth; + }; + + function drawMilestone(ctx, cellsize, x, y, capcolor, number){ + var capcolor; + x = activity[6]; + y = activity[7]; + capcolor = activity[5]; + ctx.fillStyle = 'chartreuse'; + ctx.fillRect(x,y-cellsize,cellsize,cellsize); + ctx.fillStyle = 'black'; + ctx.fillText(number, 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 drawarrow(ctx, 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 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 activityNumber = 0; + var flag = 0; + var il = "" + var xy; + var pth; + var count = 0; + // set up callback + $("canvas").click(function($e) { + // find out which activity in activities was clicked + x = $e.pageX + y = $e.pageY + ctx.fillStyle = 'black' + $.each(activities, function() { + xy = this; + //if a hit, download if necessary, go to unit + hit = (x > xy[6]) + && (x < xy[6] + cellsize) + && (y < xy[7]) + && (y > xy[7] - cellsize) + if(hit) { + if(mode == 'Faculty') { + setPath(xy); + }else if (xy[5] == 'red'){ + setPath(xy); + }; + }; + }); + }); + // now draw ladder + ctx.font = "14pt Arial"; + ctx.textAlign = "center"; + x = xstart; + y = ystart; + ctx.beginPath(); + sz = cellsize; + drawarrow(ctx, x, y, sz); + offset=0; + delta = 1; + for(row=0;row<rows;row++){ + if (activityNumber == activities.length) { + break; + }; + if (offset == 0){ + x = xstart; + }else{ + x = xstart+offset-sz*3/2; + }; + for(cell=0;cell<cells;cell++){ + xsave = x; + if (activityNumber < activities.length){ + ctx.fillStyle = 'yellow'; + ctx.fillRect(x,y,sz*3/2, sz/4); + activity = activities[activityNumber]; + activity.push(x) + activity.push(y) + activities[activityNumber] = activity; + if(''+activity[0] == '0'){ + drawMilestone(ctx, cellsize, x, y, activity[5],''+activity[1]); + }else{ + // draw flag + ctx.moveTo(x,y); + ctx.lineTo(x,y-cellsize); + ctx.strokeStyle = 'black'; + ctx.stroke(); + ctx.fillStyle = activity[5]; + ctx.fillRect(x,y-cellsize,cellsize,cellsize/20); + ctx.textAlign='center'; + ctx.font = '20pt Arial'; + ctx.fillStyle = 'black'; + ctx.fillText(''+activity[1],x+cellsize/2,y-cellsize/2-10,cellsize); + } + activityNumber += 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; + } + }else{ + alert('canvas not defined'); + }; + }; + + draw(); + +}); //end karma ready + +}); // end document ready |