Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

212 lines (200 sloc) 9.182 kB
<!DOCTYPE html>
<html data-require="math graphie word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Area problems</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="square-find-area">
<div class="vars">
<var id="S">randRange(2, 8)</var>
<var id="AREA">$._("area")</var>
</div>
<p class="question">
One side of a square is <code><var>S</var></code>
<var>plural_form(UNIT_TEXT, S)</var> long. What is its area?
</p>
<div class="solution" data-type="multiple">
<span class="sol" data-forms="integer"><var>S * S</var></span> square
<var>plural_form(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 <code><var>S</var></code> <var>plural_form(UNIT_TEXT, S)</var> and
the width is <code><var>S</var></code> <var>plural_form(UNIT_TEXT, S)</var>, so the
area is <code><var>S</var>\times<var>S</var></code>
square <var>plural_form(UNIT_TEXT, S * S)</var>.
</p>
</div>
<div>
<p><code>
\qquad\text{<var>AREA</var>} = <var>S</var> \times <var>S</var>
= <var>S * S</var>
</code></p>
<p>
We can also count <code><var>S * S</var></code>
square <var>plural_form(UNIT_TEXT, S * S)</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_form(UNIT_TEXT, S * S)</var>. How long is each side?
</p>
<div class="solution" data-type="multiple">
<span class="sol" data-forms="integer"><var>S</var></span>
<var>plural_form(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" });
// I18N: This is something like ? cm
label([2.5, 5], "\\text{" + $._("? %(UNIT)s", {UNIT: UNIT}) + "}", "above",
{ "color": PINK });
// I18N: This is something like ? cm
label([0, 2.5], "\\text{" + $._("? %(UNIT)s", {UNIT: 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>} \times
\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_form(UNIT_TEXT, S)</var> long.
</p>
</div>
</div>
</div>
<div id="rectangle">
<div class="vars">
<var id="W">randRange(2, 8)</var>
<var id="L">randRange(W + 1, 9)</var>
<var id="AREA">$._("area")</var>
</div>
<p class="question">
A rectangle is <code><var>L</var></code> <var>plural_form(UNIT_TEXT, L)</var> long
and <code><var>W</var></code> <var>plural_form(UNIT_TEXT, W)</var> wide.
What is its area?
</p>
<div class="solution" data-type="multiple">
<span class="sol" data-forms="integer"><var>L * W</var></span> square
<var>plural_form(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 <code><var>L</var></code> <var>plural_form(UNIT_TEXT, L)</var>.
The width is <code><var>W</var></code> <var>plural_form(UNIT_TEXT, W)</var>.
So the area is <code><var>L</var>\times<var>W</var></code>
square <var>plural_form(UNIT_TEXT, L * W)</var>.
</p>
</div>
<div>
<p><code>
\qquad\text{<var>AREA</var>} = <var>L</var> \times <var>W</var>
= <var>L * W</var>
</code></p>
<p>
We can also count <code><var>L * W</var></code>
square <var>plural_form(UNIT_TEXT, L * W)</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.