Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
182 lines (149 sloc) 7.91 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 data-main="../local-only/main.js" src="../local-only/require.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() {
var pointsArray = [["A", "B", "C"], ["D", "E", "F"], ["F", "G", "H"], ["J", "K", "L"], ["P", "Q", "R"], ["X", "Y", "Z"]];
var index = KhanUtil.randRangeUnique(0, pointsArray.length - 1, 2);
return [pointsArray[index[0]], pointsArray[index[1]]];
}
</script>
</head>
<body>
<div class="exercise">
<div class="vars">
<div data-ensure="A_POINTS.indexOf(X.toUpperCase()) === -1 && B_POINTS.indexOf(X.toUpperCase()) === -1">
<var id="X">randVar()</var>
<var id="A_POINTS, B_POINTS">pickLabels()</var>
</div>
<var id="A_NAME">A_POINTS.join("")</var>
<var id="B_NAME">B_POINTS.join("")</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>
</div>
<p class="question">Solve for <code><var>X</var></code>.</p>
<div class="render-answer-area-here"></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> =</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{\red{<var>B_LABELS[SOLUTION_INDEX]</var>}}{\blue{<var>A_SIDES[SOLUTION_INDEX]</var>}} = \dfrac{\red{<var>B_LABELS[PROP_INDEX]</var>}}{\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{\red{side}}{\blue{side}}</code> proportion is equivalent, you could use the other sides (i.e., <code>\dfrac{\red{<var>B_LABELS[SOLUTION_INDEX]</var>}}{\blue{<var>A_SIDES[SOLUTION_INDEX]</var>}} = \dfrac{\red{<var>B_LABELS[ALTERNATE_INDEX]</var>}}{\blue{<var>A_SIDES[ALTERNATE_INDEX]</var>}}</code>)</p>
</div>
<div>
<p>Reduce the proportion on the right hand side.</p>
<p><code>\dfrac{\red{<var>B_LABELS[SOLUTION_INDEX]</var>}}{\blue{<var>A_SIDES[SOLUTION_INDEX]</var>}} = \cancel{\dfrac{\red{<var>B_LABELS[PROP_INDEX]</var>}}{\blue{<var>A_SIDES[PROP_INDEX]</var>}}}{\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{\red{<var>B_LABELS[SOLUTION_INDEX]</var>}}{\cancel{\blue{<var>A_SIDES[SOLUTION_INDEX]</var>}}} = \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>\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.