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 square 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) createOddShape({ width: WIDTH, height: HEIGHT })

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(SHAPE.sides, function(side) { path([side.start, side.end], {stroke: BLUE}); });
SHAPE.area square plural(UNIT_TEXT)

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

SHAPE.labelSquares();

Count the number of squares covered.

The area is SHAPE.area square plural(UNIT_TEXT).