lkarch.org/tools/mathisfun/www.mathsisfun.com/geometry/images/triangle-q.js

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+=`<style>
  .btn { display: inline-block; position: relative; text-align: center; margin: 5px; text-decoration: none; 
    font: 16px Arial, sans-serif; color: #268; border: 1px solid #88aaff; border-radius: 10px; 
    cursor: pointer; background: linear-gradient(to top right, rgba(170,190,255,1) 0%, rgba(255,255,255,1) 100%); 
    outline-style:none;}
  .btn:hover { background: linear-gradient(to top, rgba(255,255,0,1) 0%, rgba(255,255,255,1) 100%); }
  .yy { border: solid 2px #eeeeaa; background: linear-gradient(to top, rgba(255,220,130,1) 0%, rgba(255,255,255,1) 100%);  }
  .hi { border: solid 2px #eeeeaa; background: linear-gradient(to top, rgba(130,220,255,1) 0%, rgba(255,255,255,1) 100%); box-shadow: 2px 2px 6px #66a; }
  .lo { border: solid 1px #888888; background: linear-gradient(to top, rgba(170,170,170,1) 0%, rgba(205,205,205,1) 100%);  }
  </style>`
s+='<div style="position:relative; text-align: center; border-radius: 10px; width:'+w+'px; height:300px; margin:auto; display:block; border: none; box-shadow: inset 0px 0px 5px 0px darkslateblue;">';s+='<canvas id="canvasId" width="'+w+'" height="'+h+'" style=""></canvas>';s+='<div id="bg" style="position:absolute; left:0; top:'+(qTp-10)+'px; width:100%; height:60px; z-index:-2;  background-color: palegoldenrod; font: bold 20px Verdana; text-align: center; padding: 10px 0 10px 0; opacity:0; transition: 0.05s all;"></div>';s+=`<img id="tick" src="${my.imgHome}style/tick.png" style="position:absolute; left: ${w/2+130}px; top: ${qTp+12}px; z-index:-2; opacity:0;transition: 0.1s all;">`
s+='<div id="success" style="font: 40px Verdana; position: absolute; left: 40px; top:'+(qTp+90)+'px; width: 300px;  background-color: lightyellow; color: goldenrod; border-radius: 10px; transition: all 0.5s; opacity: 0; padding: 10px 20px; box-shadow: 2px 2px 2px 0px rgba(255,255,0,0.75); text-align: left; z-index: 10;">';s+='Well Done!';s+='<button id="another" class="btn" style="position: absolute; right: 5px; bottom: 5px; outline-style:none; " onclick="go()">Another</button>';s+='</div>';switch(my.mode){case 'hyp':s+='<div id="hypCalc" style="position: absolute; left: 5px; top:'+(qTp+10)+'px; font: 18px Verdana; visibility: hidden; background-color: #def; padding: 10px;">';s+='Hypotenuse = &radic;( ';s+='<input type="text" name="adj" value="" id="adj" style="width:50px; text-align: center;font: 18px Verdana; " oninput="calcHyp()"  />';s+='<sup>2</sup> + ';s+='<input type="text" name="opp" value="" id="opp" style="width:50px; text-align: center;font: 18px Verdana; " oninput="calcHyp()" />';s+='<sup>2</sup>)';s+='<br>';s+='<div id="hyp" style="display: inline-block;"></div>';s+='</div>';break;case 'sin':case 'cos':case 'tan':case 'csc':case 'cot':case 'sec':s+='<div id="ratCalc" style="position: absolute; left: 90px; top:'+(qTp+10)+'px; font: 18px Verdana; visibility: hidden; width:240px; height: 80px; background-color: #def;">';s+='<div id="ratName" style="position: absolute; left: 5px; top: 25px; text-align: left; width:auto;">sin &theta; = </div>';s+='<input type="text" name="top" value="" id="top" style="position: absolute; left: 85px; top: 5px; width:50px; text-align: center;font: 18px Verdana; " oninput="calcRat()"  />';s+='<div style="position: absolute; left: 85px; top: 38px; width:55px; border-top: 2px solid black;"></div>';s+='<input type="text" name="bot" value="" id="bot" style="position: absolute; left: 85px; top: 45px; width:50px; text-align: center;font: 18px Verdana; " oninput="calcRat()" />';s+='<div id="rat" style="position: absolute; left: 155px; top: 25px;"> = ?</div>';s+='</div>';break;default:}
s+='<div style="font: 11px Arial; color: lightblue; position:absolute; left:120px; bottom:3px;">&copy; 2019 MathsIsFun.com  v'+version+'</div>';s+='</div>';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+' &theta; = ';document.getElementById('rat').innerHTML=' ';break;}}
function calcHyp(){var adj=document.getElementById('adj').value<<0;var opp=document.getElementById('opp').value<<0;var s='';s+='= &radic;('+adj+'<sup>2</sup> + '+opp+'<sup>2</sup>)';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.x<ptMin.x)ptMin.x=pt.x;if(pt.y<ptMin.y)ptMin.y=pt.y;if(pt.x>ptMax.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<pts.length;i++){if(i==0){g.moveTo(midX+radius*pts[i][0],midY+radius*pts[i][1]);}else{g.lineTo(midX+radius*pts[i][0],midY+radius*pts[i][1]);}}
g.stroke();};