Permalink
Fetching contributors…
Cannot retrieve contributors at this time
157 lines (147 sloc) 7.36 KB
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers graphie-geometry math-format">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Triangle types</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script>
function scTriangle(){
while( ! a || a === b || a === c || b === c ){
var a = KhanUtil.randRange( 25, 150 );
var b = KhanUtil.randRange( 25, 180 - a );
if ( a + b > 170 ){
a = Math.max( 30, a - 15 );
b = Math.max( 30, b - 15 );
}
var c = 180 - a - b;
}
var sa = KhanUtil.randRange( 4, 8 );
var sb = sa * Math.sin( b * Math.PI / 180 ) / Math.sin( a * Math.PI / 180 );
var sc = sa * Math.sin( c * Math.PI / 180 ) / Math.sin( a * Math.PI / 180 );
if ( Math.abs( a - b ) < 5 || Math.abs( a - c ) < 5 || Math.abs( b - c ) < 5 ){
return scTriangle();
}
return [ [ a, b, c ] , [ KhanUtil.localeToFixed(sa, 1), KhanUtil.localeToFixed(sb, 1), KhanUtil.localeToFixed(sc, 1) ] ];
}
function eqTriangle(){
var a = KhanUtil.randRange( 4, 8 );
return [ [ 60, 60, 60 ], [ a, a, a ] ];
}
function isoTriangle(){
var a = KhanUtil.randRange( 25, 75 );
var c = 180 - 2 * a;
var sa = KhanUtil.randRange( 4, 8 );
var sc = sa * Math.sin( c * Math.PI / 180 ) / Math.sin( a * Math.PI / 180 );
var ang = [ a, a, a ];
var sides = [ sa, sa, sa ];
var oddside = KhanUtil.randRange( 0, 2 );
ang[ oddside ] = c;
sides[ oddside ] = KhanUtil.localeToFixed(sc, 1);
if( a == 60 ){
return isoTriangle();
}
return [ ang , sides ];
}
</script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="TYPES">[ "Equilateral", "Isosceles", "Scalene" ]</var>
<var id="DISPLAY_TYPES">[ i18n._("Equilateral"), i18n._("Isosceles"), i18n._("Scalene") ]</var>
<var id="TYPE_NUM">randRange(0, 2)</var>
<var id="TYPE">TYPES[TYPE_NUM]</var>
<var id="DISPLAY_TYPE">DISPLAY_TYPES[TYPE_NUM]</var>
<var id="TRIANGLE">function(){
if ( TYPE === "Equilateral" ){
return eqTriangle();
}
if ( TYPE === "Isosceles" ){
return isoTriangle();
}
if ( TYPE === "Scalene" ){
return scTriangle();
}
}()
</var>
</div>
<div class="problems">
<div id="knownAngles">
<div class="problem">
Is this triangle equilateral, isosceles, and/or scalene?
</div>
<div class="question">
<div class="graphie" id="typeTr">
var tr = new Triangle( [ 0, 0 ], TRIANGLE[ 0 ], 5, {} );
tr.labels = { "angles" : clearArray( tr.niceAngles, [ 0, 1 ] ) };
tr.rotate( randRange( 0, 90 ) );
init({
range: tr.boundingRange( 1 )
})
tr.draw();
tr.drawLabels();
graph.TR = tr;
</div>
</div>
<div class="solution" data-type="multiple">
<p>Select all that apply.</p>
<p>
<label>
<span class="sol" data-type="checkbox">
<var>TYPE === "Equilateral"</var>
</span>
Equilateral
</label>
</p><p>
<label>
<span class="sol" data-type="checkbox">
<var>TYPE === "Equilateral" || TYPE === "Isosceles"</var>
</span>
Isosceles
</label>
</p><p>
<label>
<span class="sol" data-type="checkbox">
<var>TYPE === "Scalene"</var>
</span>
Scalene
</label>
</p>
</div>
<div class="hints">
<p>We know two angles of this triangle, so we can find the third by subtracting from <code>180</code></p>
<div>
<p><code>180 -<var>TRIANGLE[ 0 ][ 0 ]</var> - <var>TRIANGLE[ 0 ][ 1 ]</var> = <var>TRIANGLE[ 0 ][ 2 ]</var></code></p>
<div class="graphie" data-update="typeTr">
graph.TR.labels = { "angles" : clearArray( graph.TR.niceAngles, [2] ) };
graph.TR.drawLabels();
</div>
</div>
<p data-if="TYPE === 'Scalene'">Because all three angles are different, this triangle is scalene.</p>
<p data-else-if="TYPE === 'Isosceles'">Two angles are the same, therefore two corresponding sides are as well. Therefore, this triangle is isosceles. Isosceles means a triangle with same (iso) legs (sceles).</p>
<p data-else="">All angles equal 60. That means that all the sides are the same and that the triangle is equilateral. (Equilateral means equal(equi) sided(lateral). The triangle is also isosceles because at least two sides are the same length. Isosceles means a triangle with same (iso) legs (sceles).</p>
</div>
</div>
<div id="knownSides" data-type="knownAngles">
<div class="question">
<div class="graphie">
var tr = new Triangle( [ 0, 0 ], TRIANGLE[ 0 ], 5, {} );
tr.labels = { "sides" : tr.niceSideLengths };
tr.rotate( randRange( 0, 90 ) );
init({
range: tr.boundingRange( 1 )
})
tr.draw();
tr.drawLabels();
</div>
</div>
<div class="hints">
<p data-if="TYPE === 'Scalene'">Because all three sides are different, this triangle is scalene.</p>
<p data-else-if="TYPE === 'Isosceles'">Two sides are the same, therefore, this triangle is isosceles. Isosceles means a triangle with same (iso) legs (sceles).</p>
<p data-else="">All sides are the same. That means that all the angles are 60 and that the triangle is equilateral. Equilateral means equal (equi) sided (lateral). The triangle is also isosceles because at least two sides are the same length. Isosceles means a triangle with same (iso) legs (sceles).</p>
</div>
</div>
</div>
</div>
</body>
</html>