Skip to content
Newer
Older
100644 287 lines (261 sloc) 14.2 KB
937bb47 @marcia Move the hard number line exercise over to number line 2
marcia authored
1 <!DOCTYPE html>
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored
2 <html data-require="math graphie word-problems interactive">
3 <head>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
bc61129 @spicyj Update title tags
spicyj authored
5 <title>Negative numbers on the number line</title>
ac1415e @spicyj Use requirejs for module loading
spicyj authored
6 <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
937bb47 @marcia Move the hard number line exercise over to number line 2
marcia authored
7 </head>
8 <body>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
9 <div class="exercise">
10 <div class="vars">
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
11 <var id="SCALE">randRange(1, 4)</var>
12 <var id="LOWER_BOUND">-5 * SCALE</var>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
13 <var id="UPPER_BOUND">-1 * LOWER_BOUND</var>
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
14 <var id="NUMBER">randRangeExclude(-5, 5, [-1, 0, 1]) * SCALE</var>
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
15 <var id="START">LOWER_BOUND - SCALE * 0.6</var>
16 <var id="STOP">UPPER_BOUND + SCALE * 0.6</var>
bd4e680 @csilvers Change from $._ and $.ngettext over to i18n._ and i18n.ngettext.
csilvers authored
17 <var id="ORANGE_DOT">i18n._("orange dot")</var>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
18 </div>
19 <div class="problems">
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
20 <div id="where-is-point-horizontal">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
21 <div class="question">
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
22 <p>
23 Move the <strong><code>\orange{\text{<var>ORANGE_DOT</var>}}</code></strong> to
24 <strong><code>\orange{<var>NUMBER</var>}</code></strong> on the number line.
25 </p>
26
d53a57c @jeresig Two doctypes were being output. Only output one.
jeresig authored
27 <div class="graphie" id="number-line">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
28 init({
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
29 range: [[LOWER_BOUND - SCALE * 0.75, UPPER_BOUND + SCALE * 0.75], [-1, 1]],
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
30 scale: [40 / SCALE, 40]
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
31 });
937bb47 @marcia Move the hard number line exercise over to number line 2
marcia authored
32
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
33 line([START + 1, 0], [STOP, 0], { arrows: "-&gt;" });
34 line([STOP - 1, 0], [START, 0], { arrows: "-&gt;" });
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
35 for (var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x += SCALE) {
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
36 line([x, -0.2], [x, 0.2]);
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
37 }
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
38 style({ stroke: BLUE, strokeWidth: 3.5 });
39 line([0, -0.2], [0, 0.2]);
40
41 label([0, -0.53], "0", "center");
42 label([-SCALE, -0.53], "\\llap{-}" + SCALE, "center");
43 label([SCALE, -0.53], SCALE, "center");
937bb47 @marcia Move the hard number line exercise over to number line 2
marcia authored
44
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
45 addMouseLayer();
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
46 var snap = SCALE / 4;
47 if (SCALE === 3) {
48 snap = SCALE / 3;
49 }
50 graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: snap });
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
51 graph.movablePoint.onMove = function(x, y) {
52 return [min(max(LOWER_BOUND, x), UPPER_BOUND), y];
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
53 };
54 </div>
55 </div>
6f15f3f @beneater Add a non-negative-number number line exercise
beneater authored
56
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
57 <div class="solution" data-type="custom">
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
58 <div class="guess">graph.movablePoint.coord[0]</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
59 <div class="validator-function">
60 if ( guess === 0 ) {
61 return "";
62 }
63 return abs( NUMBER - guess ) &lt; 0.001;
64 </div>
65 <div class="show-guess">
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
66 graph.movablePoint.setCoord([guess, 0]);
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
67 </div>
68 </div>
6f15f3f @beneater Add a non-negative-number number line exercise
beneater authored
69
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
70 <div class="hints">
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
71 <p>We know where <code>0</code> is on the number line because it is labeled.</p>
72 <p>We know each tick mark represents <code><var>SCALE</var></code> because <code><var>-SCALE</var></code> and <code><var>SCALE</var></code> are labeled.</p>
73 <p data-if="NUMBER < 0">Because <code><var>NUMBER</var></code> is negative, it will be to the left of <code>0</code>.</p>
74 <p data-else="">Because <code><var>NUMBER</var></code> is positive, it will be to the right of <code>0</code>.</p>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
75 <div>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
76 <div class="graphie" data-update="number-line">
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
77 style({ stroke: BLUE, fill: BLUE, strokeWidth: 3.5, arrows: "-&gt;" });
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
78 line( [ 0, 0 ], [ NUMBER, 0 ] );
79 graph.movablePoint.visibleShape.toFront();
80 </div>
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
81 <p data-if="NUMBER < 0">
82 Each tick mark represents <code><var>SCALE</var></code>,
83 so <code><var>NUMBER</var></code> will be
84 <code><var>abs(round(NUMBER / SCALE))</var></code> tick marks
85 to the left of <code>0</code>.
86 </p><p data-else="">
87 Each tick mark represents <code><var>SCALE</var></code>,
88 so <code><var>NUMBER</var></code> will be
89 <code><var>abs(round(NUMBER / SCALE))</var></code> tick marks
90 to the right of <code>0</code>.
91 </p>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
92 </div>
93 <div>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
94 <div class="graphie" data-update="number-line">
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
95 label([NUMBER, -0.53], NUMBER, "center", { color: ORANGE });
96 graph.movablePoint.moveTo(NUMBER, 0);
97 </div>
98 <p>The orange number shows where <code><var>NUMBER</var></code> is on the number line.</p>
99 </div>
100 </div>
101 </div>
102
103 <div id="where-is-point-vertical">
104 <div class="question">
105 <p>
106 Move the <strong><code>\color{orange}{\text{<var>ORANGE_DOT</var>}}</code></strong> to
107 <strong><code>\color{orange}{<var>NUMBER</var>}</code></strong> on the number line.
108 </p>
109 <div class="graphie" id="number-line">
110 init({
111 range: [[-5, 5], [LOWER_BOUND - SCALE * 0.75, UPPER_BOUND + SCALE * 0.75]],
112 scale: [32, 32 / SCALE]
113 });
114
115 line([0, START + 1], [0, STOP], { arrows: "-&gt;" });
116 line([0, STOP - 1], [0, START], { arrows: "-&gt;" });
117 for (var y = LOWER_BOUND; y &lt;= UPPER_BOUND; y += SCALE) {
118 line([-0.2, y], [0.2, y]);
119 }
120 style({ stroke: BLUE, strokeWidth: 3.5 });
121 line([-0.2, 0], [0.2, 0]);
122
123 label([-0.2, 0], "0", "left");
124 label([-0.2, -SCALE], "\\llap{-}" + SCALE, "left");
125 label([-0.2, SCALE], SCALE, "left");
126
127 addMouseLayer();
128 var snap = SCALE / 4;
129 if (SCALE === 3) {
130 snap = SCALE / 3;
131 }
132 graph.movablePoint = addMovablePoint({ constraints: { constrainX: true }, snapY: snap });
133 graph.movablePoint.onMove = function(x, y) {
134 return [x, min(max(LOWER_BOUND, y), UPPER_BOUND)];
135 };
136
137 </div>
138 </div>
139
140 <div class="solution" data-type="custom">
141 <div class="guess">graph.movablePoint.coord[1]</div>
142 <div class="validator-function">
143 if (guess === 0) {
144 return "";
145 }
146 return abs(NUMBER - guess) &lt; 0.001;
147 </div>
148 <div class="show-guess">
149 graph.movablePoint.setCoord([0, guess]);
150 </div>
151 </div>
152
153 <div class="hints">
154 <p>We know where <code>0</code> is on the number line because it is labeled.</p>
155 <p>We know each tick mark represents <code><var>SCALE</var></code> because <code><var>-SCALE</var></code> and <code><var>SCALE</var></code> are labeled.</p>
9a3339c @petercollingridge Correct hints for vertical numberline
petercollingridge authored
156 <p data-if="NUMBER < 0">Because <code><var>NUMBER</var></code> is negative, it will be below <code>0</code>.</p>
157 <p data-else="">Because <code><var>NUMBER</var></code> is positive, it will be above <code>0</code>.</p>
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
158 <div>
159 <div class="graphie" data-update="number-line">
160 style({ stroke: BLUE, fill: BLUE, strokeWidth: 3.5, arrows: "-&gt;" });
161 line([0, 0], [0, NUMBER] );
162 graph.movablePoint.visibleShape.toFront();
163 </div>
164 <p data-if="NUMBER < 0">
165 Each tick mark represents <code><var>SCALE</var></code>,
166 so <code><var>NUMBER</var></code> will be
167 <code><var>abs(round(NUMBER / SCALE))</var></code> tick marks
9a3339c @petercollingridge Correct hints for vertical numberline
petercollingridge authored
168 below <code>0</code>.
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
169 </p><p data-else="">
170 Each tick mark represents <code><var>SCALE</var></code>,
171 so <code><var>NUMBER</var></code> will be
172 <code><var>abs(round(NUMBER / SCALE))</var></code> tick marks
9a3339c @petercollingridge Correct hints for vertical numberline
petercollingridge authored
173 above <code>0</code>.
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
174 </p>
175 </div>
176 <div>
177 <div class="graphie" data-update="number-line">
178 label([-0.2, NUMBER], NUMBER, "left", { color: ORANGE });
179 graph.movablePoint.moveTo(0, NUMBER);
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
180 </div>
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
181 <p>The orange number shows where <code><var>NUMBER</var></code> is on the number line.</p>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
182 </div>
183 </div>
184 </div>
6f15f3f @beneater Add a non-negative-number number line exercise
beneater authored
185
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
186 <div id="what-is-point-horizontal">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
187 <div class="question">
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
188 <p>Where is the blue dot on the number line?</p>
e6d5ef8 @allofthenorthwood Rearrange answer area content within some exercises
allofthenorthwood authored
189 <div class="render-answer-area-here"></div>
d53a57c @jeresig Two doctypes were being output. Only output one.
jeresig authored
190 <div class="graphie" id="number-line-2">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
191 init({
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
192 range: [[LOWER_BOUND - SCALE * 0.75, UPPER_BOUND + SCALE * 0.75], [-1, 1]],
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
193 scale: [40 / SCALE, 40]
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
194 });
6f15f3f @beneater Add a non-negative-number number line exercise
beneater authored
195
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
196 line([START + 1, 0], [STOP, 0], { arrows: "-&gt;" });
197 line([STOP - 1, 0], [START, 0], { arrows: "-&gt;" });
198
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
199 for (var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x += SCALE) {
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
200 line([x, -0.2], [x, 0.2]);
201 }
202
203 style({ strokeWidth: 3.5 });
204 line([0, -0.2], [0, 0.2]);
205
206 label([0, -0.53], "0", "center");
207 label([-SCALE, -0.53], "\\llap{-}" + SCALE, "center");
208 label([SCALE, -0.53], SCALE, "center");
209 style({ stroke: BLUE, fill: BLUE });
210 graph.blueDot = ellipse([NUMBER, 0], [SCALE * 0.1, 0.1]);
211 graph.questionLabel = label([NUMBER, -0.53], "{?}", "center", { color: BLUE });
212 </div>
213 </div>
214 <div class="solution" data-forms="integer"><var>NUMBER</var></div>
215
216 <div class="hints">
217 <p>We know where <code>0</code> is on the number line because it is labeled.</p>
218 <p>We know each tick mark represents <code><var>SCALE</var></code> because <code><var>-SCALE</var></code> and <code><var>SCALE</var></code> are labeled.</p>
219 <p data-if="NUMBER < 0">Because the blue dot is to the left of <code>0</code>, the number will be negative.</p>
220 <p data-else="">Because the blue dot is to the right of <code>0</code>, the number will be positive.</p>
221 <div>
222 <div class="graphie" data-update="number-line-2">
223 for (var x = SCALE * 2; x &lt;= UPPER_BOUND; x += SCALE) {
224 label([x, -0.53], x, "center");
225 label([-x, -0.53], "\\llap{-}" + x, "center");
226 }
227 graph.questionLabel.remove();
228 label([NUMBER, -0.53], ("" + NUMBER).replace(/-/, "\\llap{-}"), "center", { color: BLUE });
229 </div>
230 <p>The blue dot represents the number <code><var>NUMBER</var></code>.</p>
231 </div>
232 </div>
233 </div>
234
235 <div id="what-is-point-vertical">
236 <div class="question">
237 <p>Where is the blue dot on the number line?</p>
e6d5ef8 @allofthenorthwood Rearrange answer area content within some exercises
allofthenorthwood authored
238 <div class="render-answer-area-here"></div>
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
239 <div class="graphie" id="number-line-2">
240 init({
241 range: [[-5, 5], [LOWER_BOUND - SCALE * 0.75, UPPER_BOUND + SCALE * 0.75]],
242 scale: [32, 32 / SCALE]
243 });
244
245 line([0, START + 1], [0, STOP], { arrows: "-&gt;" });
246 line([0, STOP - 1], [0, START], { arrows: "-&gt;" });
247
248 for (var y = LOWER_BOUND; y &lt;= UPPER_BOUND; y += SCALE) {
249 line([-0.2, y], [0.2, y]);
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
250 }
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
251
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
252 style({ strokeWidth: 3.5 });
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
253 line([-0.2, 0], [0.2, 0]);
254
255 label([-0.2, 0], "0", "left");
256 label([-0.2, -SCALE], "\\llap{-}" + SCALE, "left");
257 label([-0.2, SCALE], SCALE, "left");
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
258 style({ stroke: BLUE, fill: BLUE });
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
259 graph.blueDot = ellipse([0, NUMBER], [0.1, 0.1 * SCALE]);
260 graph.questionLabel = label([-0.2, NUMBER], "{?}", "left", { color: BLUE });;
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
261 </div>
262 </div>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
263 <div class="solution" data-forms="integer"><var>NUMBER</var></div>
937bb47 @marcia Move the hard number line exercise over to number line 2
marcia authored
264
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
265 <div class="hints">
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
266 <p>We know where <code>0</code> is on the number line because it is labeled.</p>
267 <p>We know each tick mark represents <code><var>SCALE</var></code> because <code><var>-SCALE</var></code> and <code><var>SCALE</var></code> are labeled.</p>
9a3339c @petercollingridge Correct hints for vertical numberline
petercollingridge authored
268 <p data-if="NUMBER < 0">Because the blue dot is below <code>0</code>, the number will be negative.</p>
269 <p data-else="">Because the blue dot is above <code>0</code>, the number will be positive.</p>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
270 <div>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
271 <div class="graphie" data-update="number-line-2">
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
272 for (var x = SCALE * 2; x &lt;= UPPER_BOUND; x += SCALE) {
273 label([-0.2 ,x], x, "left");
274 label([-0.2, -x], "\\llap{-}" + x, "left");
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
275 }
7264436 @petercollingridge Make vertical numberline 3 exercise type
petercollingridge authored
276 graph.questionLabel.remove();
277 label([-0.2, NUMBER], ("" + NUMBER).replace(/-/, "\\llap{-}"), "left", { color: BLUE });
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
278 </div>
1fe271e @beneater Make number_line_* exercises mo'bettah
beneater authored
279 <p>The blue dot represents the number <code><var>NUMBER</var></code>.</p>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
280 </div>
281 </div>
282 </div>
283 </div>
284 </div>
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored
285 </body>
286 </html>
Something went wrong with that request. Please try again.