Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 586 lines (544 sloc) 29.411 kB
2c47e6e @beneater Combine understanding decimal place value exercises
beneater authored
1 <!DOCTYPE html>
e4b6721 update dependencies, fix #90500
maik authored
2 <html data-require="math interactive word-problems">
7041f1b @jeresig Re-run the linter on the exercises.
jeresig authored
3 <head>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
bc61129 @spicyj Update title tags
spicyj authored
5 <title>Money and decimal place value intuition</title>
ac1415e @spicyj Use requirejs for module loading
spicyj authored
6 <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
7 <style>
8 .column { float: left; height: 430px;
9 text-align: center;
10 -webkit-user-select: none;
11 -khtml-user-select: none;
12 -moz-user-select: none;
13 -o-user-select: none;
14 user-select: none;
15 }
16 .columnhead {
17 font-size: 12px;
18 font-weight: bold;
19 }
20 .coin-column { position: relative; margin: 0px; float: left; left: 1px; z-index: 1; }
21 .place-value {
064281e @beneater Fix up exercises that are too wide for tutorials
beneater authored
22 width: 55px; margin: 6px; line-height: 30px;
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
23 background-color: #eee; border-width: 1px; border-style: solid; border-color: #ddd; color: #ddd;
24 font-weight: bold; text-align: center; font-size: 20px;
25 cursor: pointer;
26 }
27 .bill {
064281e @beneater Fix up exercises that are too wide for tutorials
beneater authored
28 width: 70px; margin: 10px 6px; line-height: 30px;
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
29 background-color: #eee; border-width: 1px; border-style: solid; border-color: #ddd; color: #ddd;
30 font-weight: bold; text-align: center; font-size: 20px;
31 cursor: pointer;
32 }
33 .bill:hover, .place-value:hover { border-color: #999; }
34 .coin { width: 51px; margin: 10px; line-height: 32px; color: #ddd; font-size: 20px; font-weight: bold; text-align: center; cursor: pointer; }
35 .thou-selected { background-color: #ff00af; border-color: #000; color: #fff; }
36 .hund-selected { background-color: #ffa500; border-color: #000; color: #fff; }
37 .ten-selected { background-color: #28ae7b; border-color: #000; color: #fff; }
38 .one-selected { background-color: #6495ed; border-color: #000; color: #fff; }
39 .tenth-selected { background-color: purple; border-color: #000; color: #fff; }
40 .hundth-selected { background-color: gray; border-color: #000; color: #fff; }
41 .thouth-selected { background-color: #a52a2a; border-color: #000; color: #fff; }
42 .dime { font-size: 17px; }
43 .dime-selected { color: #fff; }
44 .penny-selected { color: #fff; }
45 </style>
2c47e6e @beneater Combine understanding decimal place value exercises
beneater authored
46 </head>
47 <body>
48 <div class="exercise">
1e70dd4 @beneater Place value typo, column heads, hints, refactoring, etc.
beneater authored
49
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
50 <div class="vars">
cbccff8 @jeresig Apply fixes to exercises again, after fixing some more bugs.
jeresig authored
51 <div data-ensure="!( THOUSANDS === 0 &amp;&amp; HUNDREDS === 0 )">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
52 <var id="THOUSANDS">randFromArray([ 0, randRange( 1, 9 ) ])</var>
53 <var id="HUNDREDS">randRange( 0, 9 )</var>
54 </div>
55 <var id="TENS">randRange( 0, 9 )</var>
56 <var id="ONES">randRange( 0, 9 )</var>
57 <var id="TENTHS">randRange( 0, 9 )</var>
58 </div>
59
60 <div class="problems">
61 <div id="place-value">
62 <div class="vars">
63 <var id="HUNDREDTHS">randRange( 0, 9 )</var>
64 <var id="THOUSANDTHS">randRange( 1, 9 )</var>
65 </div>
66 <p class="question">
b09b5af @petercollingridge Change question wording
petercollingridge authored
67 Choose the right number of each value to make<br>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
68 <code>\Huge{
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
69 <span data-if="THOUSANDS !== 0">\pink{<var>THOUSANDS</var>}</span>
70 \orange{<var>HUNDREDS</var>}
71 \green{<var>TENS</var>}
72 \blue{<var>ONES</var>}.
73 \purple{<var>TENTHS</var>}
74 \gray{<var>HUNDREDTHS</var>}
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
75 \color{#a52a2a}{<var>THOUSANDTHS</var>}
76 }</code>
77 </p>
78
79 <div class="problem">
80 <!--
81 If this didn't exist you would get the following error:
82
83 Uncaught TypeError: Cannot read property 'graph' of undefined
84
85 Because:
86
87 - Both problems use the same .hints.
88 - .hints uses .graphie.
89 - The other problem uses graphie so .hints's .graphies must use data-update.
90 -->
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
91 <div class="graphie" id="graph" style="display: none;"></div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
92 <div class="column">
93 <span class="columnhead">Thousands</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
94 <div class="place-value thou" data-each="10 times">1000</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
95 </div>
96 <div class="column">
97 <span class="columnhead">Hundreds</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
98 <div class="place-value hund" data-each="10 times">100</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
99 </div>
100 <div class="column">
101 <span class="columnhead">Tens</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
102 <div class="place-value ten" data-each="10 times">10</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
103 </div>
104 <div class="column">
105 <span class="columnhead">Ones</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
106 <div class="place-value one" data-each="10 times">1</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
107 </div>
108 <div class="column">
109 <span class="columnhead">Tenths</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
110 <div class="place-value tenth" data-each="10 times">0.1</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
111 </div>
112 <div class="column">
113 <span class="columnhead">Hundredths</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
114 <div class="place-value hundth" data-each="10 times">0.01</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
115 </div>
116 <div class="column">
117 <span class="columnhead">Thousandths</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
118 <div class="place-value thouth" data-each="10 times">0.001</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
119 </div>
120
121 <var>
122 (function() {
123 Khan.scratchpad.disable();
124 // click handlers
125 $( "#problemarea .thou" ).bind( "vmousedown", function( event ) {
126 event.preventDefault();
127 $( this ).toggleClass( 'thou-selected' );
128 });
129 $( "#problemarea .hund" ).bind( "vmousedown", function( event ) {
130 event.preventDefault();
131 $( this ).toggleClass( 'hund-selected' );
132 });
133 $( "#problemarea .ten" ).bind( "vmousedown", function( event ) {
134 event.preventDefault();
135 $( this ).toggleClass( 'ten-selected' );
136 });
137 $( "#problemarea .one" ).bind( "vmousedown", function( event ) {
138 event.preventDefault();
139 $( this ).toggleClass( 'one-selected' );
140 });
141 $( "#problemarea .tenth" ).bind( "vmousedown", function( event ) {
142 event.preventDefault();
143 $( this ).toggleClass( 'tenth-selected' );
144 });
145 $( "#problemarea .hundth" ).bind( "vmousedown", function( event ) {
146 event.preventDefault();
147 $( this ).toggleClass( 'hundth-selected' );
148 });
149 $( "#problemarea .thouth" ).bind( "vmousedown", function( event ) {
150 event.preventDefault();
151 $( this ).toggleClass( 'thouth-selected' );
152 });
153 })()
154 </var>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
155 <p style="clear: left">&nbsp;</p>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
156 </div>
157
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
158 <div class="solution" data-type="custom">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
159 <div class="instruction">
160 </div>
161 <div class="guess">digitsToInteger([
162 $( "#problemarea .thou-selected" ).length,
163 $( "#problemarea .hund-selected" ).length,
164 $( "#problemarea .ten-selected" ).length,
165 $( "#problemarea .one-selected" ).length,
166 $( "#problemarea .tenth-selected" ).length,
167 $( "#problemarea .hundth-selected" ).length,
168 $( "#problemarea .thouth-selected" ).length
169 ]) / 1000
170 </div>
171 <div class="validator-function">
172 if ( guess === 0 ) {
173 return "";
174 } else {
175 return guess === ( digitsToInteger([ THOUSANDS, HUNDREDS, TENS, ONES, TENTHS, HUNDREDTHS, THOUSANDTHS ]) / 1000 );
176 }
177 </div>
178 <div class="show-guess">
179 var places = digits( guess * 1000 );
180
181 // unselect everything
182 $( "#problemarea .place-value" ).removeClass( 'thou-selected hund-selected ten-selected one-selected tenth-selected, hundth-selected, thouth-selected' );
183
184 // select the approprate number of each thing
185 $( "#problemarea .thou" ).slice( 0, places[6] || 0 ).addClass( 'thou-selected' );
186 $( "#problemarea .hund" ).slice( 0, places[5] || 0 ).addClass( 'hund-selected' );
187 $( "#problemarea .ten" ).slice( 0, places[4] || 0 ).addClass( 'ten-selected' );
188 $( "#problemarea .one" ).slice( 0, places[3] || 0 ).addClass( 'one-selected' );
189 $( "#problemarea .tenth" ).slice( 0, places[2] || 0 ).addClass( 'tenth-selected' );
190 $( "#problemarea .hundth" ).slice( 0, places[1] || 0 ).addClass( 'hundth-selected' );
191 $( "#problemarea .thouth" ).slice( 0, places[0] || 0 ).addClass( 'thouth-selected' );
192 </div>
193 </div>
194 </div>
195
196 <div id="money">
197 <div class="vars">
198 <var id="HUNDREDTHS">randRange( 1, 9 )</var>
199 <var id="THOUSANDTHS">0</var>
200 </div>
201 <p class="question">
cbccff8 @jeresig Apply fixes to exercises again, after fixing some more bugs.
jeresig authored
202 Choose the right number of bills and coins to make<br>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
203 <code>\Huge{$
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
204 <span data-if="THOUSANDS !== 0">\pink{<var>THOUSANDS</var>}</span>
205 \orange{<var>HUNDREDS</var>}
206 \green{<var>TENS</var>}
207 \blue{<var>ONES</var>}.
208 \purple{<var>TENTHS</var>}
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
209 \color{gray}{<var>HUNDREDTHS</var>}
210 }</code>
211 </p>
212
213 <div class="problem">
214 <div class="column">
215 <span class="columnhead">Thousands</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
216 <div class="bill thou" data-each="10 times">$1000</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
217 </div>
218 <div class="column">
219 <span class="columnhead">Hundreds</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
220 <div class="bill hund" data-each="10 times">$100</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
221 </div>
222 <div class="column">
223 <span class="columnhead">Tens</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
224 <div class="bill ten" data-each="10 times">$10</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
225 </div>
226 <div class="column">
227 <span class="columnhead">Ones</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
228 <div class="bill one" data-each="10 times">$1</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
229 </div>
230 <div class="column">
231 <div class="coin-column">
232 <span class="columnhead">Tenths</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
233 <div class="coin dime" data-each="10 times">10¢</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
234 </div>
235 <div class="coin-column">
236 <span class="columnhead">Hundredths</span>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
237 <div class="coin penny" data-each="10 times">1¢</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
238 </div>
dd95925 @jeresig Run all the exercises through the cleaner.
jeresig authored
239 <div class="graphie" id="graph">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
240 Khan.scratchpad.disable();
241 init({ range: [ [ 0, 143 ], [ -430, 22 ] ], scale: [ 1, 1 ] });
242 style({ fill: "#eee", stroke: "#ddd", strokeWidth: 1 });
243 graph.tenths = [];
244 graph.hundredths = [];
245 for ( var i = 0; i &lt; 10; ++i ) {
246 graph.tenths.push( circle( [ 37, (-42 * i) - 26 ], 18 ) );
247 graph.hundredths.push( circle( [ 107, (-42 * i) - 26 ], 18 ) );
248 }
249
250 graph.getCoinCircle = function( coinEl ) {
251 var coins,
252 coin = $( coinEl );
253
254 if ( coin.hasClass( 'dime' ) ) {
255 coins = KhanUtil.currentGraph.graph.tenths;
256 } else {
257 coins = KhanUtil.currentGraph.graph.hundredths;
258 }
259
260 return coins[ coin.index() - 1 ];
261 }
262
263 // click handlers
264 $( "#problemarea .thou" ).bind( "vmousedown", function( event ) {
265 event.preventDefault();
266 $( this ).toggleClass( 'thou-selected' );
267 });
268 $( "#problemarea .hund" ).bind( "vmousedown", function( event ) {
269 event.preventDefault();
270 $( this ).toggleClass( 'hund-selected' );
271 });
272 $( "#problemarea .ten" ).bind( "vmousedown", function( event ) {
273 event.preventDefault();
274 $( this ).toggleClass( 'ten-selected' );
275 });
276 $( "#problemarea .one" ).bind( "vmousedown", function( event ) {
277 event.preventDefault();
278 $( this ).toggleClass( 'one-selected' );
279 });
280 $( "#problemarea .dime" ).bind( "vmousedown", function( event ) {
281 event.preventDefault();
282 $( this ).toggleClass( 'dime-selected' );
283 if ( $( this ).hasClass( 'dime-selected' ) ) {
284 graph.getCoinCircle( this ).attr({ fill: 'purple', stroke: '#000' });
285 } else {
286 graph.getCoinCircle( this ).attr({ fill: '#eee', stroke: '#ddd' });
287 }
288 });
289 $( "#problemarea .penny" ).bind( "vmousedown", function( event ) {
290 event.preventDefault();
291 $( this ).toggleClass( 'penny-selected' );
292 if ( $( this ).hasClass( 'penny-selected' ) ) {
293 graph.getCoinCircle( this ).attr({ fill: 'gray', stroke: '#000' });
294 } else {
295 graph.getCoinCircle( this ).attr({ fill: '#eee', stroke: '#ddd' });
296 }
297 });
298
299 // mouseover handlers
300 $( "#problemarea .dime" ).bind( "vmouseover", function( event ) {
301 graph.getCoinCircle( this ).attr({ stroke: '#999' });
302 });
303 $( "#problemarea .penny" ).bind( "vmouseover", function( event ) {
304 graph.getCoinCircle( this ).attr({ stroke: '#999' });
305 });
306
307 // mouseout handlers
308 $( "#problemarea .dime" ).bind( "vmouseout", function( event ) {
309 if ( $( this ).hasClass( 'dime-selected' ) ) {
310 graph.getCoinCircle( this ).attr({ stroke: '#000' });
311 } else {
312 graph.getCoinCircle( this ).attr({ stroke: '#ddd' });
313 }
314 });
315 $( "#problemarea .penny" ).bind( "vmouseout", function( event ) {
316 if ( $( this ).hasClass( 'penny-selected' ) ) {
317 graph.getCoinCircle( this ).attr({ stroke: '#000' });
318 } else {
319 graph.getCoinCircle( this ).attr({ stroke: '#ddd' });
320 }
321 });
322 </div>
323 </div>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
324 <p style="clear: left">&nbsp;</p>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
325 </div>
326
327
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
328 <div class="solution" data-type="custom">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
329 <div class="instruction">
330 </div>
331 <div class="guess">digitsToInteger([
332 $( "#problemarea .thou-selected" ).length,
333 $( "#problemarea .hund-selected" ).length,
334 $( "#problemarea .ten-selected" ).length,
335 $( "#problemarea .one-selected" ).length,
336 $( "#problemarea .dime-selected" ).length,
337 $( "#problemarea .penny-selected" ).length
338 ]) / 100
339 </div>
340 <div class="validator-function">
341 if ( guess === 0 ) {
342 return "";
343 } else {
344 return guess === ( digitsToInteger([ THOUSANDS, HUNDREDS, TENS, ONES, TENTHS, HUNDREDTHS ]) / 100 );
345 }
346 </div>
347 <div class="show-guess">
348 var places = digits( guess * 100 );
349
350 // unselect everything
351 $( "#problemarea .bill" ).removeClass( 'thou-selected hund-selected ten-selected one-selected' );
352 $( "#problemarea .dime" ).removeClass( 'dime-selected' );
353 $( "#problemarea .penny" ).removeClass( 'penny-selected' );
354 $.each( KhanUtil.currentGraph.graph.tenths, function() {
355 this.attr({ fill: '#eee', stroke: '#ddd' });
356 });
357 $.each( KhanUtil.currentGraph.graph.hundredths, function() {
358 this.attr({ fill: '#eee', stroke: '#ddd' });
359 });
360
361 // select the approprate number of each thing
362 $( "#problemarea .thou" ).slice( 0, places[5] || 0 ).addClass( 'thou-selected' );
363 $( "#problemarea .hund" ).slice( 0, places[4] || 0 ).addClass( 'hund-selected' );
364 $( "#problemarea .ten" ).slice( 0, places[3] || 0 ).addClass( 'ten-selected' );
365 $( "#problemarea .one" ).slice( 0, places[2] || 0 ).addClass( 'one-selected' );
366 $( "#problemarea .dime" ).slice( 0, places[1] || 0 ).addClass( 'dime-selected' );
367 $( "#problemarea .penny" ).slice( 0, places[0] || 0 ).addClass( 'penny-selected' );
368 for ( var i = 0; i &lt; places[1]; ++i ) {
369 KhanUtil.currentGraph.graph.tenths[ i ].attr({ fill: 'purple', stroke: '#000' });
370 }
371 for ( var i = 0; i &lt; places[0]; ++i ) {
372 KhanUtil.currentGraph.graph.hundredths[ i ].attr({ fill: 'gray', stroke: '#000' });
373 }
374 </div>
375 </div>
376 </div>
377 </div>
378
379 <div class="hints">
380 <p>
381 <code>\Large{
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
382 <span data-if="THOUSANDS !== 0">\pink{<var>THOUSANDS</var>}</span>
383 \orange{<var>HUNDREDS</var>}
384 \green{<var>TENS</var>}
385 \blue{<var>ONES</var>}.
386 \purple{<var>TENTHS</var>}
387 \gray{<var>HUNDREDTHS</var>}
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
388 <span data-if="THOUSANDTHS !== 0">\color{brown}{<var>THOUSANDTHS</var>}</span>
389 }
390 </code>
391 is the same as
392 <code>\large{
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
393 <span data-if="THOUSANDS !== 0">\pink{<var>THOUSANDS</var>000} + </span>
394 \orange{<var>HUNDREDS</var>00} +
395 \green{<var>TENS</var>0} +
396 \blue{<var>ONES</var>} +
397 \purple{0.<var>TENTHS</var>} +
398 \gray{0.0<var>HUNDREDTHS</var>} +
399 \color{brown}{0.00<var>THOUSANDTHS</var>}
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
400 }</code>.
401 </p>
402 <div data-if="THOUSANDS !== 0">
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
403 <p>
404 <code>\large{\pink{<var>THOUSANDS</var>000}}</code> is the same as <code>\large{\pink{<var>THOUSANDS</var>}}</code>
405 <var>plural_form(numberPlaceNames[3], THOUSANDS)</var>, the place value four places to the left of the decimal point.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
406 </p>
407
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
408 <div class="graphie" data-update="graph">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
409 // Select thousands.
410 var thous = $( '#problemarea .thou' );
411 thous.removeClass( 'thou-selected' );
412
413 for ( var i = 0; i &lt; THOUSANDS; i++ ) {
414 $( thous[ i ] ).addClass( 'thou-selected' );
415 }
416 </div>
417 </div>
cbccff8 @jeresig Apply fixes to exercises again, after fixing some more bugs.
jeresig authored
418 <p data-else="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
419 Because there is no number in the <span class="hint_pink">thousands</span> place, you don't need any <span class="hint_pink">thousands</span>.
420 </p>
421 <div data-if="HUNDREDS !== 0">
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
422 <p>
423 <code>\large{\orange{<var>HUNDREDS</var>00}}</code> is the same as <code>\large{\orange{<var>HUNDREDS</var>}}</code>
424 <var>plural_form(numberPlaceNames[2], HUNDREDS)</var>, the place value three places to the left of the decimal point..
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
425 </p>
426
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
427 <div class="graphie" data-update="graph">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
428 // Select hundreds.
429 var hunds = $( '#problemarea .hund' );
430 hunds.removeClass( 'hund-selected' );
431
432 for ( var i = 0; i &lt; HUNDREDS; i++ ) {
433 $( hunds[ i ] ).addClass( 'hund-selected' );
434 }
435 </div>
436 </div>
cbccff8 @jeresig Apply fixes to exercises again, after fixing some more bugs.
jeresig authored
437 <p data-else="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
438 Because the <span class="hint_orange">hundreds</span> place is <code class="hint_orange">\large{0}</code>, you don't need any <span class="hint_orange">hundreds</span>.
439 </p>
440 <div data-if="TENS !== 0">
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
441 <p>
442 <code>\large{\green{<var>TENS</var>0}}</code> is the same as <code>\large{\green{<var>TENS</var>}}</code>
443 <var>plural_form(numberPlaceNames[1], TENS)</var>, the place value two places to the left of the decimal point.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
444 </p>
445
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
446 <div class="graphie" data-update="graph">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
447 // Select tens.
448 var tens = $( '#problemarea .ten' );
449 tens.removeClass( 'ten-selected' );
450
451 for ( var i = 0; i &lt; TENS; i++ ) {
452 $( tens[ i ] ).addClass( 'ten-selected' );
453 }
454 </div>
455 </div>
cbccff8 @jeresig Apply fixes to exercises again, after fixing some more bugs.
jeresig authored
456 <p data-else="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
457 Because the <span class="hint_green">tens</span> place is <code class="hint_green">\large{0}</code>, you don't need any <span class="hint_green">tens</span>.
458 </p>
459 <div data-if="ONES !== 0">
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
460 <p>
461 <code>\large{\blue{<var>ONES</var>}}</code> is the same as <code>\large{\blue{<var>ONES</var>}}</code>
462 <var>plural_form(numberPlaceNames[0], ONES)</var>, the place value one place to the left of the decimal point.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
463 </p>
464
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
465 <div class="graphie" data-update="graph">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
466 // Select ones.
467 var ones = $( '#problemarea .one' );
468 ones.removeClass( 'one-selected' );
469
470 for ( var i = 0; i &lt; ONES; i++ ) {
471 $( ones[ i ] ).addClass( 'one-selected' );
472 }
473 </div>
474 </div>
cbccff8 @jeresig Apply fixes to exercises again, after fixing some more bugs.
jeresig authored
475 <p data-else="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
476 Because the <span class="hint_blue">ones</span> place is <code class="hint_blue">\large{0}</code>, you don't need any <span class="hint_blue">ones</span>.
477 </p>
478 <div data-if="TENTHS !== 0">
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
479 <p>
480 <code>\large{\purple{0.<var>TENTHS</var>}}</code> is the same as <code>\large{\purple{<var>TENTHS</var>}}</code>
481 <var>plural_form(decimalPlaceNames[1], TENTHS)</var>, the place value one place to the right of the decimal point.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
482 </p>
483
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
484 <div class="graphie" data-update="graph">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
485 // Select dimes/tenths.
486 if ( $( '#place-value' ).length === 1 ) {
487 var tenths = $( '#problemarea .tenth' );
488 tenths.removeClass( 'tenth-selected' );
489
490 for ( var i = 0; i &lt; TENTHS; i++ ) {
491 $( tenths[ i ] ).addClass( 'tenth-selected' );
492 }
493 } else {
494 var dimes = $( '#problemarea .dime' );
495 dimes.removeClass( 'dime-selected' );
496
497 for ( var i = 0; i &lt; dimes.length; i++ ) {
498 graph.getCoinCircle( dimes[ i ] ).attr({ fill: '#eee', stroke: '#ddd' });
499 }
500
501 for ( var i = 0; i &lt; TENTHS; i++ ) {
502 $( dimes[ i ] ).addClass( 'dime-selected' );
503 graph.getCoinCircle( dimes[ i ] ).attr({ fill: 'purple', stroke: '#000' });
504 }
505 }
506 </div>
507 </div>
cbccff8 @jeresig Apply fixes to exercises again, after fixing some more bugs.
jeresig authored
508 <p data-else="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
509 Because the <span class="hint_purple">tenths</span> place is <code class="hint_purple">\large{0}</code>, you don't need any <span class="hint_purple">tenths</span>.
510 </p>
511 <div data-if="HUNDREDTHS !== 0">
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
512 <p>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
513 <code>\large{\color{gray}{0.0<var>HUNDREDTHS</var>}}</code> is the same as <code>\large{\color{gray}{<var>HUNDREDTHS</var>}}</code>
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
514 <var>plural_form(decimalPlaceNames[2], HUNDREDTHS)</var>, the place value two places to the right of the decimal point.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
515 </p>
516
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
517 <div class="graphie" data-update="graph">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
518 // Select pennies/hundredths.
519 if ( $( '#place-value' ).length === 1 ) {
520 var hundths = $( '#problemarea .hundth' );
521 hundths.removeClass( 'hundth-selected' );
522
523 for ( var i = 0; i &lt; HUNDREDTHS; i++ ) {
524 $( hundths[ i ] ).addClass( 'hundth-selected' );
525 }
526 } else {
527 var pennies = $( '#problemarea .penny' );
528 pennies.removeClass( 'penny-selected' );
529
530 for ( var i = 0; i &lt; pennies.length; i++ ) {
531 graph.getCoinCircle( pennies[ i ] ).attr({ fill: '#eee', stroke: '#ddd' });
532 }
533
534 for ( var i = 0; i &lt; HUNDREDTHS; i++ ) {
535 $( pennies[ i ] ).addClass( 'penny-selected' );
536 graph.getCoinCircle( pennies[ i ] ).attr({ fill: 'gray', stroke: '#000' });
537 }
538 }
539 </div>
540 </div>
cbccff8 @jeresig Apply fixes to exercises again, after fixing some more bugs.
jeresig authored
541 <p data-else="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
542 Because the <span class="hint_gray">hundreds</span> place is <code class="hint_gray">\large{0}</code>, you don't need any <span class="hint_gray">hundreds</span>.
543 </p>
544 <div data-if="THOUSANDTHS !== 0">
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
545 <p>
546 <code>\large{\color{brown}{0.00<var>THOUSANDTHS</var>}}</code> is the same as <code>\large{\color{brown}{<var>THOUSANDTHS</var>}}</code>
547 <var>plural_form(decimalPlaceNames[3], THOUSANDTHS)</var>, the place value three places to the right of the decimal point.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
548 </p>
549
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
550 <div class="graphie" data-update="graph">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
551 // Select thousandths.
552 var thouths = $( '#problemarea .thouth' );
553 thouths.removeClass( 'thouth-selected' );
554
555 for ( var i = 0; i &lt; THOUSANDTHS; i++) {
556 $( thouths[ i ] ).addClass( 'thouth-selected' );
557 }
558 </div>
559 </div>
560 <!-- no data-else for thousandths since they're only zero if we're dealing with a money problem -->
561 <p>
9670527 @jeresig Rewrote a number of exercises to better handle pluralization (reducin…
jeresig authored
562 <span>Therefore you need:</span>
731a566 @petercollingridge Fix bug in hints and simplify code
petercollingridge authored
563 <span data-if="THOUSANDS !== 0">
564 <code>\large{\pink{<var>THOUSANDS</var>}}</code> <var>plural_form(numberPlaceNames[3], THOUSANDS)</var>, </span>
565 <span data-if="HUNDREDS !== 0">
566 <code>\large{\orange{<var>HUNDREDS</var>}}</code> <var>plural_form(numberPlaceNames[2], HUNDREDS)</var>, </span>
567 <span data-if="TENS !== 0">
568 <code>\large{\green{<var>TENS</var>}}</code> <var>plural_form(numberPlaceNames[1], TENS)</var>, </span>
569 <span data-if="ONES !== 0">
570 <code>\large{\blue{<var>ONES</var>}}</code> <var>plural_form(numberPlaceNames[0], ONES)</var>, </span>
571 <span data-if="TENTHS !== 0">
572 <code>\large{\purple{<var>TENTHS</var>}}</code> <var>plural_form(decimalPlaceNames[1], TENTHS)</var>, </span>
573 <span data-if="THOUSANDTHS === 0">
574 and <code>\large{\color{gray}{<var>HUNDREDTHS</var>}}</code> <var>plural_form(decimalPlaceNames[2], HUNDREDTHS)</var>.</span>
575 <span data-else="">
576 <span data-if="HUNDREDTHS !== 0">
577 <code>\large{\color{gray}{<var>HUNDREDTHS</var>}}</code> <var>plural_form(decimalPlaceNames[2], HUNDREDTHS)</var>, </span>
578 <span data-else="">
579 and <code>\large{\color{brown}{<var>THOUSANDTHS</var>}}</code> <var>plural_form(decimalPlaceNames[3], THOUSANDTHS)</var>.</span>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
580 </span>
581 </p>
582 </div>
2c47e6e @beneater Combine understanding decimal place value exercises
beneater authored
583 </div>
7041f1b @jeresig Re-run the linter on the exercises.
jeresig authored
584 </body>
585 </html>
Something went wrong with that request. Please try again.