lkarch.org/tools/mathisfun/www.mathsisfun.com/numbers/images/dec-pct-frac-line.js

var my={};function decpctfraclineMain(mode){this.version='0.71';this.mode=typeof mode!=='undefined'?mode:'int';w=600;h=350;var s="";s+='<div style="position:relative; width:'+w+'px; min-height:'+h+'px; border: none; border-radius: 20px; background-color: #def; margin:auto; display:block;">';s+='<canvas id="canvasId" style="position: absolute; width:'+w+'px; height:'+h+'px; left: 0; top:; border: none;"></canvas>';s+='<input id="clearBtn" onclick="clearMarks()" type="button" style="z-index:2; position:absolute; left:5px; bottom:5px;" value="clear"  class="togglebtn" />';s+='<div id="copyrt" style="font: 10px Arial; font-weight: bold; color: #6600cc; position:absolute; right:5px; bottom:3px;">&copy; 2018 MathsIsFun.com  v'+this.version+'</div>';s+='</div>';document.write(s);el=document.getElementById('canvasId');ratio=2;el.width=w*ratio;el.height=h*ratio;el.style.width=w+"px";el.style.height=h+"px";g=el.getContext("2d");g.setTransform(ratio,0,0,ratio,0,0);this.marks=[];document.getElementById('clearBtn').style.visibility='hidden';el.addEventListener("mousemove",onmouseMove,false);el.addEventListener("mousedown",onmouseDown,false);el.addEventListener('touchstart',ontouchstart,false);el.addEventListener('touchmove',ontouchmove,false);my.lineX=30;my.lineWd=540;my.lineMin=-12;my.lineMax=22;my.lineDen=10;my.vals=numLineVals();my.scale=my.lineWd/((my.lineMax-my.lineMin)/my.lineDen);go();}
function go(x){g.clearRect(0,0,el.width,el.height);numLineDraw(my.lineX,50,my.lineWd,x);}
function ontouchstart(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;onmouseDown(evt)}
function ontouchmove(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;onmouseMove(evt);evt.preventDefault();}
function ontouchend(evt){el.addEventListener('touchstart',ontouchstart,false);window.removeEventListener("touchend",ontouchend,false);}
function onmouseDown(evt){var bRect=el.getBoundingClientRect();var mouseX=(evt.clientX-bRect.left)*(el.width/ratio/bRect.width);var mouseY=(evt.clientY-bRect.top)*(el.height/ratio/bRect.height);var m=val2x(mouseX);marks.push(m);document.getElementById('clearBtn').style.visibility='visible';go(0);if(evt.preventDefault){evt.preventDefault();}
else if(evt.returnValue){evt.returnValue=false;}
return false;}
function onmouseMove(evt){var bRect=el.getBoundingClientRect();var mouseX=(evt.clientX-bRect.left)*(el.width/ratio/bRect.width);var mouseY=(evt.clientY-bRect.top)*(el.height/ratio/bRect.height);go(mouseX);}
function numLineVals(){var vals=[];for(var i=my.lineMin;i<=my.lineMax;i++){var v=i/my.lineDen;var pct=Math.round(v*100);var frac={num:i,den:my.lineDen};var simplest={num:i,den:my.lineDen};var gcd=Math.abs(gcdEuclid(i,10));if(gcd>1){simplest.num/=gcd;simplest.den/=gcd;}
vals.push({v:v,pct:pct,frac:frac,simp:simplest});}
my.valmin=vals[0].v;my.valmax=vals[vals.length-1].v;console.log("vals",my.valmin,my.valmax);return vals;}
function numLineDraw(x,y,wd,currX){var zero=val2px(0);console.log("zero",zero);g.strokeStyle='blue';g.lineWidth=2;g.beginPath();g.moveTo(zero,y);g.lineTo(x+wd,y);g.stroke();g.fillStyle='blue';g.drawArrow(x+wd+10,y,20,2,30,15,0);g.fill();g.strokeStyle='red';g.lineWidth=2;g.beginPath();g.moveTo(zero,y);g.lineTo(x,y);g.stroke();g.fillStyle='red';g.drawArrow(x-10,y,20,2,30,15,Math.PI);g.fill();g.textAlign='center';g.lineWidth=1;var edge=50;var vals=my.vals;for(var i=0;i<vals.length;i++){var v=vals[i];if(v.v%1){g.font='17px Arial';}else{g.font='bold 17px Arial';}
if(v.v<0){g.fillStyle='red';}else{if(v.v==0){g.font='22px Arial';g.fillStyle='black';}else{g.fillStyle='blue';}}
var xp=val2px(v.v);if(xp<edge)continue;if(xp>x+wd-10)continue;var yp=y+35;if(i%2)continue;g.fillText(v.v.toString(),xp,yp);g.beginPath();g.moveTo(xp,y-10);g.lineTo(xp,y+15);g.stroke();}
if(currX>0&&currX<w){var limX=Math.max(edge,Math.min(w-edge,currX));g.font='bold 17px Arial';g.fillStyle='orange';g.strokeStyle=g.fillStyle;var n=Math.round(px2val(limX)*my.lineDen)-my.lineMin;var v=vals[n];console.log("n,v",limX,px2val(limX),n,v);xp=val2px(v.v);var bubWd=200;var pt=g.drawSpeechBubble(xp,y,bubWd,200,5,w-5,60);g.textAlign='center';g.fillStyle="orange";g.font="bold 32px Arial";g.fillText(v.v.toString(),pt.x+bubWd/2,pt.y+50);g.fillStyle="white";g.font="bold 32px Arial";g.fillText(v.pct+'%',pt.x+bubWd/2,pt.y+100);g.fillStyle="rgba(0, 0, 50, 0.7)";var barWd=20;g.font="bold 24px Arial";if(v.frac.den==v.simp.den){g.fillText(v.frac.num,pt.x+bubWd/2,pt.y+150);drawLine(pt.x+bubWd/2-barWd,pt.y+155,pt.x+bubWd/2+barWd,pt.y+155);g.fillText(v.frac.den,pt.x+bubWd/2,pt.y+180);}else{var aside=50;g.fillText(v.frac.num,pt.x+bubWd/2-aside,pt.y+150);drawLine(pt.x+bubWd/2-barWd-aside,pt.y+155,pt.x+bubWd/2+barWd-aside,pt.y+155);g.fillText(v.frac.den,pt.x+bubWd/2-aside,pt.y+180);g.fillText('or',pt.x+bubWd/2,pt.y+160);g.fillText(v.simp.num,pt.x+bubWd/2+aside,pt.y+150);drawLine(pt.x+bubWd/2-barWd+aside,pt.y+155,pt.x+bubWd/2+barWd+aside,pt.y+155);g.fillText(v.simp.den,pt.x+bubWd/2+aside,pt.y+180);}}}
function drawLine(x0,y0,x1,y1){g.beginPath();g.lineWidth=2;g.strokeStyle=g.fillStyle;g.moveTo(x0,y0);g.lineTo(x1,y1);g.stroke();}
function px2val(px){return((my.valmax-my.valmin)*((px-my.lineX)/my.lineWd)+my.valmin);}
function val2px(val){return(my.lineWd*(val-my.valmin)/(my.valmax-my.valmin))+my.lineX;}
function gcdEuclid(n,m){if(isNaN(n))return;if(isNaN(m))return;if(n==0)return;if(m==0)return;if(n<m){z=n;n=m;m=z;}
originaln=n;originalm=m;xstep=1;r=1;while(r!=0){q=Math.floor(n/m);r=n-m*q;n=m;m=r;xstep++;}
gcd=n;lcm=originaln*originalm/gcd;return gcd;}
function Point(x,y){this.x=x;this.y=y;}
Point.prototype.set=function(x,y){this.x=x;this.y=y;};CanvasRenderingContext2D.prototype.drawArrow=function(x0,y0,totLen,shaftHt,headLen,headHt,angle,sweep,invertQ){var g=this;var pts=[[0,0],[-headLen,-headHt/2],[-headLen+sweep,-shaftHt/2],[-totLen,-shaftHt/2],[-totLen,shaftHt/2],[-headLen+sweep,shaftHt/2],[-headLen,headHt/2],[0,0]];if(invertQ){pts.push([0,-headHt/2],[-totLen,-headHt/2],[-totLen,headHt/2],[0,headHt/2]);}
for(var i=0;i<pts.length;i++){var cosa=Math.cos(-angle);var sina=Math.sin(-angle);var xPos=pts[i][0]*cosa+pts[i][1]*sina;var yPos=pts[i][0]*sina-pts[i][1]*cosa;if(i==0){g.moveTo(x0+xPos,y0+yPos);}else{g.lineTo(x0+xPos,y0+yPos);}}};CanvasRenderingContext2D.prototype.drawSpeechBubble=function(xp,yp,wd,ht,xMin,xMax,ptrHt){var g=this;g.fillStyle="rgba(230, 200, 50, 0.6)";g.beginPath();g.moveTo(xp,yp);g.lineTo(xp+ptrHt/3,yp+ptrHt-5);g.lineTo(xp-ptrHt/3,yp+ptrHt-5);g.lineTo(xp,yp);var boxX=Math.max(xMin,Math.min(xMax-wd,xp-wd/2));g.roundRect(boxX,yp+ptrHt-5,wd,ht,30);g.closePath();g.fill();return{x:boxX,y:yp+ptrHt-5};};CanvasRenderingContext2D.prototype.roundRect=function(x,y,w,h,r){if(w<2*r)r=w/2;if(h<2*r)r=h/2;this.moveTo(x+r,y);this.arcTo(x+w,y,x+w,y+h,r);this.arcTo(x+w,y+h,x,y+h,r);this.arcTo(x,y+h,x,y,r);this.arcTo(x,y,x+w,y,r);return this;};