This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
congruency_postulates.html
221 lines (213 loc) · 13.5 KB
/
congruency_postulates.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers graphie-geometry math-format interactive triangle-congruence">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Congruency Postulates</title>
<script src="../khan-exercise.js"></script>
<style>
div#triangles {
outline-color: #999;
outline-style: dashed;
outline-width: 1px;
}
</style>
</head>
<body>
<div class="exercise">
<div class="problems">
<div>
<!--
All angles should be at least 10 degrees different from each other so the
effect of rotating and reflecting is more apparent. For SSA, the second
side must be longer than first and first angle must not be close to 90 to
ensure the resulting shape can make two visually distinct triangles
-->
<div class="vars" data-ensure="
( abs( ANGLES[0] - ANGLES[1] ) > 10 ) &&
( abs( ANGLES[1] - ANGLES[2] ) > 10 ) &&
( abs( ANGLES[0] - ANGLES[2] ) > 10 ) &&
( ( TYPE !== 'SSA' ) || ( (TRIANGLE.niceSideLengths[0] + 1) < TRIANGLE.niceSideLengths[1] && abs(ANGLES[0] - 90) > 10 ) )">
<var id="TYPE">randFromArray([ "SSS", "SAS", "SAA", "ASA", "SSA", "SSA", "AAA" ])</var>
<var id="NAME">{
"SSS": "Side-Side-Side",
"SAS": "Side-Angle-Side",
"SAA": "Side-Angle-Angle",
"ASA": "Angle-Side-Angle",
"SSA": "Side-Side-Angle",
"AAA": "Angle-Angle-Angle"
}[ TYPE ]
</var>
<var id="ANGLES">randomTriangleAngles.triangle()</var>
<var id="SCALE">5 + random() * 2</var>
<var id="REFLECTED">randRange( 0, 1 ) === 1 ? true : false</var>
<var id="ANSWER">{ "SSS": "Yes", "SAS": "Yes", "SAA": "Yes", "ASA": "Yes", "SSA": "No", "AAA": "No" }[ TYPE ]</var>
<var id="TRIANGLE">new Triangle( [ 0, 0 ], ANGLES, SCALE, {} )</var>
<var id="ROTATION">randRange( 0, 360 )</var>
</div>
<p class="problem">
<strong>Is <em><var>NAME</var></em> a triangle congruency postulate?</strong><br />
Answer the question by clicking and dragging the points below to see how many different triangles you can construct.<br />
If you can only construct congruent triangles, then the <var>NAME</var> postulate is true. The <var>NAME</var> postulate is not true if you can construct two or more different triangles using the given information.
</p>
<div class="question">
<em>Your triangle can be anywhere. There is no need to line up the two triangles.</em>
<div class="graphie" id="triangles">
init({
range: [ [ -6.2, 6.2 ], [ -5.9, 6.5 ] ]
});
addMouseLayer();
initCongruence({ triangle: TRIANGLE, type: TYPE, reflected: REFLECTED });
TRIANGLE.rotate( ROTATION );
style({ stroke: "#b1c9f5", "stroke-width": 5 });
TRIANGLE.translate([
-5 - Math.min(TRIANGLE.points[0][0], TRIANGLE.points[1][0], TRIANGLE.points[2][0]),
6 - Math.max(TRIANGLE.points[0][1], TRIANGLE.points[1][1], TRIANGLE.points[2][1])
]);
path( [ lineMidpoint( TRIANGLE.sides[ 2 ] ), TRIANGLE.points[2], TRIANGLE.points[1], TRIANGLE.points[0], lineMidpoint( TRIANGLE.sides[ 2 ] ) ] );
addTriangleDecorations( TRIANGLE, TYPE );
</div>
</div>
<div class="solution" data-type="custom">
<div class="instruction">
<ul>
<li><label><input type="radio" name="solution" value="Yes"><span class="value">
Yes — And I've constructed a congruent triangle, and this is the <strong>ONLY</strong> triangle I can construct with these conditions.
</span></label></li>
<li><label><input type="radio" name="solution" value="No"><span class="value">
No — And I've proven it by constructing an incongruent triangle (a counterexample).
</span></label></li>
</ul>
</div>
<div class="guess">[
$( "#solutionarea" ).find( "input:checked" ).val(),
interactiveTriangle.points[0].coord,
interactiveTriangle.points[1].coord,
interactiveTriangle.points[2].coord,
interactiveTriangle.points[3].coord
]</div>
<div class="validator-function">
var saved = $.map( new Array( 4 ), function( el, n ) {
return [ interactiveTriangle.points[ n ].coord ];
});
$.map( guess.slice( 1 ), function( el, n ) {
interactiveTriangle.points[ n ].setCoord( el );
});
interactiveTriangle.update();
var isTriangle = interactiveTriangle.isTriangle;
var isCongruent = abs( getDistance( guess[1], guess[2] ) - TRIANGLE.sideLengths[ 0 ] ) < 0.001
&& abs( getDistance( guess[2], guess[3] ) - TRIANGLE.sideLengths[ 1 ] ) < 0.001
&& abs( getDistance( guess[3], guess[4] ) - TRIANGLE.sideLengths[ 2 ] ) < 0.001;
$.map( saved, function( el, n ) {
interactiveTriangle.points[ n ].setCoord( el );
});
interactiveTriangle.update();
if ( guess[0] == null ) {
return "";
} else if ( guess[0] !== ANSWER ) {
return false;
} else if ( !isTriangle ) {
return "Your answer is almost correct, but you haven't constructed a triangle.";
} else if ( ANSWER === "No" && isCongruent ) {
return "Your answer is almost correct, but the two triangles are congruent. Prove your answer by trying to construct an incongruent triangle.";
} else {
return true;
}
</div>
<div class="show-guess">
$.map( guess.slice( 1 ), function( el, n ) {
interactiveTriangle.points[ n ].setCoord( el );
});
interactiveTriangle.update();
</div>
<div class="show-guess-solutionarea">
$( "#solutionarea" ).find( "input:checked" ).prop( 'checked', false );
if ( guess[0] != null ) {
$( "#solutionarea" ).find( "input[value=" + guess[0] + "]" ).prop( 'checked', true );
}
</div>
</div>
<div class="hints">
<p>
To be a congruency postulate, there must be one, <em>and only one</em>, way to make a triangle
that's the same as the original triangle—except for being moved, rotated, or reflected.
</p>
<p data-if="ANSWER === 'Yes'">
With the constraints of <var>NAME</var>, there is exactly one way to make a triangle.
</p>
<p data-if="ANSWER === 'Yes'">
<strong><var>NAME</var> is a congruency postulate.</strong> Be sure to construct the congruent triangle and think
about why you're only able to construct the triangle in one way.
</p>
<p data-if="TYPE === 'SSA'">
With the constraints of <var>NAME</var>, there is more than one way to construct a triangle. See if you can find both ways.
</p>
<div data-if="TYPE === 'SSA'">
<p>Both of these triangles have the same adjacent Side, Side, and Angle, but they are not congruent:
<div class="graphie">
var triangle = new Triangle( [ 0, 0 ], ANGLES, SCALE, {} );
triangle.rotate( -ANGLES[1] );
init({ range: triangle.boundingRange( 0.4 ) });
addMouseLayer();
style({ stroke: "#b1c9f5", "stroke-width": 5 });
path( [ lineMidpoint( triangle.sides[ 2 ] ), triangle.points[2], triangle.points[1], triangle.points[0], lineMidpoint( triangle.sides[ 2 ] ) ] );
addTriangleDecorations( triangle, TYPE );
KhanUtil.currentGraph = $( "div#triangles" ).data().graphie
</div>
<div class="graphie">
var points = [
[
TRIANGLE.sideLengths[ 1 ] - cos( ( 180 - ( 180 - ANGLES[ 0 ] ) - ANGLES[ 2 ] ) * PI / 180 ) * TRIANGLE.sideLengths[ 0 ],
-sin( ( 180 - ( 180 - ANGLES[ 0 ] ) - ANGLES[ 2 ] ) * PI / 180 ) * TRIANGLE.sideLengths[ 0 ]
],
[ TRIANGLE.sideLengths[ 1 ], 0 ],
[ 0, 0 ]
];
var triangle = new Triangle( [], [], 0, {}, points );
init({ range: triangle.boundingRange( 0.4 ) });
addMouseLayer();
style({ stroke: "#b1c9f5", "stroke-width": 5 });
path( [ lineMidpoint( triangle.sides[ 2 ] ), triangle.points[2], triangle.points[1], triangle.points[0], lineMidpoint( triangle.sides[ 2 ] ) ] );
addTriangleDecorations( triangle, TYPE );
KhanUtil.currentGraph = $( "div#triangles" ).data().graphie
</div>
</div>
<p data-if="TYPE === 'SSA'">
Because we can create two triangles that are not congruent, we can show by counterexample that
<strong>Side-Side-Angle is not a congruency postulate.</strong> Be sure to construct the incongruent triangle above to prove it.
</p>
<p data-if="TYPE === 'AAA'">
With the constraints of <var>NAME</var>, there is more than one way to construct a triangle. See if you can find some different ways.
</p>
<div data-if="TYPE === 'AAA'">
<p>Both of these triangles have the same three angles, but they are not congruent (just similar):
<div class="graphie" style="float: left">
style({ stroke: "#b1c9f5", "stroke-width": 5 });
init({ range: TRIANGLE.boundingRange( 0.4 ) });
addMouseLayer();
style({ stroke: "#b1c9f5", "stroke-width": 5 });
path( [ lineMidpoint( TRIANGLE.sides[ 2 ] ), TRIANGLE.points[2], TRIANGLE.points[1], TRIANGLE.points[0], lineMidpoint( TRIANGLE.sides[ 2 ] ) ] );
addTriangleDecorations( TRIANGLE, TYPE );
KhanUtil.currentGraph = $( "div#triangles" ).data().graphie
</div>
<div class="graphie" style="float: left">
var triangle = new Triangle( [ 0, 0 ], ANGLES, SCALE - 4, {} );
triangle.rotate( ROTATION );
style({ stroke: "#b1c9f5", "stroke-width": 5 });
init({ range: triangle.boundingRange( 0.4 ) });
addMouseLayer();
style({ stroke: "#b1c9f5", "stroke-width": 5 });
path( [ lineMidpoint( triangle.sides[ 2 ] ), triangle.points[2], triangle.points[1], triangle.points[0], lineMidpoint( triangle.sides[ 2 ] ) ] );
addTriangleDecorations( triangle, TYPE );
KhanUtil.currentGraph = $( "div#triangles" ).data().graphie
</div>
</div>
<p data-if="TYPE === 'AAA'" style="clear: left">
Because we can create triangles that are not congruent, we can show by counterexample that
<strong>Angle-Angle-Angle is not a congruency postulate.</strong> Be sure to construct an incongruent triangle above to prove it.
</p>
</div>
</div>
</div>
</div>
</body>
</html>