Permalink
Fetching contributors…
Cannot retrieve contributors at this time
115 lines (101 sloc) 4.77 KB
<!DOCTYPE html>
<html data-require="math graphie math-format">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Distance formula</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars" data-ensure="Y1 !== Y2">
<var id="X1">randRangeExclude( -8, 10, [0, 1, 2] )</var>
<var id="X2">randRangeExclude( -10, 8, [-1, -2, -3, -4] )</var>
<var id="Y1">randRangeExclude( -8, 8, [-1, 0] )</var>
<var id="Y2">randRangeExclude( -8, 8, [-1, 0] )</var>
<var id="X_DIST">abs( X2 - X1 )</var>
<var id="Y_DIST">abs( Y2 - Y1 )</var>
<var id="HYP2">X_DIST * X_DIST + Y_DIST * Y_DIST</var>
</div>
<div class="problems">
<div>
<p class="question">
Find the distance between the points
<code>\blue{(<var>X1</var>, <var>Y1</var>)}</code> and
<code>\green{(<var>X2</var>, <var>Y2</var>)}</code>.
</p>
<p class="render-answer-area-here"></p>
<div class="graphie" id="graph">
graphInit({
range: 11,
scale: 20,
tickStep: 1,
labelStep: 1,
unityLabels: false,
labelFormat: function( s ) { return "\\small{" + s + "}"; },
axisArrows: "&lt;-&gt;"
});
label([ X1, Y1 ], "(" + X1 + ", " + Y1 + ")", "left", { color: BLUE } );
label([ X2, Y2 ], "(" + X2 + ", " + Y2 + ")", "right", { color: GREEN } );
circle([ X1, Y1 ], 3 / 20, { stroke: "none", fill: BLUE } );
circle([ X2, Y2 ], 3 / 20, { stroke: "none", fill: GREEN } );
</div>
<div class="solution" data-type="radical" data-simplify="optional"><var>HYP2</var></div>
</div>
</div>
<div class="hints">
<div>
<p>Change in <code>\red{x} =
<span data-if="X2 - X1 > 0">\green{<var>X2</var>} - \blue{<var>negParens(X1)</var>}</span>
<span data-else="">\blue{<var>X1</var>} - \green{<var>negParens(X2)</var>}</span>
= \red{<var>X_DIST</var>}</code>
</p>
<div class="graphie" data-if="X2 - X1 !== 0" data-update="graph">
style({
color: RED,
stroke: RED
}, function() {
line( [ X1, Y1 ], [ X2, Y1 ] );
label( [ ( X1 + X2 ) / 2, Y1 ], X_DIST, "above" );
});
</div>
</div>
<div>
<p>
Change in <code>\purple{y} =
<span data-if="Y2 - Y1 > 0">\green{<var>Y2</var>} - \blue{<var>negParens(Y1)</var>}</span>
<span data-else="">\blue{<var>Y1</var>} - \green{<var>negParens(Y2)</var>}</span>
= \purple{<var>Y_DIST</var>}</code>
</p>
<div class="graphie" data-if="Y2-Y1 !== 0" data-update="graph">
style({
color: PURPLE,
stroke: PURPLE
}, function() {
line( [ X2, Y1 ], [ X2, Y2 ] );
label( [ X2, ( Y1 + Y2 ) / 2 ], Y_DIST, "left" );
});
</div>
</div>
<div data-if="Y2 - Y1 !== 0 && X1 - X2 !== 0">
<p>The distance is the <span class="hint_pink">length of the hypotenuse</span> of this right triangle.</p>
<div class="graphie" data-update="graph">
style({
stroke: PINK
}, function() {
line( [ X1, Y1 ], [ X2, Y2 ] );
});
</div>
</div>
<div data-if="Y2 - Y1 !== 0 && X1 - X2 !== 0 ">
<p>By the Pythagorean Theorem, <span class="hint_pink">that length</span> is equal to:</p>
<p><code>\sqrt{<var>X_DIST</var>^2 + <var>Y_DIST</var>^2}</code></p>
<p><code>= \sqrt{<var>X_DIST * X_DIST + Y_DIST * Y_DIST</var>}</code></p>
<p class="hint_pink" data-if="squareRootCanSimplify(HYP2)"><code>= <var>formattedSquareRootOf(HYP2)</var></code></p>
</div>
<div data-else="">
<p>The distance is equal to the length of the side, which is <var>X_DIST + Y_DIST</var></p>
</div>
</div>
</div>
</body>
</html>