Permalink
Fetching contributors…
Cannot retrieve contributors at this time
160 lines (153 sloc) 6.83 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>Similar triangles 1</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script>
function randomTriangle( current ){
var a = KhanUtil.randRange( 35, 150 );
var b = KhanUtil.randRange( 35, 180 - a );
if ( a + b > 160 ){
a = Math.max( 30, a - 15 );
b = Math.max( 30, b - 15 );
}
var c = 180 - a - b;
//Make sure we do not create the same triangle
if ( current ){
if ( $.inArray( a, current ) != -1 && $.inArray( b, current ) != -1 ){
return randomTriangle( current );
}
}
if ( a < 30 || b < 30 || c < 30 ){
return randomTriangle( current );
}
return [ a, b, c];
}
</script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="MAIN"> randomTriangle()</var>
<var id="ANSWERS">[
["B", "B"],
["C", "C"],
["Both", i18n._("Both")],
["None", i18n._("None")]
]</var>
<var id="ANSWER,ANSWER_SHOW">randFromArray( ANSWERS )</var>
<var id="B"> ANSWER === "B" || ANSWER === "Both" ? shuffle( MAIN ) : randomTriangle( MAIN )</var>
<var id="C"> ANSWER === "C" || ANSWER === "Both" ? shuffle( MAIN ): randomTriangle( MAIN )</var>
<var id="TR">
function(){
var tr = new Triangle( [ 3, -2 ], MAIN, 5, {} );
tr.labels = { "name" : "A", "angles" : clearArray( tr.niceAngles, [ 0, 2 ] ) };
tr.rotate( randRange( 0, 360 ) );
tr.boxOut( [ [ [ -4, 1.5 ], [ 10, 1.5 ] ] ], [ 0, -0.5 ] );
return tr;
}()
</var>
<var id="TR_A">
function(){
var trA = new Triangle( [ 2, -8 ], B, randRange( 400, 600 )/100, { } );
trA.labels = { "name" : "B", "angles" : clearArray( trA.niceAngles, [ 0, 1 ] ) };
trA.rotate( randRange( 0, 360 ) );
trA.color = "blue";
trA.boxOut( [ [ [ -1, -10 ], [ -1, 20 ] ] ], [ 0.5, 0 ] );
trA.boxOut( TR.sides, [ 0, -1 ] );
return trA;
}()
</var>
<var id="TR_B">
function(){
var trB = new Triangle( [ 7, -6 ], C, randRange( 400, 600 )/100, {} );
trB.labels = { "name" : "C", "angles" : clearArray( trB.niceAngles, [ 0, 2 ] ) };
trB.rotate( randRange( 0, 360 ) );
trB.color = "red";
trB.boxOut( [ [ [ 13, -10 ], [ 13, 20 ] ] ], [ -0.5, 0 ] );
trB.boxOut( TR.sides, [ 0, -1 ] );
trB.boxOut( TR_A.sides, [ 0, -1 ] );
return trB;
}()
</var>
</div>
<div class="problems">
<div id="similar">
<p class="question">
Which triangles are similar to triangle <code>A</code>?
</p>
<div class="render-answer-area-here"></div>
<div class="question">
<div class="graphie" id="triangles">
init({
range: [ [-1, 13 ], [ -14, 2.5 ] ],
scale: 35
})
TR.draw();
TR.drawLabels();
style({
stroke: "blue",
});
TR_A.draw();
TR_A.drawLabels();
style({
stroke: "red",
});
TR_B.draw();
TR_B.drawLabels();
</div>
</div>
<div class="solution"><var>ANSWER_SHOW</var></div>
<ul class="choices" data-category="true">
<li data-each="ANSWERS as ANS">
<var>ANS[1]</var>
</li>
</ul>
<div class="hints">
<p>Two triangles are similar if their angles are congruent (equal).</p>
<div>
<p>We see that triangle <code>A</code> has angles of <code><var>MAIN[ 0 ]</var></code> and <code><var>MAIN[ 2 ]</var></code>. The third angle is therefore <code>180 - <var>MAIN[ 0 ]</var> - <var>MAIN[ 2 ]</var> = <var>MAIN[ 1 ]</var></code></p>
<div class="graphie" data-update="triangles">
TR.labels.angles = TR.niceAngles;
TR.drawLabels();
</div>
</div>
<div>
<p>Triangle <code>B</code> has angles of <code><var>B[ 0 ]</var></code> and <code><var>B[ 1 ]</var></code>. The third angle is <code>180 - <var>B[ 0 ]</var> - <var>B[ 1 ]</var> = <var>B[ 2 ]</var></code>.
<span data-if="ANSWER === 'None' || ANSWER === 'C'">
Therefore triangle <code>B</code> is not similar to triangle <code>A</code>.
</span><span data-else>
Therefore triangle <code>B</code> is similar to triangle <code>A</code>.
</span>
</p>
<div class="graphie" data-update="triangles">
style({
stroke: "blue",
});
TR_A.labels.angles = TR_A.niceAngles;
TR_A.drawLabels();
</div>
</div>
<div>
<p>Triangle <code>C</code> has angles of <code><var>C[ 0 ]</var></code> and <code><var>C[ 2 ]</var></code>. The third angle is <code>180 - <var>C[ 0 ]</var> - <var>C[ 2 ]</var> = <var>C[ 1 ]</var></code>.
<span data-if="ANSWER === 'None' || ANSWER === 'B'">
Therefore triangle <code>C</code> is not similar to triangle <code>A</code>.
</span><span data-else>
Therefore triangle <code>C</code> is similar to triangle <code>A</code>.
</span>
</p>
<div class="graphie" data-update="triangles">
style({
stroke: "red",
});
TR_B.labels.angles = TR_B.niceAngles;
TR_B.drawLabels();
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>