Permalink
Fetching contributors…
Cannot retrieve contributors at this time
106 lines (91 sloc) 5.24 KB
<!DOCTYPE html>
<html data-require="math graphie word-problems subhints graphie-geometry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Area of trapezoids</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="UNIT,UNIT_TEXT">randFromArray(metricUnits.concat([genericUnit]))</var>
</div>
<div class="problems">
<div id="trapezoid">
<div class="vars">
<var id="B1">randRange(2, 8)</var>
<var id="B2">randRange(2, 8)</var>
<var id="H">randRange(1, 6)</var>
<var id="SH">randRangeExclude(-2, 2, [0, -B2])</var>
<var id="K">1/2 * (B1 + B2) * H</var>
</div>
<div class="question">What is the area of this figure?</div>
<div class="render-answer-area-here"></div>
<div class="graphie" id="figure">
init({
range: [[-4, max(B1, B2) + 4], [-1, H + 1]],
scale: [30, 30]
});
style({ stroke: BLUE, fill: "#eee"});
path([[0, 0], [B1, 0], [B2 + SH, H], [SH, H], [0, 0]]);
label([B1/2, 0], B1 + "\\text{ " + UNIT + "}", "below");
label([B2/2 + SH, H], B2 + "\\text{ " + UNIT + "}", "above");
var x = min(B1, B2 + SH);
line([x, 0], [x, H], { strokeDasharray: "." });
label([x, H/2], H + "\\text{ " + UNIT + "}", "right");
rightAngleBox([[0, 0], [x, 0]], [[x, 0], [x, H]], { stroke: GRAY, opacity: 0.5 });
parallel([[0, 0], [B1, 0]], 1);
parallel([[SH, H], [B2 + SH, H]], 1);
</div>
<div class="solution" data-type="multiple">
<span class="sol"><var>K</var></span>
square <var>plural_form(UNIT_TEXT)</var>
</div>
<div class="hints">
<p>This figure is a quadrilateral with a pair of parallel sides (the top and bottom sides), so it's a trapezoid.</p>
<div>
<p>
area of a trapezoid <code>= \dfrac12 \cdot (b_1 + b_2) \cdot h</code>
[<a href="#" class="show-subhint" data-subhint="area-trapezoid">Show me why</a>]
</p>
<div class="subhint" id="area-trapezoid">
<p>Let's draw a line between the opposite ends of the two bases.</p>
<div class="graphie" data-update="figure">
var showSubHint = function() {
graph.subhint.show();
$("a[data-subhint='area-trapezoid']")
.unbind("click", showSubHint)
.click(hideSubHint);
};
var hideSubHint = function() {
graph.subhint.hide();
$("a[data-subhint='area-trapezoid']")
.unbind("click", hideSubHint)
.click(showSubHint);
};
graph.subhint = raphael.set().push(
path([[0, 0], [B1, 0], [B2 + SH, H]], { stroke: BLUE, fill: ORANGE, opacity: 0.5 }),
path([[SH, H], [B2 + SH, H], [0, 0]], { stroke: BLUE, fill: RED, opacity: 0.5 })
);
hideSubHint();
</div>
<p>Notice that the line divides the trapezoid into two triangles: one triangle with base <code>b_1 = <var>B1</var></code>, and another triangle with base <code>b_2 = <var>B2</var></code>. Both triangles have height <code>h = <var>H</var></code>.</p>
<p>The area of the trapezoid is equal to the sum of the areas of the two triangles.</p>
<p><code>A = \dfrac12 \cdot b_1 \cdot h + \dfrac12 \cdot b_2 \cdot h</code></p>
<p>Factor out <code>\dfrac12 \cdot h</code> to get the formula for the area of a trapezoid:</p>
<p><code>A = \dfrac12 \cdot h \cdot (b_1 + b_2) = \dfrac12 \cdot (b_1 + b_2) \cdot h</code></p>
</div>
</div>
<div>
<p>Now use this formula to calculate the trapezoid's area.</p>
<p><code>b_1 = <var>B1</var></code></p>
<p><code>b_2 = <var>B2</var></code></p>
<p><code>h = <var>H</var></code></p>
<p><code>A = \dfrac12 \cdot (<var>B1</var> + <var>B2</var>) \cdot <var>H</var> = <var>K</var></code></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>