var w,h,g,my={} function triangleqMain(mode='cst'){var version='0.91';my.mode=mode console.log("my.mode",my.mode);my.imgHome=(document.domain=='localhost')?'/mathsisfun/images/':'/images/' my.cstQ=false;my.cstN=0;if(my.mode=='cst'){my.cstQ=true;my.mode='cos';} w=400;h=360;var qTp=190;var s='';s+=`` s+='
';s+='';s+='
';s+=`` s+='
';s+='Well Done!';s+='';s+='
';switch(my.mode){case 'hyp':s+='';break;case 'sin':case 'cos':case 'tan':case 'csc':case 'cot':case 'sec':s+='';break;default:} s+='
© 2019 MathsIsFun.com v'+version+'
';s+='
';document.write(s);var el=document.getElementById('canvasId');var 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);my.tri={adj:0,opp:0,hyp:0} my.pts=[];go();} function go(){g.clearRect(0,0,g.canvas.width,g.canvas.height) document.getElementById('success').style.opacity=0;document.getElementById('tick').style.opacity=0 my.pts=calcTri();if(my.cstQ){my.mode=['sin','cos','tan'][my.cstN];my.cstN=(++my.cstN)%3;} switch(my.mode){case 'hyp':document.getElementById('adj').value='';document.getElementById('adj').focus();document.getElementById('opp').value='';drawTri('hyp');document.getElementById('hyp').innerHTML='';var div=document.getElementById('hypCalc');div.style.visibility='visible';break;case 'sin':case 'cos':case 'tan':case 'csc':case 'cot':case 'sec':document.getElementById('top').value='';document.getElementById('top').focus();document.getElementById('bot').value='';drawTri('rat');document.getElementById('ratCalc').style.visibility='visible';document.getElementById('ratName').innerHTML=my.mode+' θ = ';document.getElementById('rat').innerHTML=' ';break;}} function calcHyp(){var adj=document.getElementById('adj').value<<0;var opp=document.getElementById('opp').value<<0;var s='';s+='= √('+adj+'2 + '+opp+'2)';var yesQ=false;if(adj==my.tri.adj&&opp==my.tri.opp)yesQ=true;if(adj==my.tri.opp&&opp==my.tri.adj)yesQ=true;if(yesQ){doSuccess();drawTri('sides');s+=' = '+my.tri.hyp;} document.getElementById('hyp').innerHTML=s;} function calcRat(){var top=document.getElementById('top').value;var bot=document.getElementById('bot').value;var yesQ=false;switch(my.mode){case 'sin':if(top==my.tri.opp&&bot==my.tri.hyp)yesQ=true;break;case 'cos':if(top==my.tri.adj&&bot==my.tri.hyp)yesQ=true;break;case 'tan':if(top==my.tri.opp&&bot==my.tri.adj)yesQ=true;break;case 'csc':if(top==my.tri.hyp&&bot==my.tri.opp)yesQ=true;break;case 'cot':if(top==my.tri.adj&&bot==my.tri.opp)yesQ=true;break;case 'sec':if(top==my.tri.hyp&&bot==my.tri.adj)yesQ=true;break;default:} if(yesQ){doSuccess();var rat=top/bot;rat=((rat*1000)<<0)/1000;document.getElementById('rat').innerHTML='= '+rat;}} function calcTri(){var ptA,ptB,ptC,area;do{var ptA=new Pt(0,0);var angAB=rand(-0.4,0.4);var lenAB=rand(120,280);var ptB=new Pt(ptA.x+Math.cos(angAB)*lenAB,ptA.y-Math.sin(angAB)*lenAB);var angBC=angAB+Math.PI/2;var lenBC=rand(50,150);var ptC=new Pt(ptB.x+Math.cos(angBC)*lenBC,ptB.y-Math.sin(angBC)*lenBC);var area=lenAB*lenBC/2 console.log("calcTri",lenAB,lenBC,area,ptA.y-ptC.y);}while((ptA.y-ptC.y)>170||area<8000);return[ptA,ptB,ptC];} function drawTri(typ){g.clearRect(0,0,g.canvas.width,g.canvas.height) var ptMid=new Pt(my.pts[2].x,my.pts[2].y);var ptMin=new Pt(my.pts[2].x,my.pts[2].y);var ptMax=new Pt(my.pts[2].x,my.pts[2].y);i=2;while(i--){var pt=my.pts[i];ptMid.x+=pt.x;ptMid.y+=pt.y;if(pt.xptMax.x)ptMax.x=pt.x;if(pt.y>ptMax.y)ptMax.y=pt.y;} ptMid.x/=3;ptMid.y/=3;i=3;while(i--){var pt=my.pts[i];pt.x+=w/2-ptMid.x;pt.y+=20-ptMin.y;} var angAB=Math.PI/2+Math.atan2(my.pts[0].x-my.pts[1].x,my.pts[0].y-my.pts[1].y);var angCA=Math.atan2(my.pts[2].x-my.pts[0].x,my.pts[2].y-my.pts[0].y);var angA=angCA-Math.PI/2-angAB;var d=75-angA*50;g.fillStyle="rgba(200, 200, 255, 0.9)";g.strokeStyle="blue";g.beginPath();g.moveTo(my.pts[0].x,my.pts[0].y);g.arc(my.pts[0].x,my.pts[0].y,d,-angAB,-angCA+Math.PI/2,true);g.closePath();g.fill();g.stroke();var lblPt=new Pt(my.pts[0].x,my.pts[0].y);lblPt.x+=(d+8)*Math.cos(-angAB-angA/2);lblPt.y+=(d+8)*Math.sin(-angAB-angA/2)+5;g.beginPath();g.font="21px Arial";g.fillStyle="blue";g.fillText('\u03B8',lblPt.x,lblPt.y);g.beginPath();g.strokeStyle="grey";g.lineWidth=1;g.drawBox(my.pts[1].x,my.pts[1].y,15,-angAB-Math.PI);g.stroke();g.beginPath();g.fillStyle="rgba(235, 235, 205, 0.2)";g.strokeStyle="orange";g.lineWidth=2;i=3;while(i--){var pt=my.pts[i];if(i==2){g.moveTo(pt.x,pt.y);}else{g.lineTo(pt.x,pt.y);}} g.closePath();g.stroke();g.fill();g.textAlign='center';g.shadowColor='white';g.shadowBlur=9;for(var i=0;i<3;i++){var pt=my.pts[i];var ptNext=my.pts[(i+1)%3];ptMid=new Pt((pt.x+ptNext.x)/2,(pt.y+ptNext.y)/2);g.fillStyle="black";var len=Math.round(dist(ptNext.x-pt.x,ptNext.y-pt.y));if(i==0)my.tri.adj=len;if(i==1)my.tri.opp=len;if(i==2){len=Math.round(Math.sqrt(my.tri.opp*my.tri.opp+my.tri.adj*my.tri.adj));my.tri.hyp=len;if(typ=='hyp')len='?';} g.beginPath();g.font="19px Arial";g.fillText(len,ptMid.x,ptMid.y+10);}} function doSuccess(){document.getElementById('success').style.opacity=1;document.getElementById('tick').style.opacity=1;document.getElementById('another').focus();} function doSuccess2(){document.getElementById('bg').style.opacity=1;document.getElementById('tick').style.opacity=1;setTimeout(function(){document.getElementById('bg').style.opacity=0;},2100);setTimeout(function(){document.getElementById('bg').style.opacity=1;},2200);setTimeout(function(){document.getElementById('bg').style.opacity=0;document.getElementById('tick').style.opacity=0;yesQ=false;go();},2900);} class Pt{constructor(x,y){this.x=x;this.y=y;}} function rand(min,max){return Math.random()*(max-min)+min;} function dist(dx,dy){return(Math.sqrt(dx*dx+dy*dy));} CanvasRenderingContext2D.prototype.drawBox=function(midX,midY,radius,angle){g.beginPath();var pts=[[0,0],[Math.cos(angle),Math.sin(angle)],[Math.cos(angle)+Math.cos(angle+Math.PI/2),Math.sin(angle)+Math.sin(angle+Math.PI/2)],[Math.cos(angle+Math.PI/2),Math.sin(angle+Math.PI/2)],[0,0]];for(var i=0;i