Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

126 lines (114 sloc) 6.013 kB
<!DOCTYPE html>
<html data-require="math graphie word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number line 3</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="SCALE">randRange(1, 4)</var>
<var id="MIDPOINT">(SCALE + randRange(1, 10)) * randFromArray([-1, 1])</var>
<var id="LOWER_BOUND">MIDPOINT - 5 * SCALE</var>
<var id="UPPER_BOUND">MIDPOINT + 5 * SCALE</var>
<var id="NUMBER">randFromArray([
MIDPOINT - SCALE * 5, MIDPOINT - SCALE * 4, MIDPOINT - SCALE * 3,
MIDPOINT + SCALE * 3, MIDPOINT + SCALE * 4, MIDPOINT + SCALE * 5
])</var>
<var id="START">LOWER_BOUND - SCALE * 0.6</var>
<var id="STOP">UPPER_BOUND + SCALE * 0.6</var>
</div>
<div class="problems">
<div id="horizontal">
<div class="question">
<p>The blue dot is at what value on the number line?</p>
<div class="render-answer-area-here"></div>
<div class="graphie" id="number-line">
init({
range: [[LOWER_BOUND - SCALE * 0.75, UPPER_BOUND + SCALE * 0.75], [-1, 1]],
scale: [40 / SCALE, 40]
});
line([START + 1, 0], [STOP, 0], { arrows: "-&gt;" });
line([STOP - 1, 0], [START, 0], { arrows: "-&gt;" });
for (var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x += SCALE) {
line([x, -0.2], [x, 0.2 ]);
}
label([MIDPOINT - SCALE, -0.53], ("" + (MIDPOINT - SCALE)).replace(/-/, "\\llap{-}"), "center");
label([MIDPOINT + SCALE, -0.53], ("" + (MIDPOINT + SCALE)).replace(/-/, "\\llap{-}"), "center");
style({ stroke: BLUE, fill: BLUE });
graph.blueDot = ellipse([NUMBER, 0], [SCALE * 0.1, 0.1]);
graph.questionLabel = label([NUMBER, -0.53], "{?}", "center", { color: BLUE });
</div>
</div>
<div class="hints" data-apply="appendContents">
<div>
<p>Label the other tick marks on the number line.</p>
<div class="graphie" data-update="number-line">
for (var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x += SCALE) {
if (x !== MIDPOINT - SCALE &amp;&amp; x !== MIDPOINT + SCALE &amp;&amp; x !== NUMBER) {
label([x, -0.53], ("" + x).replace(/-/, "\\llap{-}"), "center");
}
}
</div>
</div>
<div>
<p>The blue dot represents the number <code><var>NUMBER</var></code>.</p>
<div class="graphie" data-update="number-line">
graph.questionLabel.remove();
label([NUMBER, -0.53], ("" + NUMBER).replace(/-/, "\\llap{-}"), "center", { color: BLUE });
</div>
</div>
</div>
</div>
<div id="vertical">
<div class="question">
<p>The blue dot is at what value on the number line?</p>
<div class="render-answer-area-here"></div>
<div class="graphie" id="number-line">
init({
range: [[-5, 5], [LOWER_BOUND - SCALE * 0.75, UPPER_BOUND + SCALE * 0.75]],
scale: [32, 32 / SCALE]
});
line([0, START + 1], [0, STOP], { arrows: "-&gt;" });
line([0, STOP - 1], [0, START], { arrows: "-&gt;" });
for (var y = LOWER_BOUND; y &lt;= UPPER_BOUND; y += SCALE) {
line([-0.2, y], [0.2, y]);
}
label([-0.2, MIDPOINT - SCALE], ("" + (MIDPOINT - SCALE)).replace(/-/, "\\llap{-}"), "left");
label([-0.2, MIDPOINT + SCALE], ("" + (MIDPOINT + SCALE)).replace(/-/, "\\llap{-}"), "left");
style({ stroke: BLUE, fill: BLUE });
graph.blueDot = ellipse([0, NUMBER], [0.1, 0.1 * SCALE]);
graph.questionLabel = label([-0.2, NUMBER], "{?}", "left", { color: BLUE });
</div>
</div>
<div class="hints" data-apply="appendContents">
<div>
<p>Label the other tick marks on the number line.</p>
<div class="graphie" data-update="number-line">
for (var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x += SCALE) {
if (x !== MIDPOINT - SCALE &amp;&amp; x !== MIDPOINT + SCALE &amp;&amp; x !== NUMBER) {
label([-0.2, x], ("" + x).replace(/-/, "\\llap{-}"), "left");
}
}
</div>
</div>
<div>
<p>The blue dot represents the number <code><var>NUMBER</var></code>.</p>
<div class="graphie" data-update="number-line">
graph.questionLabel.remove();
label([-0.2, NUMBER], ("" + NUMBER).replace(/-/, "\\llap{-}"), "left", { color: BLUE });
</div>
</div>
</div>
</div>
</div>
<div class="solution" data-forms="integer"><var>NUMBER</var></div>
<div class="hints">
<p>Two tick marks are labeled.</p>
<p>The distance between the two labeled tick marks is <code><var>2 * SCALE</var></code>.</p>
<p>Therefore, the space between each pair of tick marks is <code><var>2 * SCALE</var> / 2 = <var>SCALE</var></code></p>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.