path: root/content/js/learner_subject.js

$(document).ready(
    function(){
	var k = Karma();

	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;
                 
                    url = window.location+"";
                    if(url.indexOf('index')<0){
                        mode = 'faculty'
                    }else{
                        mode = 'student'
                    }
                    $("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
                    if ( (x > xy[1]) && (x < xy[1] + cellsize) && (y < xy[2]) 
                    && (y > xy[2] - cellsize) 
                    && (mode == 'faculty')) {
                                        pth = xy[4]+'/index.html';
                                        window.location = pth;
                                     }else 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();

        });
    });
    
});