Permalink
Fetching contributors…
Cannot retrieve contributors at this time
379 lines (332 sloc) 19.8 KB
<!DOCTYPE html>
<!-- TODO: Improve hints -->
<html data-require="math graphie math-format">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Trigonometry 2</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script>
function fractionSQRoot(b, root){
var natRoot = KhanUtil.splitRadical(root)[0];
var underRoot = KhanUtil.splitRadical(root)[1];
var d = KhanUtil.reduce(natRoot*underRoot, b)[0];
var n = KhanUtil.reduce(natRoot*underRoot,b)[1];
if ( d === 1 ){
if(n != 1){
return n + "\\sqrt{" + underRoot +"}";
}
else{
return "\\sqrt{" +underRoot + "}";
}
}
else if( underRoot != 1 ){
if(n != 1){
return "\\frac{" + n + "\\sqrt{" + underRoot +"} }{"+ d + "}";
}
else{
return "\\frac{ \\sqrt{" +underRoot + "}}{" + d + "}";
}
}
else{
return "\\frac{" + n + "}{" + d + "}";
}
}
function bestTriangle(width, height, A, B, C, a, b, c, whichAngle, keyValues) {
var scale = 5 / Math.sqrt(width * width + height * height);
width *= scale;
height *= scale;
with ( KhanUtil.currentGraph ) {
// Leave some space for the labels
init({ range: [[-1.5, width + 1], [-1, height + 1]] });
path([ [0, 0], [width, 0], [0, height], true ]);
var ang=Math.round(Math.atan(height/width) *(180/Math.PI));
if ( whichAngle === "ACB" || whichAngle === "BCA" ){
arc( [0, 0], 0.5, 0, 90 );
}
else if ( whichAngle === "ABC" || whichAngle === "CBA" ){
arc( [width, 0], 0.5, 180 - ang, 180 );
}
else if ( whichAngle === "CAB" || whichAngle === "BAC" ){
arc( [0, height], 0.5, 270, -ang );
}
label( [0, height], A, "above left" );
label( [0, 0], C, "below left" );
label( [width, 0], B, "below right" );
if( "AB" in keyValues ){
label( [width/2, height/2], keyValues.AB, "above right", {
labelDistance: 3
} );
}
if ( "AC" in keyValues ){
label( [0, height/2],keyValues.AC , "left" );
}
if ( "CA" in keyValues ){
label( [0, height/2],keyValues.CA , "left" );
}
if ( "BC" in keyValues ){
label( [width/2, 0], keyValues.BC, "below" );
}
if ( "CB" in keyValues ){
label( [width/2, 0], keyValues.CB, "below" );
}
}
}
</script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="AC">randRange(3, 10)</var>
<var id="BC">randRange(3, 10)</var>
<var id="CB">BC</var>
<var id="AB">AC * AC + BC * BC</var>
<var id="AB_STRING">formattedSquareRootOf(AC * AC + BC * BC)</var>
<var id="ANGLE">randFromArray([
"ABC",
"BAC"
])</var>
<var id="WRONG_A" data-ensure="WRONG_A !== AC &amp;&amp; WRONG_A !== BC &amp;&amp; WRONG_A !== sqrt(AB)">randRange(1, 10)</var>
<var id="WRONG_B" data-ensure="WRONG_B !== AC &amp;&amp; WRONG_B !== BC &amp;&amp; WRONG_B !== WRONG_A &amp;&amp; WRONG_B !== sqrt(AB)">randRange(1, 10)</var>
<var id="OPPOSITE_NAME">(ANGLE.substring(0,1)+ANGLE.substring(2))</var>
<var id="OPPOSITE_VALUE">
(function(){
if( OPPOSITE_NAME === "AC" ){
return AC;
}
else if( OPPOSITE_NAME === "BC" ){
return CB;
}
return AB_STRING;
})()
</var>
<var id="HYPOTENUSE_NAME">"AB"</var>
<var id="HYPOTENUSE_VALUE">AB_STRING</var>
<var id="ADJACENT_NAME">ANGLE.substring(1)</var>
<var id="ADJACENT_VALUE">
(function(){
if( ADJACENT_NAME === "AC" ){
return AC;
}
else if( ADJACENT_NAME === "BC" ){
return BC;
}
return AB_STRING;
})()
</var>
<var id="SIMPLE_TAN">
fraction( OPPOSITE_VALUE, ADJACENT_VALUE, false, false, false, false)
</var>
<var id="TAN">
fractionReduce( OPPOSITE_VALUE, ADJACENT_VALUE, false, false)
</var>
<var id="SIMPLE_SIN">
"\\frac{" + OPPOSITE_VALUE + "}{" + formattedSquareRootOf(AB) + "}"
</var>
<var id="SIN">
fractionSQRoot( OPPOSITE_VALUE , AB )
</var>
<var id="SIMPLE_COS">
"\\frac{" + ADJACENT_VALUE + "}{" + formattedSquareRootOf(AB) + "}"
</var>
<var id="COS">
fractionSQRoot( ADJACENT_VALUE , AB )
</var>
<var id="OPPOSITE_TEXT">i18n._("opposite")</var>
<var id="HYPOTENUSE_TEXT">i18n._("hypotenuse")</var>
<var id="ADJACENT_TEXT">i18n._("adjacent")</var>
</div>
<div class="problems">
<div id="sin">
<div class="problem">
<p><code>\overline{AB}</code> = <code><var>AB_STRING</var></code></p>
</div>
<div class="question">
<p><code>\overline{<var>OPPOSITE_NAME</var>} = {?}</code></p>
<p class="render-answer-area-here"></p>
<div class="graphie">
var options = {};
options[ OPPOSITE_NAME ] = "?";
options[ "AB" ] = AB_STRING;
bestTriangle( BC, AC, "A", "B", "C", "", "", "", ANGLE, options );
path([ [ 0.4, 0 ], [ 0.4, 0.4 ], [ 0, 0.4 ] ]);
</div>
<p><code>\displaystyle \sin( \angle <var>ANGLE</var> ) = <var>SIN</var> , \cos( \angle <var>ANGLE</var> ) = <var>COS</var> , \tan( \angle <var>ANGLE</var> ) = <var>TAN</var></code></p>
</div>
<div class="solution"><code><var>OPPOSITE_VALUE</var></code></div>
<ul class="choices" data-none="true">
<li><code><var>ADJACENT_VALUE</var></code></li>
<li><code><var>AB_STRING</var></code></li>
<li><code><var>WRONG_A</var></code></li>
<li><code><var>WRONG_B</var></code></li>
</ul>
<div class="hints" data-apply="appendContents">
<p><code>\overline{AB}</code> is the <b>hypotenuse</b></p>
<p><code>\overline{<var>OPPOSITE_NAME</var>}</code> is <b>opposite</b> to <code>\angle <var>ANGLE</var></code></p>
<p>SOH CAH TOA</p>
<p>We know the hypotenuse and need to solve for the opposite side so we can use the sine function (SOH)</p>
<p><code>\displaystyle \sin( \angle <var>ANGLE</var> ) = \frac{\text{<var>OPPOSITE_TEXT</var>}}{\text{<var>HYPOTENUSE_TEXT</var>}} = \frac{\overline{<var>OPPOSITE_NAME</var>}}{\overline{AB}}= \frac{\overline{<var>OPPOSITE_NAME</var>}}{<var>AB_STRING</var>} </code></p>
<p><code>\displaystyle \overline{<var>OPPOSITE_NAME</var>}=<var>AB_STRING</var> \cdot \sin( \angle <var>ANGLE</var> ) = <var>AB_STRING</var> \cdot <var>SIN</var> = <var>OPPOSITE_VALUE</var></code></p>
</div>
</div>
<div id="sin2">
<div class="problem">
<p><code>\overline{<var>OPPOSITE_NAME</var>} = <var>OPPOSITE_VALUE</var></code></p>
</div>
<div class="question">
<p><code>\overline{AB} = {?}</code></p>
<p class="render-answer-area-here"></p>
<div class="graphie">
var options = {};
options[ OPPOSITE_NAME ] = OPPOSITE_VALUE;
options[ "AB" ] = "?";
bestTriangle( BC, AC, "A", "B", "C", "", "", "", ANGLE, options );
path([ [ 0.4, 0 ], [ 0.4, 0.4 ], [ 0, 0.4 ] ]);
</div>
<p><code>\displaystyle \sin( \angle <var>ANGLE</var> ) = <var>SIN</var> , \cos( \angle <var>ANGLE</var> ) = <var>COS</var> , \tan( \angle <var>ANGLE</var> ) = <var>TAN</var></code></p>
</div>
<div class="solution"><code><var>AB_STRING</var></code></div>
<ul class="choices" data-none="true">
<li><code><var>OPPOSITE_VALUE</var></code></li>
<li><code><var>ADJACENT_VALUE</var></code></li>
<li><code><var>WRONG_A</var></code></li>
<li><code><var>WRONG_B</var></code></li>
</ul>
<div class="hints" data-apply="appendContents">
<p><code>\overline{<var>OPPOSITE_NAME</var>}</code> is the <b>opposite</b> to <code>\angle <var>ANGLE</var></code></p>
<p><code>\overline{AB}</code> is the <b>hypotenuse</b> (note that it is opposite the right angle)</p>
<p>SOH CAH TOA</p>
<p>We know the opposite side and need to solve for the hypotenuse so we can use the sin function (SOH)</p>
<p><code>\displaystyle \sin( \angle <var>ANGLE</var> ) = \frac{\text{<var>OPPOSITE_TEXT</var>}}{\text{<var>HYPOTENUSE_TEXT</var>}} = \frac{\overline{<var>OPPOSITE_NAME</var>}}{\overline{AB}} = \frac{<var>OPPOSITE_VALUE</var>}{\overline{AB}} </code></p>
<p><code>\displaystyle \overline{AB}=\frac{<var>OPPOSITE_VALUE</var>}{\sin( \angle <var>ANGLE</var> )} = \frac{<var>OPPOSITE_VALUE</var>}{<var>SIN</var>} = <var>AB_STRING</var></code></p>
</div>
</div>
<div id="cos">
<div class="problem">
<p><code>\overline{AB} = <var>AB_STRING</var></code></p>
</div>
<div class="question">
<p><code>\overline{<var>ADJACENT_NAME</var>} = {?}</code></p>
<p class="render-answer-area-here"></p>
<div class="graphie">
var options = {};
options[ ADJACENT_NAME ] = "?";
options[ "AB" ] = AB_STRING;
bestTriangle( BC, AC, "A", "B", "C", "", "", "", ANGLE, options );
path([ [ 0.4, 0 ], [ 0.4, 0.4 ], [ 0, 0.4 ] ]);
</div>
<p><code>\displaystyle \sin( \angle <var>ANGLE</var> ) = <var>SIN</var> , \cos( \angle <var>ANGLE</var> ) = <var>COS</var> , \tan( \angle <var>ANGLE</var> ) = <var>TAN</var></code></p>
</div>
<div class="solution"><code><var>ADJACENT_VALUE</var></code></div>
<ul class="choices" data-none="true">
<li><code><var>OPPOSITE_VALUE</var></code></li>
<li><code><var>AB_STRING</var></code></li>
<li><code><var>WRONG_A</var></code></li>
<li><code><var>WRONG_B</var></code></li>
</ul>
<div class="hints" data-apply="appendContents">
<p><code>\overline{AB}</code> is the <b>hypotenuse</b></p>
<p><code>\overline{<var>ADJACENT_NAME</var>}</code> is <b>adjacent</b> to <code>\angle <var>ANGLE</var></code></p>
<p>SOH CAH TOA</p>
<p>We know the hypotenuse and need to solve for the adjacent side so we can use the cos function (CAH)</p>
<p><code>\displaystyle \cos( \angle <var>ANGLE</var> ) = \frac{\text{<var>ADJACENT_TEXT</var>}}{\text{<var>HYPOTENUSE_TEXT</var>}} = \frac{\overline{<var>ADJACENT_NAME</var>}}{\overline{AB}}= \frac{\overline{<var>ADJACENT_NAME</var>}}{<var>AB_STRING</var>} </code></p>
<p><code>\displaystyle \overline{<var>ADJACENT_NAME</var>}=<var>AB_STRING</var> \cdot \cos( \angle <var>ANGLE</var> ) = <var>AB_STRING</var> \cdot <var>COS</var> = <var>ADJACENT_VALUE</var></code></p>
</div>
</div>
<div id="cos2">
<div class="problem">
<p><code>\overline{<var>ADJACENT_NAME</var>}=<var>ADJACENT_VALUE</var></code></p>
</div>
<div class="question">
<p><code>\overline{AB} = {?}</code></p>
<p class="render-answer-area-here"></p>
<div class="graphie">
var options = {};
options[ ADJACENT_NAME ] = ADJACENT_VALUE;
options[ "AB" ] = "?";
bestTriangle( BC, AC, "A", "B", "C", "", "","", ANGLE, options );
path([ [ 0.4, 0 ], [ 0.4, 0.4 ], [ 0, 0.4 ] ]);
</div>
<p><code>\displaystyle \sin( \angle <var>ANGLE</var> ) = <var>SIN</var> , \cos( \angle <var>ANGLE</var> ) = <var>COS</var> , \tan( \angle <var>ANGLE</var> ) = <var>TAN</var></code></p>
</div>
<div class="solution"><code><var>AB_STRING</var></code></div>
<ul class="choices" data-none="true">
<li><code><var>OPPOSITE_VALUE</var></code></li>
<li><code><var>ADJACENT_VALUE</var></code></li>
<li><code><var>WRONG_A</var></code></li>
<li><code><var>WRONG_B</var></code></li>
</ul>
<div class="hints" data-apply="appendContents">
<p><code>\overline{<var>ADJACENT_NAME</var>}</code> is <b>adjacent</b> to <code>\angle <var>ANGLE</var></code></p>
<p><code>\overline{AB}</code> is the <b>hypotenuse</b> (note that it is opposite the right angle)</p>
<p>SOH CAH TOA</p>
<p>We know the adjacent side and need to solve for the hypotenuse so we can use the cos function (CAH)</p>
<p><code>\displaystyle \cos( \angle <var>ANGLE</var> ) = \frac{\text{<var>ADJACENT_TEXT</var>}}{\text{<var>HYPOTENUSE_TEXT</var>}} = \frac{\overline{<var>ADJACENT_NAME</var>}}{\overline{AB}} = \frac{<var>ADJACENT_VALUE</var>}{\overline{AB}} </code></p>
<p><code>\displaystyle \overline{AB}=\frac{<var>ADJACENT_VALUE</var>}{\cos( \angle <var>ANGLE</var> )} = \frac{<var>ADJACENT_VALUE</var>}{<var>COS</var>} = <var>AB_STRING</var></code></p>
</div>
</div>
<div id="tan">
<div class="problem">
<p><code>\overline{<var>OPPOSITE_NAME</var>} = <var>OPPOSITE_VALUE</var></code></p>
</div>
<div class="question">
<p><code>\overline{<var>ADJACENT_NAME</var>} = {?}</code></p>
<p class="render-answer-area-here"></p>
<div class="graphie">
var options = {};
options[ ADJACENT_NAME ] = "?";
options[ OPPOSITE_NAME ] = OPPOSITE_VALUE;
bestTriangle( BC, AC, "A", "B", "C", "", "", "" , ANGLE, options );
path([ [ 0.4, 0 ], [ 0.4, 0.4 ], [ 0, 0.4 ] ]);
</div>
<p><code>\displaystyle \sin( \angle <var>ANGLE</var> ) = <var>SIN</var> , \cos( \angle <var>ANGLE</var> ) = <var>COS</var> , \tan( \angle <var>ANGLE</var> ) = <var>TAN</var></code></p>
</div>
<div class="solution"><code><var>ADJACENT_VALUE</var></code></div>
<ul class="choices" data-none="true">
<li><code><var>AB_STRING</var></code></li>
<li><code><var>WRONG_A</var></code></li>
<li><code><var>WRONG_B</var></code></li>
</ul>
<div class="hints" data-apply="appendContents">
<p><code>\overline{<var>OPPOSITE_NAME</var>}</code> is the <b>opposite</b> to <code>\angle <var>ANGLE</var></code></p>
<p><code>\overline{<var>ADJACENT_NAME</var>}</code> is <b>adjacent</b> to <code>\angle <var>ANGLE</var></code></p>
<p>SOH CAH TOA</p>
<p>We know the opposite side and need to solve for the adjacent side so we can use the tan function (TOA)</p>
<p><code>\displaystyle \tan( \angle <var>ANGLE</var> ) = \frac{\text{<var>OPPOSITE_TEXT</var>}}{\text{<var>ADJACENT_TEXT</var>}} = \frac{\overline{<var>OPPOSITE_NAME</var>}}{\overline{<var>ADJACENT_NAME</var>}}= \frac{<var>OPPOSITE_VALUE</var>}{\overline{<var>ADJACENT_NAME</var>}} </code></p>
<p><code>\displaystyle \overline{<var>ADJACENT_NAME</var>}=\frac{<var>OPPOSITE_VALUE</var>}{\tan( \angle <var>ANGLE</var> )} = \frac{<var>OPPOSITE_VALUE</var>}{<var>TAN</var>} = <var>ADJACENT_VALUE</var></code></p>
</div>
</div>
<div id="tan2">
<div class="problem">
<p><code>\overline{<var>ADJACENT_NAME</var>} = <var>ADJACENT_VALUE</var></code></p>
</div>
<div class="question">
<p><code>\overline{<var>OPPOSITE_NAME</var>} = {?}</code></p>
<p class="render-answer-area-here"></p>
<div class="graphie">
var options = {};
options[ OPPOSITE_NAME ] = "?";
options[ ADJACENT_NAME ] = ADJACENT_VALUE;
bestTriangle( BC, AC, "A", "B", "C", "", "", "", ANGLE, options );
path([ [ 0.4, 0 ], [ 0.4, 0.4 ], [ 0, 0.4 ] ]);
</div>
<p><code>\displaystyle \sin( \angle <var>ANGLE</var> ) = <var>SIN</var> , \cos( \angle <var>ANGLE</var> ) = <var>COS</var> , \tan( \angle <var>ANGLE</var> ) = <var>TAN</var></code></p>
</div>
<div class="solution"><code><var>OPPOSITE_VALUE</var></code></div>
<ul class="choices" data-none="true">
<li><code><var>AB_STRING</var></code></li>
<li><code><var>WRONG_A</var></code></li>
<li><code><var>WRONG_B</var></code></li>
</ul>
<div class="hints" data-apply="appendContents">
<p><code>\overline{<var>OPPOSITE_NAME</var>}</code> is the <b>opposite</b> to <code>\angle <var>ANGLE</var></code></p>
<p><code>\overline{<var>ADJACENT_NAME</var>}</code> is <b>adjacent</b> to <code>\angle <var>ANGLE</var></code></p>
<p>SOH CAH TOA</p>
<p>We know the adjacent side and need to solve for the opposite side so we can use the tan function (TOA)</p>
<p><code>\displaystyle \tan( \angle <var>ANGLE</var> ) = \frac{\text{<var>OPPOSITE_TEXT</var>}}{\text{<var>ADJACENT_TEXT</var>}} = \frac{\overline{<var>OPPOSITE_NAME</var>}}{\overline{<var>ADJACENT_NAME</var>}}= \frac{\overline{<var>OPPOSITE_NAME</var>}}{<var>ADJACENT_VALUE</var>} </code></p>
<p><code>\displaystyle \overline{<var>OPPOSITE_NAME</var>}=<var>ADJACENT_VALUE</var> \cdot \tan( \angle <var>ANGLE</var> ) = <var>ADJACENT_VALUE</var> \cdot <var>TAN</var> = <var>OPPOSITE_VALUE</var></code></p>
</div>
</div>
</div>
</div>
</body>
</html>