Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

215 lines (203 sloc) 8.705 kb
<!DOCTYPE html>
<html data-require="math graphie word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Area of squares and rectangles</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="UNIT,UNIT_TEXT">randFromArray([
["in", "inch"],
["ft", "foot"],
["m", "meter"],
["cm", "centimeter"],
["", "unit"]
])</var>
</div>
<div class="problems">
<div id="square-find-area">
<div class="vars">
<var id="S">randRange(2, 8)</var>
</div>
<p class="question">
One side of a square is <code><var>S</var></code>
<var>plural(UNIT_TEXT, S)</var> long. What is its area?
</p>
<div class="solution" data-type="multiple">
<span class="sol"><var>S * S</var></span> square
<var>plural(UNIT_TEXT)</var>
</div>
<div class="hints">
<div class="graphie" id="area">
init({ range: [[-1, S + 1], [-1, S + 1]], scale: 30});
path([[0, 0], [S, 0], [S, S], [0, S], true],
{ stroke: BLUE, fill: "#eee" });
label([S / 2, S], S + "\\text{ " + UNIT + "}", "above");
label([0, S / 2], S + "\\text{ " + UNIT + "}", "left");
</div>
<p>
The area is the length times the width.
</p>
<div>
<div class="graphie" data-update="area">
_(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]]);
});
});
</div>
<p>
The length is <var>plural(S, UNIT_TEXT)</var> and
the width is <var>plural(S, UNIT_TEXT)</var>, so the
area is <code><var>S</var>\times<var>S</var></code>
square <var>plural(UNIT_TEXT)</var>.
</p>
</div>
<div>
<p><code>
\qquad\text{area} = <var>S</var> \times <var>S</var>
= <var>S * S</var>
</code></p>
<p>
We can also count <var>S * S</var>
square <var>plural(UNIT_TEXT)</var>.
</p>
<div class="graphie" data-update="area">
_(S * S).times(function(n) {
label([n % S + 0.5, S - floor(n / S) - 0.5],
n + 1, "center", false)
.css({ color: GRAY });
});
</div>
</div>
</div>
</div>
<div id="square-find-side">
<div class="vars">
<var id="S">randRange(2, 8)</var>
</div>
<p class="question">
The area of a square is <code><var>S * S</var></code>
square <var>plural(UNIT_TEXT)</var>. How long is each side?
</p>
<div class="solution" data-type="multiple">
<span class="sol"><var>S</var></span>
<var>plural(UNIT_TEXT)</var>
</div>
<div class="hints">
<div>
<div class="graphie" id="square">
init({ range: [[-1, 6], [-1, 6]] });
path([[0, 0], [5, 0], [5, 5], [0, 5], true],
{ stroke: BLUE, fill: "#eee" });
label([2.5, 5], "\\text{? " + UNIT + "}", "above",
{ "color": PINK });
label([0, 2.5], "\\text{? " + UNIT + "}", "left",
{ "color": PINK });
</div>
</div>
<div>
<div class="graphie" data-update="square">
path([[0, 0], [0, 5]],
{ strokeWidth: 4, stroke: PINK });
path([[0, 5], [5, 5]],
{ strokeWidth: 4, stroke: PINK });
</div>
<p>
The area is the length times the width.
</p>
<p><code>\qquad \pink{\text{?}} \times \pink{\text{?}} =
<var>S * S</var>\text{ <var>UNIT</var>}
</code></p>
</div>
<div>
<p><code>\qquad \pink{<var>S</var>} + \pink{<var>S</var>} =
<var>S * S</var>\text{ <var>UNIT</var>}
</code></p>
<p>
The sides of a square are all the same length, so each
side must be <code><var>S</var></code>
<var>plural(UNIT_TEXT, S)</var> long.
</p>
</div>
</div>
</div>
<div id="rectangle">
<div class="vars" data-ensure="L !== W">
<var id="L">randRange(2, 9)</var>
<var id="W">randRange(2, 9)</var>
</div>
<p class="question">
A rectangle is
<code><var>L</var></code> <var>plural(UNIT_TEXT, L)</var>
long and
<code><var>W</var></code> <var>plural(UNIT_TEXT, W)</var>
wide. What is its area?
</p>
<div class="solution" data-type="multiple">
<span class="sol"><var>L * W</var></span> square
<var>plural(UNIT_TEXT)</var>
</div>
<div class="hints">
<div class="graphie" id="area">
init({ range: [[-1, L + 1], [-1, W + 1]], scale: 30 });
path([[0, 0], [L, 0], [L, W], [0, W], true],
{ stroke: BLUE, fill: "#eee" });
label([L / 2, W], L + "\\text{ " + UNIT + "}", "above");
label([L, W / 2], W + "\\text{ " + UNIT + "}", "right");
</div>
<p>
The area is the length times the width.
</p>
<div>
<div class="graphie" data-update="area">
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]]);
});
});
</div>
<p>
The length is <var>plural(L, UNIT_TEXT)</var> and
the width is <var>plural(W, UNIT_TEXT)</var>, so the
area is <code><var>L</var>\times<var>W</var></code>
square <var>plural(UNIT_TEXT)</var>.
</p>
</div>
<div>
<p><code>
\qquad\text{area} = <var>L</var> \times <var>W</var>
= <var>L * W</var>
</code></p>
<p>
We can also count <var>L * W</var>
square <var>plural(UNIT_TEXT)</var>.
</p>
<div class="graphie" data-update="area">
_(L * W).times(function(n) {
label([n % L + 0.5, W - floor(n / L) - 0.5],
n + 1, "center", false)
.css({ color: GRAY });
});
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.