Permalink
Fetching contributors…
Cannot retrieve contributors at this time
110 lines (107 sloc) 5.05 KB
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-geometry graphie-polygon word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angles of a polygon</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="SIDES">randRange( 5, 7 )</var>
</div>
<div class="problems">
<div id="interior">
<div class="vars">
<var id="ANSWER">180 * ( SIDES - 2 )</var>
<var id="CLONE">{}</var>
</div>
<p class="question">What is the sum of this polygon's interior angles?</p>
<div class="render-answer-area-here"></div>
<div class="graphie" id="circle">
init({
range: [ [ -5, 5 ], [ -1, 5 ] ],
scale: [ 40, 40 ]
});
graph.polygon = new Polygon( SIDES );
graph.polygon.draw();
CLONE = graph.polygon.clone();
</div>
<div class="solution" data-type="multiple">
<span class="sol" data-forms="integer"><var>ANSWER</var></span> <code>\Large{^\circ}</code>
</div>
<div class="hints">
<p>There are a couple of ways to approach this problem.</p>
<div>
<p>
Since this polygon has <code><var>SIDES</var></code> sides,
we can draw <code><var>SIDES</var></code> triangles that all meet in the center.
</p>
<div class="graphie" data-update="circle">
graph.polygon.drawRadialDiagonals();
</div>
</div>
<p>We can combine all the triangles' angles, and then we must subtract <code>360^{\circ}</code> because the circle in the middle is extra.</p>
<p>There are <code>180^{\circ}</code> in a triangle.</p>
<p><code>\begin{align*}&amp;<var>SIDES</var> \times 180^{\circ} - 360^{\circ} \\
&amp;= <var>SIDES * 180</var>^{\circ} - 360^{\circ} \\
&amp;= <var>ANSWER</var>^{\circ}\end{align*}</code></p>
<div>
<p>An alternative approach is shown below.</p>
<p>We can use four of the <var>cardinalThrough20( SIDES )</var> sides to make two triangles, as shown in orange.</p>
<div class="graphie" data-id="other">
init({
range: [ [ -5, 5 ], [ -1, 5 ] ]
});
graph.polygon = CLONE;
graph.polygon.draw();
graph.polygon.drawDiagonals( randRange( 0, SIDES - 1 ) );
</div>
</div>
<p data-if="isSingular(SIDES - 4)">
There is one side between the orange triangles, to make one additional triangle.
</p><p data-else="">
There are <code><var>SIDES - 4</var></code> sides between the orange triangles,
to make <code><var>SIDES - 4</var></code> additional triangles.
</p>
<p>
We chopped this polygon into <code><var>SIDES - 2</var></code> triangles,
and each triangle's angles sum to <code>180^{\circ}</code>.
</p>
<div>
<p><code><var>SIDES - 2</var> \times 180^{\circ} = <var>ANSWER</var>^{\circ}</code></p>
<p>The sum of the polygon's interior angles is <code><var>ANSWER</var>^{\circ}</code>.</p>
</div>
</div>
</div>
<div id="exterior">
<p class="question">What is the sum of this polygon's exterior angles?</p>
<div class="render-answer-area-here"></div>
<div class="graphie" id="polygon">
init({
range: [ [ -6, 6 ], [ -2, 7 ] ]
});
graph.polygon = new Polygon( SIDES );
graph.polygon.draw();
</div>
<div class="solution" data-type="multiple">
<span class="sol" data-forms="integer"><var>360</var></span> <code>\Large{^\circ}</code>
</div>
<div class="hints">
<div>
<p>The exterior angles are shown above.</p>
<div class="graphie" data-update="polygon">
graph.polygon.drawExteriorAngles();
</div>
</div>
<div class="graphie" data-update="polygon">
graph.polygon.animateExteriorAngles( randRange( 0, SIDES - 1 ) );
</div>
<p>The exterior angles fit together to form a circle.</p>
<p>Therefore, the sum of the exterior angles is <code>360^{\circ}</code>.</p>
</div>
</div>
</div>
</div>
</body>
</html>