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

183 lines (147 sloc) 8.129 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>Solving Similar Triangles 1</title>
<script src="../khan-exercise.js"></script>
<script>
function triangleAngles( sides ){
var a = sides[0];
var b = sides[1];
var c = sides[2];
var A = Math.acos( (b*b + c*c - a*a) / (2*b*c) ) * 180 / Math.PI;
var B = Math.acos( (a*a + c*c - b*b) / (2*a*c) ) * 180 / Math.PI;
var C = 180 - A - B;
return [A, B, C];
}
function randomSides( scale ) {
var a = KhanUtil.randRange(3, 12);
var b = KhanUtil.randRange(3, 12);
var c = KhanUtil.randRange(Math.max(a, b), a + b - 2);
if (scale) return [scale*a, scale*b, scale*c];
else return [a, b, c];
}
function scaleSides( sides, scale ) {
return [sides[0] * scale, sides[1] * scale, sides[2] * scale];
}
function insertVariable (index, x, sides) {
var labels = [];
for(var i=0;i<=2;i++) {
i === index ? labels[i] = x : labels[i] = sides[i];
}
return labels;
}
function pickLabels (index) {
nameArray = ["ABC", "DEF", "GHI", "JKL", "XYZ"];
pointsArray = [["A", "B", "C"], ["D", "E", "F"], ["G", "H", "I"], ["J", "K", "L"], ["X", "Y", "Z"]];
return [nameArray[index[0]], pointsArray[index[0]], nameArray[index[1]], pointsArray[index[1]]];
}
</script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="LETTERS">"abcdefghijklmnpqrstuvwxyz"</var>
<var id="LETTER">randRange( 0, LETTERS.length - 1 )</var>
<var id="X">LETTERS[ LETTER ]</var>
<var id="POINT_LABELS">randRangeUnique(0, 4, 2)</var>
<var id="A_NAME, A_POINTS, B_NAME, B_POINTS">pickLabels(POINT_LABELS)</var>
<div data-ensure="SCALE_A !== SCALE_B">
<var id="SCALE_A">randRange(1, 5)/2</var>
<var id="SCALE_B">randRange(1, 5)/2</var>
</div>
<var id="BASE_SIDES">randomSides()</var>
<var id="A_SIDES">scaleSides(BASE_SIDES, SCALE_A)</var>
<var id="A_ANGLES">triangleAngles(A_SIDES)</var>
<var id="B_SIDES">scaleSides(BASE_SIDES, SCALE_B)</var>
<var id="B_ANGLES">triangleAngles(B_SIDES)</var>
<var id="SOLUTION_INDEX">randRange(0, 2)</var>
<var id="PROP_INDEX">SOLUTION_INDEX === 2 ? 0 : SOLUTION_INDEX + 1</var>
<var id="ALTERNATE_INDEX">SOLUTION_INDEX === 0 ? 2 : SOLUTION_INDEX - 1</var>
<var id="SOLUTION">B_SIDES[SOLUTION_INDEX]</var>
<var id="B_LABELS">insertVariable(SOLUTION_INDEX, X, B_SIDES)</var>
<var id="REDUCED_NUM_A">fractionReduce(B_SIDES[PROP_INDEX], A_SIDES[PROP_INDEX])</var>
<var id="TR_A">
function(){
var trA = new Triangle( [ 0, -2 ], A_ANGLES, 5*SCALE_A, {} );
trA.labels = {"sides": [A_SIDES[2], A_SIDES[0], A_SIDES[1]], "points" : A_POINTS };
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( [ 8, -6 ], B_ANGLES, 5*SCALE_B, {} );
trB.labels = {"sides": [B_LABELS[2], B_LABELS[0], B_LABELS[1]], "points" : B_POINTS };
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">
<div class="problem">
<p>Triangle <code><var>A_NAME</var></code> is similar to triangle <code><var>B_NAME</var></code>.</p>
<p>Solve for <code><var>X</var></code>.</p>
</div>
<div class="question">
<div class="graphie" id="triangles" >
TR_A.rotate( randRange( 0, 360 ) );
TR_B.rotate( randRange( 0, 360 ) );
var aBounding = TR_A.boundingRange(1);
var bBounding = TR_B.boundingRange(1);
var minX = Math.min(aBounding[0][0], bBounding[0][0]);
var maxX = Math.max(aBounding[0][1], bBounding[0][1]);
var minY = Math.min(aBounding[1][0], bBounding[1][0]);
var maxY = Math.max(aBounding[1][1], bBounding[1][1]);
init({
range: [ [minX, maxX ], [ minY, maxY ] ],
scale: 500 / (maxX - minX)
})
style({
stroke: "blue",
});
TR_A.draw();
TR_A.drawLabels();
style({
stroke: "red",
});
TR_B.draw();
TR_B.drawLabels();
</div>
</div>
<div class="solution" data-type="set">
<div class="set-sol"><var>SOLUTION</var></div>
<div class="input-format">
<p><code><var>X</var> = \quad</code><span class="entry" data-forms="integer, decimal"></span></p>
</div>
</div>
<div class="hints">
<p>Similar triangles have proportional sides.</p>
<p>Therefore, we can set up equivalent proportions and solve for <code><var>X</var></code>.</p>
<div>
<p><code>\dfrac{\color{red}{<var>B_LABELS[SOLUTION_INDEX]</var>}}{\color{blue}{<var>A_SIDES[SOLUTION_INDEX]</var>}} = \dfrac{\color{red}{<var>B_LABELS[PROP_INDEX]</var>}}{\color{blue}{<var>A_SIDES[PROP_INDEX]</var>}}</code></p>
<p data-if="A_SIDES[PROP_INDEX] !== A_SIDES[ALTERNATE_INDEX]">Note: As each corresponding <code>\dfrac{\color{red}{side}}{\color{blue}{side}}</code> proportion is equivalent, you could use the other sides (i.e., <code>\dfrac{\color{red}{<var>B_LABELS[SOLUTION_INDEX]</var>}}{\color{blue}{<var>A_SIDES[SOLUTION_INDEX]</var>}} = \dfrac{\color{red}{<var>B_LABELS[ALTERNATE_INDEX]</var>}}{\color{blue}{<var>A_SIDES[ALTERNATE_INDEX]</var>}}</code>)</p>
</div>
<div>
<p>Reduce the proportion on the right hand side.</p>
<p><code>\dfrac{\color{red}{<var>B_LABELS[SOLUTION_INDEX]</var>}}{\color{blue}{<var>A_SIDES[SOLUTION_INDEX]</var>}} = \cancel{\dfrac{\color{red}{<var>B_LABELS[PROP_INDEX]</var>}}{\color{blue}{<var>A_SIDES[PROP_INDEX]</var>}}}{\color{green}{<var>fractionReduce(B_LABELS[PROP_INDEX], A_SIDES[PROP_INDEX])</var>}}</code></p>
</div>
<div>
<p>Multiply each side by <code><var>A_SIDES[SOLUTION_INDEX]</var></code> and simplify.</p>
<p><code>\cancel{<var>A_SIDES[SOLUTION_INDEX]</var>} \times \dfrac{\color{red}{<var>B_LABELS[SOLUTION_INDEX]</var>}}{\cancel{\color{blue}{<var>A_SIDES[SOLUTION_INDEX]</var>}}} = \color{green}{<var>fractionReduce(B_LABELS[PROP_INDEX], A_SIDES[PROP_INDEX])</var>} \times <var>A_SIDES[SOLUTION_INDEX]</var></code></p>
</div>
<p class="final_answer"><code>\color{red}{<var>X</var>}</code> is equal to <code><var>SOLUTION</var></code>.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.