This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
distance_formula.html
114 lines (101 loc) · 4.77 KB
/
distance_formula.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!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: "<->"
});
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>