Skip to content
Newer
Older
100644 142 lines (126 sloc) 4.71 KB
0196b21 @Cyrik added subtraction_decimals
Cyrik authored
1 <!DOCTYPE html>
2ace114 @marcia Small arithmetic housecleaning
marcia authored
2 <html data-require="math graphie graphie-helpers-arithmetic">
0196b21 @Cyrik added subtraction_decimals
Cyrik authored
3 <head>
72418b8 @jeresig Add meta charset to all HTML pages.
jeresig authored
4 <meta charset="UTF-8" />
07d95d3 @spicyj Rename EVERYTHING; closes #323.
spicyj authored
5 <title>Subtracting decimals</title>
0196b21 @Cyrik added subtraction_decimals
Cyrik authored
6 <script src="../khan-exercise.js"></script>
7 </head>
8 <body>
9 <div class="exercise">
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
10 <div class="vars" data-ensure="NEW_A > NEW_B">
11 <var id="A">randRange( 101, 999 )</var>
12 <var id="B">randRange( 101, 999 )</var>
13 <var id="A_DECIMAL">randRange( 1, 3 )</var>
14 <var id="B_DECIMAL">randRange( 1, 3 )</var>
15 <var id="NEW_A">A * ( B_DECIMAL &gt; A_DECIMAL ? pow( 10, B_DECIMAL - A_DECIMAL ) : 1)</var>
16 <var id="NEW_B">B * ( A_DECIMAL &gt; B_DECIMAL ? pow( 10, A_DECIMAL - B_DECIMAL ) : 1)</var>
17 <var id="A_ORIG">digits( NEW_A )</var>
18 <var id="A_DIGITS">
19 (function() {
20 var result = digits( NEW_A );
2ace114 @marcia Small arithmetic housecleaning
marcia authored
21 for ( var i = 0; i &lt; ( A_DECIMAL - B_DECIMAL ) || result.length &lt; A_DECIMAL + 1; i++ ) {
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
22 result.push( 0 );
23 }
24 return result;
25 })()</var>
26 <var id="B_DIGITS">
27 (function() {
28 var result = digits( NEW_B );
2ace114 @marcia Small arithmetic housecleaning
marcia authored
29 for ( var i = 0; i &lt; ( B_DECIMAL - A_DECIMAL ) || result.length &lt; B_DECIMAL + 1; i++ ) {
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
30 result.push( 0 );
31 }
32 return result;
33 })()</var>
34 <var id="Y_CARRY">3</var>
35 <var id="Y_FIRST">2</var>
36 <var id="Y_SECOND">1</var>
37 <var id="Y_DIFF">0</var>
38 <var id="X_MAX">4</var>
39 <var id="X_SIDE">7</var>
40 <var id="Y_SIDE">1.5</var>
0196b21 @Cyrik added subtraction_decimals
Cyrik authored
41 </div>
42
43 <div class="problems">
44 <div>
2ace114 @marcia Small arithmetic housecleaning
marcia authored
45 <p><code>\Huge{<var>roundTo( A_DECIMAL, A * pow( 10, -A_DECIMAL ) ).toFixed( A_DECIMAL )</var> - <var>roundTo( B_DECIMAL, B * pow( 10, -B_DECIMAL ) ).toFixed( B_DECIMAL )</var> = {?}}</code></p>
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
46 <div class="solution" data-type="decimal"><var>A * pow( 10, -A_DECIMAL ) - B * pow( 10, - B_DECIMAL )</var></div>
0196b21 @Cyrik added subtraction_decimals
Cyrik authored
47 </div>
48 </div>
49 <div class="hints">
2ace114 @marcia Small arithmetic housecleaning
marcia authored
50 <div class="graphie" id="numbers">
51 init({
f2a9138 @marcia Expand arithmetic's graphie ranges to fit labels.
marcia authored
52 range: [ [ -2, 17 ], [ -0.5, 4 ] ],
2ace114 @marcia Small arithmetic housecleaning
marcia authored
53 scale: [30, 45]
54 });
55 style({
56 fill: "black"
57 });
58
59 graph.highlights = [];
60 for ( var i = 0; i &lt; A_DIGITS.length; i++ ) {
61 graph.highlights.unshift( [] );
62 }
63
64 path( [ [ -0.5, 0.5 ], [ X_MAX + 0.5, 0.5 ] ]);
65
66 label( [ 0, 1 ] ,"\\huge{-\\vphantom{0}}" );
67
68 var oldHighlights = graph.highlights[ 0 ];
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
69 while( oldHighlights.length ) {
70 oldHighlights.shift().remove();
71 }
72 X_MAX = X_MAX + ( B_DECIMAL - A_DECIMAL ) * (A_DECIMAL &lt; B_DECIMAL ? 1 : -1);
ed5a693 @igorT fix small graphie issues in subtracting decimals and close #273
igorT authored
73 path( [ [ -0.5, 0.5 ], [ X_MAX + 0.5, 0.5 ] ]);
f2a9138 @marcia Expand arithmetic's graphie ranges to fit labels.
marcia authored
74 graph.highlights[0].push( label( [ X_SIDE, Y_SIDE ], "\\text{Make sure the decimals are lined up.}", "right" ) );
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
75 drawDigits( A_DIGITS.slice( 0 ).reverse(), X_MAX - A_DIGITS.length + 1, Y_FIRST );
76 drawDigits( B_DIGITS.slice( 0 ).reverse(), X_MAX - B_DIGITS.length + 1, Y_SECOND );
77 for ( var i = 0; i &lt; 3; i++ ){
78 ellipse( [ X_MAX - max( A_DECIMAL, B_DECIMAL ) + 0.5, i - 0.2 ], [ 0.09, 0.06 ] );
79 }
80 </div>
81 <div class="graphie" data-update="numbers" data-each="A_DIGITS as index, value">
82 var index = <var>index</var>;
83
2ace114 @marcia Small arithmetic housecleaning
marcia authored
84 var oldHighlights = graph.highlights[ index ];
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
85 while( oldHighlights.length ) {
86 oldHighlights.shift().remove();
87 }
88
89 if ( index !== 0 ) {
2ace114 @marcia Small arithmetic housecleaning
marcia authored
90 oldHighlights = graph.highlights[ index - 1 ];
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
91 while( oldHighlights.length ) {
92 oldHighlights.shift().remove();
93 }
94 }
95
96 var value = A_DIGITS[ index ];
97 var withinB = index &lt; B_DIGITS.length;
98 var subtrahend = withinB ? B_DIGITS[ index ] : 0;
99 var subStr = "";
cf02179 @spicyj Strip trailing whitespace
spicyj authored
100
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
101 if ( value &lt; subtrahend ) {
2ace114 @marcia Small arithmetic housecleaning
marcia authored
102 borrow( index, A_DIGITS, X_MAX, Y_FIRST, Y_CARRY, graph.highlights );
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
103 } else if ( A_DIGITS[ index ] === A_ORIG[ index ] ) {
2ace114 @marcia Small arithmetic housecleaning
marcia authored
104 graph.highlights[ index ].push( label( [ X_MAX - index, Y_FIRST ],
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
105 "\\Huge{\\color{#6495ED}{" + A_DIGITS[ index ] +"}}" ) );
106 } else {
2ace114 @marcia Small arithmetic housecleaning
marcia authored
107 graph.highlights[ index ].push( label( [ X_MAX - index, Y_CARRY ],
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
108 "\\color{#6495ED}{" + A_DIGITS[ index ] + "}", "below" ) );
109 }
cf02179 @spicyj Strip trailing whitespace
spicyj authored
110
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
111 if ( withinB ) {
2ace114 @marcia Small arithmetic housecleaning
marcia authored
112 graph.highlights[ index ].push( label( [ X_MAX - index, Y_SECOND ],
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
113 "\\Huge{\\color{#6495ED}{" + B_DIGITS[ index ] + "}}" ) );
114 subStr = " - \\color{#6495ED}{" + subtrahend + "}";
115 }
116
117 var diff = A_DIGITS[ index ] - subtrahend;
118 label( [ X_MAX - index, Y_DIFF ], "\\Huge{" + diff + "}" );
119
120
2ace114 @marcia Small arithmetic housecleaning
marcia authored
121 graph.highlights[ index ].push( label( [ X_MAX - index, Y_DIFF ], "\\Huge{\\color{#28AE7B}{" + diff + "}}" ) );
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
122
2ace114 @marcia Small arithmetic housecleaning
marcia authored
123 graph.highlights[ index ].push( label( [ X_SIDE, Y_SIDE ], "\\Large{"
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
124 + "\\color{#6495ED}{" + A_DIGITS[ index ] + "}"
125 + subStr
126 + " = "
127 + "\\color{#28AE7B}{" + diff + "}}", "right" ) );
128
129 </div>
130 <div class="graphie" data-update="numbers">
2ace114 @marcia Small arithmetic housecleaning
marcia authored
131 while( graph.highlights.length ) {
132 var column = graph.highlights.shift();
566aa29 @marcia Add exercise -- subtracting decimals
marcia authored
133 while ( column.length ) {
134 column.shift().remove();
135 }
136 }
137 </div>
0196b21 @Cyrik added subtraction_decimals
Cyrik authored
138 </div>
139 </div>
140 </body>
141 </html>
Something went wrong with that request. Please try again.