Permalink
Fetching contributors…
Cannot retrieve contributors at this time
224 lines (215 sloc) 13.8 KB
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers graphie-geometry math-format interactive triangle-congruence kline">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Congruency postulates</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</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] ) &gt; 10 ) &amp;&amp;
( abs( ANGLES[1] - ANGLES[2] ) &gt; 10 ) &amp;&amp;
( abs( ANGLES[0] - ANGLES[2] ) &gt; 10 ) &amp;&amp;
( ( TYPE !== 'SSA' ) || ( (TRIANGLE.niceSideLengths[0] + 1) &lt; TRIANGLE.niceSideLengths[1] &amp;&amp; abs(ANGLES[0] - 90) &gt; 10 ) )">
<var id="TYPE">randFromArray([ "SSS", "SAS", "SAA", "ASA", "SSA", "SSA", "AAA" ])</var>
<var id="NAME">{
"SSS": i18n._("Side-Side-Side"),
"SAS": i18n._("Side-Angle-Side"),
"SAA": i18n._("Side-Angle-Angle"),
"ASA": i18n._("Angle-Side-Angle"),
"SSA": i18n._("Side-Side-Angle"),
"AAA": i18n._("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>
</p>
<p class="render-answer-area-here"></p>
<p>
Answer the question by clicking and dragging the points
below to see how many different triangles you can
construct. 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="congruent-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( [ kline.midpoint( TRIANGLE.sides[ 2 ] ), TRIANGLE.points[2], TRIANGLE.points[1], TRIANGLE.points[0], kline.midpoint( TRIANGLE.sides[ 2 ] ) ] );
addTriangleDecorations( TRIANGLE, TYPE );
</div>
</div>
<div class="solution" data-type="custom">
<div class="instruction">
<ul>
<li><label><input name="solution" type="radio" value="Yes"><span class="value">
Yes &mdash; 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 name="solution" type="radio" value="No"><span class="value">
No &mdash; 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 ] ) &lt; 0.001
&amp;&amp; abs( getDistance( guess[2], guess[3] ) - TRIANGLE.sideLengths[ 1 ] ) &lt; 0.001
&amp;&amp; abs( getDistance( guess[3], guess[4] ) - TRIANGLE.sideLengths[ 2 ] ) &lt; 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 i18n._("Your answer is almost correct, but you haven't constructed a triangle.");
} else if ( ANSWER === "No" &amp;&amp; isCongruent ) {
return i18n._("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:
</p><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( [ kline.midpoint( triangle.sides[ 2 ] ), triangle.points[2], triangle.points[1], triangle.points[0], kline.midpoint( triangle.sides[ 2 ] ) ] );
addTriangleDecorations( triangle, TYPE );
KhanUtil.currentGraph = $( "div#congruent-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( [ kline.midpoint( triangle.sides[ 2 ] ), triangle.points[2], triangle.points[1], triangle.points[0], kline.midpoint( triangle.sides[ 2 ] ) ] );
addTriangleDecorations( triangle, TYPE );
KhanUtil.currentGraph = $( "div#congruent-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):
</p><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( [ kline.midpoint( TRIANGLE.sides[ 2 ] ), TRIANGLE.points[2], TRIANGLE.points[1], TRIANGLE.points[0], kline.midpoint( TRIANGLE.sides[ 2 ] ) ] );
addTriangleDecorations( TRIANGLE, TYPE );
KhanUtil.currentGraph = $( "div#congruent-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( [ kline.midpoint( triangle.sides[ 2 ] ), triangle.points[2], triangle.points[1], triangle.points[0], kline.midpoint( triangle.sides[ 2 ] ) ] );
addTriangleDecorations( triangle, TYPE );
KhanUtil.currentGraph = $( "div#congruent-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>