Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

160 lines (153 sloc) 6.993 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", $._("Both")],
["None", $._("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>
Jump to Line
Something went wrong with that request. Please try again.