# Khan/khan-exercises

Add new exercise: areas of trapezoids, rhombi, and kites. Also teensy…

… style change to area of parallelograms.
osnr committed Jul 6, 2012
1 parent a46a295 commit b41affcf17bac9f976bb472b956eb7db6ba2252c
 @@ -19,11 +19,11 @@ return { drawBase: function() { - base = graph.path([[0, 0], [B, 0]], { "stroke": KhanUtil.ORANGE }); + base = graph.path([[0, 0], [B, 0]], { stroke: KhanUtil.ORANGE }); baseL = graph.label([B/2, 0], "\\color{" + KhanUtil.ORANGE + "}{b = " + B + "\\text{ " + UNIT + "}}", "below"); }, drawHeight: function() { - height = graph.path([[B, 0], [B, H]], { "stroke": KhanUtil.BLUE, "stroke-dasharray": "." }); + height = graph.path([[B, 0], [B, H]], { stroke: KhanUtil.BLUE, strokeDasharray: "." }); heightL = graph.label([B, H/2], "\\color{" + KhanUtil.BLUE + "}{h = " + H + "\\text{ " + UNIT + "}}", "right"); }, drawArea: function() {
 @@ -0,0 +1,257 @@ + + + + + Areas of trapezoids, rhombi, and kites + + + +
+
+ randFromArray([ + ["in", "inch"], + ["ft", "foot"], + ["m", "meter"], + ["cm", "centimeter"], + ["", "unit"] + ]) +
+ +
+
+
+ randRange(2, 8) + randRange(2, 8) + randRange(1, 6) + + randRangeNonZero(-2, 2) + + 1/2 * (B1 + B2) * H +
+ +
What is the area of this figure?
+ +
+ init({ + range: [[-4, max(B1, B2) + 4], [-1, H + 1]], + scale: [30, 30] + }); + + var v = [[0, 0], [B1, 0], [B2 + SH, H], [SH, H], [0, 0]]; + + style({ stroke: BLUE, fill: "#eee"}, + function() { + path(v); + + label([B1/2, 0], B1 + "\\text{ " + UNIT + "}", "below"); + label([B2/2 + SH, H], B2 + "\\text{ " + UNIT + "}", "above"); + + path([[B1, 0], [B1, H]], H, { strokeDasharray: "." }); + label([B1, H/2], H + "\\text{ " + UNIT + "}", "right"); + + parallel([[0, 0], [B1, 0]], 1); + parallel([[SH, H], [B2 + SH, H]], 1); + }); + + rightAngleBox([[0, 0], [B1, 0]], [[B1, 0], [B1, H]], { stroke: GRAY, opacity: 0.5 }); +
+ +
+ K + square plural(UNIT_TEXT) +
+ +
+

This figure is a quadrilateral with a pair of parallel sides (the top and bottom sides), so it's a trapezoid.

+
+

+ area of a trapezoid = \dfrac12 \cdot (b_1 + b_2) \cdot h + [Show me why] +

+
+

Let's draw a line between the opposite ends of the two bases.

+
+ 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(); +
+

Notice that the line divides the trapezoid into two triangles: one triangle with base b_1 = B1, and another triangle with base b_2 = B2. Both triangles have height h = H.

+

The area of the trapezoid is equal to the sum of the areas of the two trapezoids.

+

A = \dfrac12 \cdot b_1 \cdot h + \dfrac12 \cdot b_2 \cdot h

+

Factor out \dfrac12 \cdot h to get the formula for the area of a trapezoid:

+

A = \dfrac12 \cdot h \cdot (b_1 + b_2) = \dfrac12 \cdot (b_1 + b_2) \cdot h

+
+
+
+

Now use this formula to calculate the trapezoid's area.

+

b_1 = B1

+

b_2 = B2

+

h = H

+

A = \dfrac12 \cdot (B1 + B2) \cdot H = K

+
+
+
+ +
+
+ randRange(1, 7) * 2 + randRange(1, 7) * 2 + + randFromArray(["v", "h"]) + rand(3) !== 0 ? randRange(1, 5) : D1/2 + + 1/2 * D1 * D2 + + SH === D1/2 +
+ +
What is the area of this figure?
+ +
+ var range, v; + var drawCongruencies, drawD1, drawD2; + if (ORIENT === "h") { + range = [[-1, D1 + 2], [-D2/2 - 1, D2/2 + 1]]; + v = [[0, 0], [SH, D2/2], [D1, 0], [SH, -D2/2], [0, 0]]; + + drawCongruencies = function(style) { + congruent([[0, 0], [SH, D2/2]], 1, style); + congruent([[0, 0], [SH, -D2/2]], 1, style); + + congruent([[SH, D2/2], [D1, 0]], RHOMBUS ? 1 : 2, style); + congruent([[SH, -D2/2], [D1, 0]], RHOMBUS ? 1 : 2, style); + }; + drawD1 = function(style) { + return { + label: label([D1/2, 0], D1 + "\\text{ " + UNIT + "}", style), + path: path([[0, 0], [D1, 0]], style) + }; + }; + drawD2 = function(style) { + return { + label: label([D1, 0], D2 + "\\text{ " + UNIT + "}", "right", style), + path: path([[D1, -D2/2], [D1, D2/2]], style) + }; + }; + } else { + range = [[-D2/2 - 1, D2/2 + 1], [-1, D1 + 2]]; + v = [[0, 0], [D2/2, SH], [0, D1], [-D2/2, SH], [0, 0]]; + + drawCongruencies = function(style) { + congruent([[0, 0], [D2/2, SH]], 1); + congruent([[0, 0], [-D2/2, SH]], 1); + + congruent([[D2/2, SH], [0, D1]], RHOMBUS ? 1 : 2); + congruent([[0, D1], [-D2/2, SH]], RHOMBUS ? 1 : 2); + }; + drawD1 = function(style) { + return { + label: label([0, D1/2], D1 + "\\text{ " + UNIT + "}", style), + path: path([[0, 0], [0, D1]], style) + }; + }; + drawD2 = function(style) { + return { + label: label([0, D1], D2 + "\\text{ " + UNIT + "}", "above", style), + path: path([[-D2/2, D1], [D2/2, D1]], style) + }; + }; + } + + init({ range: range, scale: 20 }); + + path(v, { stroke: BLUE, fill: "#eee" }); + drawCongruencies({ stroke: BLUE }); + + style({ stroke: BLUE, strokeDasharray: "." }, function() { + graph.d1 = drawD1(); + graph.d2 = drawD2(); + }); + rightAngleBox(graph.d1.path.graphiePath, graph.d2.path.graphiePath, { stroke: GRAY, opacity: 0.5 }); +
+ +
+ K + square plural(UNIT_TEXT) +
+ +
+
+

This figure is a quadrilateral with perpendicular diagonals and two pairs of congruent, adjacent sides, so it is a kite.

+

In fact, because this shape's sides are all congruent, it is also a rhombus.

+
+
+

+ area of a kite = \dfrac12 \cdot d_1 \cdot d_2 + [Show me why] +

+
+

The horizontalvertical diagonal in the center splits the kite into two congruent triangles.

+
+ var showSubHint = function() { + graph.subhint.show(); + + $("a[data-subhint='area-kite']") + .unbind("click", showSubHint) + .click(hideSubHint); + }; + + var hideSubHint = function() { + graph.subhint.hide(); + +$("a[data-subhint='area-kite']") + .unbind("click", hideSubHint) + .click(showSubHint); + }; + + if (ORIENT === "h") { + graph.subhint = raphael.set().push( + path([[0, 0], [SH, D2/2], [D1, 0], [0, 0]], { fill: ORANGE, opacity: 0.5 }), + path([[0, 0], [SH, -D2/2], [D1, 0], [0, 0]], { fill: GREEN, opacity: 0.5 }) + ); + } else { + graph.subhint = raphael.set().push( + path([[0, 0], [D2/2, SH], [0, D1], [0, 0]], { fill: ORANGE, opacity: 0.5 }), + path([[0, 0], [-D2/2, SH], [0, D1], [0, 0]], { fill: GREEN, opacity: 0.5 }) + ); + } + hideSubHint(); +
+

Let d_1 = D1, the diagonal that bisects the kite. Then let d_2 = D2.

+

Notice that d_1 is the base of both triangles, and d_2 is the combined height of the two triangles, so \dfrac{d_2}{2} is the height of each triangle.

+

So the area of each triangle is:

+

A_T = \dfrac12 \cdot b \cdot h = \dfrac12 \cdot d_1 \cdot \dfrac{d_2}{2} = \dfrac14 \cdot d_1 \cdot d_2

+

The area of both triangles combined, 2A_T, is the total area of the kite:

+

2A_T = 2(\dfrac14 \cdot d_1 \cdot d_2) = \dfrac12 \cdot d_1 \cdot d_2 = A

+
+
+
+

Now use this formula to calculate the kite's area.

+

d_1 = D1

+

d_2 = D2

+

A = \dfrac12 \cdot D1 \cdot D2 = K

+
+
+
+
+
+ +