Permalink
Fetching contributors…
Cannot retrieve contributors at this time
160 lines (151 sloc) 8.13 KB
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers math-format graphie-geometry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Triangle inequality theorem</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script>
function randomTriangleWithSides(){
var a = KhanUtil.randRange( 25, 150 );
var b = KhanUtil.randRange( 25, 180 - a );
if ( a + b > 170 ){
a = Math.max( 30, a - 15 );
b = Math.max( 30, b - 15 );
}
var c = 180 - a - b;
var sa = KhanUtil.randRange( 4, 8 );
var sb = sa * Math.sin( b * Math.PI / 180 ) / Math.sin( a * Math.PI / 180 );
var sc = sa * Math.sin( c * Math.PI / 180 ) / Math.sin( a * Math.PI / 180 );
return [ [ a, b, c] , [ sa, sb, sc ] ];
}
</script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="MAIN">randomTriangleWithSides()</var>
<var id="HIDDEN">rand(3)</var>
<var id="KNOWN">(function() {
var known = MAIN[1].slice();
known.splice(HIDDEN, 1);
return _.map(known, function(v) { return roundTo(1, v); });
})()</var>
<var id="KNOWN_DISPLAY">_.map(KNOWN, function(v) { return localeToFixed(v, 1); })</var>
<var id="MAX">roundTo(1, KNOWN[0] + KNOWN[1])</var>
<var id="MAX_DISPLAY">localeToFixed(MAX, 1)</var>
<var id="MIN">roundTo(1, abs(KNOWN[0] - KNOWN[1]))</var>
<var id="MIN_DISPLAY">localeToFixed(MIN, 1)</var>
</div>
<div class="problems">
<div id="range">
<div class="problem">
What is the range of possible sizes for side <code>x</code>?
</div>
<div class="render-answer-area-here"></div>
<div class="question">
<div class="graphie">
init({
range: [ [ -1, 10 ], [ -7.5, 1 ] ]
});
var positionMap = {0: 2, 1: 0, 2: 1};
var sides = _.times(3, function(i) {
if (positionMap[i] === HIDDEN) {
return "x";
} else {
return localeToFixed(MAIN[1][positionMap[i]], 1);
}
});
var tr = new Triangle(
[ 3, -6.5 ],
MAIN[ 0 ],
5,
{ "sides" : sides } );
tr.boxOut( [ [ [ -1, -10 ], [ -1, 10 ] ] ], [ 1, 0 ] );
tr.boxOut( [ [ [ 10, -10 ], [ 10, 10 ] ] ], [ -1, 0 ] );
tr.draw();
tr.drawLabels();
</div>
</div>
<div class="solution" data-type="multiple">
<p><span class="sol short40" data-forms="integer, decimal"><var>MIN</var></span> <code>&lt; x &lt;</code> <span class="sol short40" data-forms="integer, decimal"><var>MAX</var></span></p>
</div>
<div class="hints">
<p>The triangle inequality theorem states that any side of a triangle is always shorter than the sum of the other two sides.</p>
<p>Therefore the third side must be less than <code><var>KNOWN_DISPLAY[ 0 ]</var> + <var>KNOWN_DISPLAY[ 1 ]</var> = <var>MAX_DISPLAY</var></code></p>
<p>By the same theorem, the third side must be also larger than the difference between the other two sides.</p>
<p>Therefore the third side must be larger than <code><var>KNOWN[0] &lt; KNOWN[1] ? KNOWN_DISPLAY[1] : KNOWN_DISPLAY[0]</var> - <var>KNOWN[0] &lt; KNOWN[1] ? KNOWN_DISPLAY[0] : KNOWN_DISPLAY[1]</var> = <var>MIN_DISPLAY</var></code></p>
<p>So <code><var>MIN_DISPLAY</var> &lt; x &lt; <var>MAX_DISPLAY</var></code></p>
</div>
</div>
<div id="possible">
<div class="vars">
<var id="POSSIBLE">randRange( 0, 1 ) === 0</var>
<var id="SIDE">randRange(0, 2)</var>
<var id="FAKE_SIDE">MAIN[1][(SIDE + 1) % 3] + MAIN[1][(SIDE + 2) % 3] + randRange(1, 3)</var>
<var id="FAKE_SIDES">_.map((function() {
if (POSSIBLE) {
return MAIN[1];
} else {
var m = MAIN[1].slice();
m.splice(SIDE, 1, FAKE_SIDE);
return m;
}
})(), function(v) { return roundTo(1, v); })</var>
<var id="FAKE_SIDES_DISPLAY">_.map(FAKE_SIDES, function(v) { return localeToFixed(v, 1); })</var>
<var id="ANSWERS">[i18n._("Yes"), i18n._("No")]</var>
<var id="SETS">[
[FAKE_SIDES_DISPLAY[0], FAKE_SIDES_DISPLAY[1], FAKE_SIDES_DISPLAY[2],
localeToFixed(FAKE_SIDES[1] + FAKE_SIDES[2], 1),
FAKE_SIDES[0] &lt; FAKE_SIDES[1] + FAKE_SIDES[2]],
[FAKE_SIDES_DISPLAY[1], FAKE_SIDES_DISPLAY[0], FAKE_SIDES_DISPLAY[2],
localeToFixed(FAKE_SIDES[0] + FAKE_SIDES[2], 1),
FAKE_SIDES[1] &lt; FAKE_SIDES[0] + FAKE_SIDES[2]],
[FAKE_SIDES_DISPLAY[2], FAKE_SIDES_DISPLAY[0], FAKE_SIDES_DISPLAY[1],
localeToFixed(FAKE_SIDES[0] + FAKE_SIDES[1], 1),
FAKE_SIDES[2] &lt; FAKE_SIDES[0] + FAKE_SIDES[1]]
]</var>
</div>
<div class="problem">
Can this triangle exist?
</div>
<div class="render-answer-area-here"></div>
<div class="question">
<div class="graphie">
init({
range: [ [-1, 10 ], [ -7.5, 1 ] ]
})
var tr = new Triangle(
[ 3, -6.9 ],
MAIN[ 0 ], 5,
{ "sides" : [ FAKE_SIDES_DISPLAY[ 2 ], FAKE_SIDES_DISPLAY[ 0 ], FAKE_SIDES_DISPLAY[ 1 ] ] } );
tr.boxOut( [ [ [ -1, -10 ], [ -1, 10 ] ] ], [ 1, 0 ] );
tr.boxOut( [ [ [ 10, -10 ], [ 10, 10 ] ] ], [ -1, 0 ] );
tr.draw();
tr.drawLabels();
</div>
</div>
<div class="solution"><var>ANSWERS[POSSIBLE ? 0 : 1]</var></div>
<ul class="choices" data-category="true">
<li data-each="ANSWERS as ANS">
<var>ANS</var>
</li>
</ul>
<div class="hints">
<p>Triangle inequality theorem states that a side must be smaller than the sum of the other two sides.</p>
<p>Let's check for all three sides:</p>
<div data-each="SETS as SET">
<p><code><var>SET[1]</var> + <var>SET[2]</var> = <var>SET[3]</var></code></p>
<p data-if="SET[4]">
<code><var>SET[0]</var></code> is smaller than <code><var>SET[3]</var></code> so the theorem holds.
</p><p data-else>
<code><var>SET[0]</var></code> is not smaller than <code><var>SET[3]</var></code> so the theorem does not hold.
</p>
</div>
<p data-if="POSSIBLE">All three sides conform to the inequality theorem, so this triangle can exist.</p>
<p data-else="">Not all three sides conform to the inequality theorem, so this triangle cannot exist.</p>
</div>
</div>
</div>
</div>
</body>
</html>