function OneColumnAbacus(stage,rods,number,base,colours,startvalue,schety,fractions,caacupe,rodf){ if (startvalue === undefined) startvalue=rods; if (schety === undefined) schety=false; if (fractions === undefined) fractions=false; if (caacupe === undefined) caacupe=false; if (rodf === undefined) rodf=false; //top bar: 8/5*blockh //middle bar: blockh //bottom bar: 8/5*blockh //margin between blocks: blockw/3 //margin between blocks on line: blockh/20 //block 25,33 //top margin: screen height/10 //blockheight given screen: 9*screen height/10 this.blockScaleYFromX = 25/33; this.topBottomBarScale = 8/5; this.leftRightBarScale = 8/5*this.blockScaleYFromX; this.middleBarScale = 1; this.horizontalMargin = 1/3; this.verticalMargin = 1/20; this.extraBeads = 2; this.rods = rods; this.blockHeight = 0; this.blockWidth = 0; this.abacusHeight = 0; this.abacusWidth = 0; this.upperBlockHeight = 0; this.lowerBlockHeight = 0; this.colHeight = 0; this.stage = stage; this.columns = []; this.rodtext = []; this.answertext = null; this.trix = null; this.startx = null; this.schetyColumns = [1000000000,100000000,10000000,1000000,100000,10000,1000,100,10,1,0.25,0.1,0.01,0.001,0.0001]; this.fractionColumns = [100000,10000,1000,100,10,1,[1,2],[1,3],[1,4],[1,5],[1,6],[1,8],[1,9],[1,10],[1,12]]; this.rodsColumns = [[1,1],[1,2],[1,3],[1,4],[1,5],[1,6],[1,7],[1,8],[1,9],[1,10]]; this.rodsColours = ["#FFFFFF","#FC0D1B","#88FD31","#FC28FC","#FFFD38","#1FCC23","#000000","#AA6717","#23CCFC","#FD8824"]; this.blockGivenWidth = function(width){ var blockwidth = width/((2*this.leftRightBarScale)+rods+this.horizontalMargin*rods); return blockwidth; } this.blockGivenHeight = function(height){ var blockheight = height/((2*this.topBottomBarScale)+(number+this.extraBeads)+this.verticalMargin*(number+this.extraBeads)); return blockheight; } this.heightGivenBlockWidth = function(blockwidth){ var blockheight = this.blockScaleYFromX*blockwidth; var h = blockheight*((2*this.topBottomBarScale)+(number+this.extraBeads)+this.verticalMargin*(number+this.extraBeads)); return h; } this.widthGivenBlockWidth = function(blockwidth){ var w = blockwidth*((2*this.leftRightBarScale)+rods+this.horizontalMargin*rods); return w; } this.initValues = function(){ var height = (9/10-1/20)*stage.canvas.height; var width = 9/10*stage.canvas.width; var w = this.blockGivenWidth(width); var h = this.blockScaleYFromX*w; if (this.heightGivenBlockWidth(w)>height){ h = this.blockGivenHeight(height); w = h/this.blockScaleYFromX; console.log("Using height"); } this.blockHeight = h; this.blockWidth = w; this.abacusHeight = this.heightGivenBlockWidth(this.blockWidth); this.abacusWidth = this.widthGivenBlockWidth(this.blockWidth); this.colHeight = this.blockHeight*((number+this.extraBeads)+this.verticalMargin*(number+this.extraBeads)); console.log(this.blockHeight); console.log(this.blockWidth); console.log(this.abacusHeight); console.log(this.abacusWidth); this.startx = ((stage.canvas.width-this.abacusWidth)/2)+(this.leftRightBarScale*this.blockWidth)+((this.horizontalMargin*this.blockWidth)/2)+(this.blockWidth/2); } this.initRectangle = function(){ var rect = new createjs.Shape(); rect.graphics.beginStroke("#000000"); rect.graphics.setStrokeStyle(this.leftRightBarScale*this.blockWidth); rect.graphics.beginFill("#C0C0C0").drawRoundRect((this.leftRightBarScale*this.blockWidth)/2,(this.leftRightBarScale*this.blockWidth)/2,this.abacusWidth-(this.leftRightBarScale*this.blockWidth),this.abacusHeight-(this.leftRightBarScale*this.blockWidth),2/3*this.blockWidth); rect.x = (stage.canvas.width-this.abacusWidth)/2; rect.y = stage.canvas.height/10; stage.addChild(rect); } this.initTriangle = function(){ this.tri = new createjs.Shape(); var width = this.blockWidth/4*3; var y = stage.canvas.height/10+2*(this.leftRightBarScale*this.blockWidth)/3; var startx = ((stage.canvas.width-this.abacusWidth)/2)+(this.leftRightBarScale*this.blockWidth)+((this.horizontalMargin*this.blockWidth)/2)+(this.blockWidth/2); var incr = ((this.horizontalMargin*this.blockWidth))+this.blockWidth; var x = startx+(incr*(rods-1)); this.tri.graphics.moveTo(0-width/2,0).beginFill("#FC0D1B").lineTo(0+width/2,0).lineTo(0,0+(this.leftRightBarScale*this.blockWidth)/3).lineTo(0-width/2,0).closePath(); this.tri.x = x-(this.blockWidth/2); this.tri.y = y; this.trix = this.tri.x-this.startx; stage.addChild(this.tri); var c = this.tri; var t = this; this.tri.on("mousedown", function (evt) { this.offset = {x: c.x - evt.stageX, y: c.y - evt.stageY}; }); this.tri.on("pressmove", function (evt) { if (evt.stageX + this.offset.x < startx-(t.blockWidth/2)){ c.x = startx-(t.blockWidth/2); } else if (evt.stageX + this.offset.x > x+(t.blockWidth/2)){ c.x = x+(t.blockWidth/2); } else { c.x = evt.stageX + this.offset.x; } t.trix = c.x-t.startx; }); } this.initColumns = function(){ var startx = ((stage.canvas.width-this.abacusWidth)/2)+(this.leftRightBarScale*this.blockWidth)+((this.horizontalMargin*this.blockWidth)/2)+(this.blockWidth/2); var incr = ((this.horizontalMargin*this.blockWidth))+this.blockWidth; //console.log("======"); //console.log(startx); //console.log(incr); var starty = stage.canvas.height/10+(this.leftRightBarScale*this.blockWidth); var endy = starty+this.colHeight; var grey = ["#A0A0A0","#6B6B6B"]; var black = ["#000000","#000000"]; var colinuse; console.log(colours); var fill = colours.fill; var stroke = colours.stroke; var xocolinuse; var val; if (schety==false&&fractions==false&&caacupe==false&&rodf==false){ for (var item = 0; item5){ xocolinuse="#000000"; } val = new window.Fraction(this.fractionColumns[item]); console.log(val); if(item>5){ theight=this.fractionColumns[item][1]; } else { theight=10; } if (caacupe==true){ var c = new PosNegColumn(startx,starty,endy,theight,heightcol,xocolinuse,colinuse,this,val,false,false); } else { var c = new StandardAbacusColumn(startx,starty,endy,0,theight,heightcol,xocolinuse,colinuse,this,val,false,false); } c.init(); this.columns.push(c); startx+=incr; } } else { console.log("rods"); var heightcol = number+this.extraBeads; var theight; for (var item = 0; item= 40) { this.answertext.font = parseInt(((this.blockWidth / (this.answertext.text).length)*40)) + "px Arial"; } else { this.answertext.font = (this.blockWidth).toString()+"px Arial"; } } } this.updateTextItems = function(){ if (caacupe==true||rodf==true){ this.updatePosNegTextItems(); } else if (this.columns.length==rods){ var sumarr = []; var total = new window.Fraction(0,1); for (var i = 0; i= 40) { this.answertext.font = parseInt(((this.blockWidth / (this.answertext.text).length)*40)) + "px Arial"; } else { this.answertext.font = (this.blockWidth).toString()+"px Arial"; } } } this.init = function(){ this.initValues(); this.initRectangle(); this.initColumns(); this.initTextItems(); this.initTriangle(); } }