# Khan/khan-exercises

Add area_1 exercise and refactor area_of_squares_and_rectangles to be…

… less algebra-y
1 parent e93f823 commit adb2b13903292cf98493b1cf1763b3db7f611992 beneater committed Jun 14, 2012
Showing with 468 additions and 175 deletions.
1. +309 −0 exercises/area_1.html
2. +159 −175 exercises/area_of_squares_and_rectangles.html
 @@ -0,0 +1,309 @@ + + + + + Area 1 + + + +
+
+ randFromArray([ + ["in", "inch"], + ["ft", "foot"], + ["m", "meter"], + ["cm", "centimeter"], + ["", "unit"] + ]) +
+
+
+
+ randRange(2, 9) +
+ +

+ What is the area of the square? +

+
+
+ init({ range: [[-2, S + 1], [-1, S + 1]], scale: 30 }); + path([[0, 0], [0, S], [S, S], [S, 0], true], + {stroke: BLUE, fill: "#eee"}); + label([S / 2, S], S + "\\text{ " + UNIT + "}", "above"); + label([0, S / 2], S + "\\text{ " + UNIT + "}", "left"); +
+
+ +
+ S * S + square plural(UNIT_TEXT) +
+ +
+

+ The area is the length times the width. +

+
+
+ _(S - 1).times(function(y) { + style({ + stroke: GRAY, + strokeWidth: 1, + strokeDasharray: "-" + }, function() { + path([[0, y + 61 / 60], [S, y + 61 / 60]]); + path([[y + 61 / 60, 0], [y + 61 / 60, S]]); + }); + }); +
+

+ The length is plural(S, UNIT_TEXT) and + the width is plural(S, UNIT_TEXT), so the + area is S\timesS + square plural(UNIT_TEXT). +

+
+
+

+ \qquad\text{area} = S \times S + = S*S +

+

+ We can also count S * S + square plural(UNIT_TEXT). +

+
+ _(S * S).times(function(n) { + label([n % S + 0.5, S - floor(n / S) - 0.5], + n + 1, "center", false) + .css({ color: GRAY }); + }); +
+
+
+
+ +
+
+ randRange(2, 9) + randRange(2, 9) +
+ +

+ What is the area of the rectangle? +

+ +
+
+ init({ range: [[-2, L + 1], [-1, W + 1]], scale: 30 }); + path([[0, 0], [0, W], [L, W], [L, 0], true], + {stroke: BLUE, fill: "#eee"}); + label([L / 2, W], L + "\\text{ " + UNIT + "}", "above"); + label([0, W / 2], W + "\\text{ " + UNIT + "}", "left"); +
+
+ +
+ L * W + plural(UNIT_TEXT) +
+ +
+

+ The area is the length times the width. +

+
+
+ style({ + stroke: GRAY, + strokeWidth: 1, + strokeDasharray: "-" + }, function() { + _(L - 1).times(function(x) { + path([[x + 61 / 60, 0], [x + 61 / 60, W]]); + }); + _(W - 1).times(function(y) { + path([[0, y + 61 / 60], [L, y + 61 / 60]]); + }); + }); +
+

+ The length is plural(L, UNIT_TEXT) and + the width is plural(W, UNIT_TEXT), so the + area is L\timesW + square plural(UNIT_TEXT). +

+
+
+

+ \qquad\text{area} = L \times W + = L * W +

+

+ We can also count L * W + square plural(UNIT_TEXT). +

+
+ _(L * W).times(function(n) { + label([n % L + 0.5, W - floor(n / L) - 0.5], + n + 1, "center", false) + .css({ color: GRAY }); + }); +
+
+
+
+ +
+
+ randRange(5, 10) + randRange(5, 10) + + (function() { + var sides = []; + var squares = []; + + var left = randRange(0, WIDTH - 1); + var right = randRange(left + 1, WIDTH); + + sides.push({ + start: [left, HEIGHT - 1], + end: [right, HEIGHT - 1], + length: right - left, + labelPos: "above" + }); + var leftStart = HEIGHT - 1; + var rightStart = HEIGHT - 1; + + _(right - left).times(function(dx) { + squares.push([HEIGHT - 1, left + dx]); + }); + + _(HEIGHT - 3).times(function(y) { + var prevLeft = left; + var prevRight = right; + left = randRangeWeighted(0, prevRight - 1, + prevLeft, 0.7); + right = randRangeWeighted(max(left, prevLeft) + + 1, WIDTH, prevRight, 0.7); + _(right - left).times(function(dx) { + squares.push([HEIGHT - y - 2, left + dx]); + }); + if (left !== prevLeft) { + sides.push({ + start: [prevLeft, leftStart], + end: [prevLeft, HEIGHT - y - 2], + length: leftStart - (HEIGHT - y - 2), + labelPos: "left" + }); + sides.push({ + start: [prevLeft, HEIGHT - y - 2], + end: [left, HEIGHT - y - 2], + length: abs(left - prevLeft), + labelPos: "center" + }); + leftStart = HEIGHT - y - 2; + } + if (right !== prevRight) { + sides.push({ + start: [prevRight, rightStart], + end: [prevRight, HEIGHT - y - 2], + length: rightStart - (HEIGHT - y - 2), + labelPos: "right" + }); + sides.push({ + start: [prevRight, HEIGHT - y - 2], + end: [right, HEIGHT - y - 2], + length: abs(right - prevRight), + labelPos: "center" + }); + rightStart = HEIGHT - y - 2; + } + }); + + sides.push({ + start: [left, leftStart], + end: [left, 1], + length: leftStart - 1, + labelPos: "left" + }); + sides.push({ + start: [right, rightStart], + end: [right, 1], + length: rightStart - 1, + labelPos: "right" + }); + sides.push({ + start: [left, 1], + end: [right, 1], + length: right - left, + labelPos: "below" + }); + + return [sides, squares]; + })() + + _.reduce(SIDES, function(m, v) { + return m + v.length; + }, 0) + SQUARES.length +
+ +

+ What is the area of the shape? Each square in the grid is a + 1 \times 1 UNIT_TEXT square. +

+ +
+
+ init({ range: [[-1, WIDTH + 1], [-1, HEIGHT + 1]] }); + var shape = []; + + _(WIDTH + 1).times(function(i) { + line([i, 0], [i, HEIGHT], { "stroke-width": 1, + stroke: "#bbb" }); + }); + _(HEIGHT + 1).times(function(i) { + line([0, i], [WIDTH, i], { "stroke-width": 1, + stroke: "#bbb" }); + }); + + + _.each(SIDES, function(side) { + path([side.start, side.end], {stroke: BLUE}); + }); +
+
+ +
+ AREA + square plural(UNIT_TEXT) +
+ +
+

+ The area is the number of 1 \times 1 squares + the shape covers. +

+
+
+ _.each(SQUARES, function(square, n) { + label([square[1] + 0.5, square[0] - 0.5], n + 1, + "center", false); + }); +
+

Count the number of squares covered.

+
+

+ The area is AREA square + plural(UNIT_TEXT). +

+
+
+ +
+
+ +