Permalink
Browse files

Small arithmetic housecleaning

  • Loading branch information...
1 parent 877a2d0 commit 2ace1146fc2dca9ba9438a5923b4db6e9681be1d @marcia marcia committed Aug 8, 2011
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers">
+<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Adding decimals</title>
@@ -12,22 +12,20 @@
<var id="B">randRange( 100, 999 )</var>
<var id="A_DECIMAL">randRange( 1, 3 )</var>
<var id="B_DECIMAL">randRange( 1, 3 )</var>
- <var id="A_RAW_DIGITS">integerToDigits( A )</var>
- <var id="B_RAW_DIGITS">integerToDigits( B )</var>
<var id="NEW_A">A * ( B_DECIMAL &gt; A_DECIMAL ? pow( 10, B_DECIMAL - A_DECIMAL ) : 1)</var>
<var id="NEW_B">B * ( A_DECIMAL &gt; B_DECIMAL ? pow( 10, A_DECIMAL - B_DECIMAL ) : 1)</var>
<var id="A_DIGITS">
(function() {
var result = digits( NEW_A );
- for ( var i = 0; i &lt; ( A_DECIMAL - B_DECIMAL ); i++ ) {
+ for ( var i = 0; i &lt; ( A_DECIMAL - B_DECIMAL ) || result.length &lt; A_DECIMAL + 1; i++ ) {
result.push( 0 );
}
return result;
})()</var>
<var id="B_DIGITS">
(function() {
var result = digits( NEW_B );
- for ( var i = 0; i &lt; ( B_DECIMAL - A_DECIMAL ); i++ ) {
+ for ( var i = 0; i &lt; ( B_DECIMAL - A_DECIMAL ) || result.length &lt; B_DECIMAL + 1; i++ ) {
result.push( 0 );
}
return result;
@@ -46,31 +44,20 @@
<div class="problems">
<div>
- <div class="graphie" id="numbers">
- init({
- range: [ [ -1, X_SIDE ], [ -0.5, 3 ] ],
- scale: [30, 45]
- });
- style({
- fill: "black"
- });
- HIGHLIGHTS = drawDigits( A_RAW_DIGITS, X_MAX - A_RAW_DIGITS.length + 1, Y_FIRST );
- HIGHLIGHTS = HIGHLIGHTS.concat( drawDigits( B_RAW_DIGITS, X_MAX - B_RAW_DIGITS.length + 1, Y_SECOND ) );
- HIGHLIGHTS.push( ellipse( [ X_MAX - A_DECIMAL + 0.5, Y_FIRST - 0.2 ], [ 0.09, 0.06 ] ) );
- HIGHLIGHTS.push( ellipse( [ X_MAX - B_DECIMAL + 0.5, Y_SECOND - 0.2 ], [ 0.09, 0.06 ] ) );
-
- path( [ [ -0.5, Y_SECOND - 0.5 ], [ X_MAX + 0.5, Y_SECOND - 0.5 ] ]);
-
- label( [ 0, 1 ] ,"\\huge{+\\vphantom{0}}" );
- </div>
+ <p class="question"><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>
<div class="solution" data-type="decimal"><var>A / pow( 10, A_DECIMAL ) + B / pow( 10, B_DECIMAL )</var></div>
</div>
</div>
<div class="hints">
- <div class="graphie" data-update="numbers">
- while( HIGHLIGHTS.length ) {
- HIGHLIGHTS.pop().remove();
- }
+ <div class="graphie" id="numbers">
+ init({
+ range: [ [ -1, X_SIDE ], [ -0.5, 3 ] ],
+ scale: [30, 45]
+ });
+ style({
+ fill: "black"
+ });
+
X_MAX = X_MAX + ( B_DECIMAL - A_DECIMAL ) * (A_DECIMAL &lt; B_DECIMAL ? 1 : -1);
path( [ [ -0.5, Y_SECOND - 0.5 ], [ X_MAX + 0.5, Y_SECOND - 0.5 ] ]);
HIGHLIGHTS.push( label( [ X_SIDE, Y_SIDE ], "\\large{\\text{Make sure the decimals are lined up.}}", "right" ) );
@@ -79,6 +66,7 @@
for ( var i = 0; i &lt; 3; i++ ){
ellipse( [ X_MAX - max( A_DECIMAL, B_DECIMAL ) + 0.5, i - 0.2 ], [ 0.09, 0.06 ] );
}
+ label( [ -1, 1 ] ,"\\huge{+\\vphantom{0}}" );
</div>
<div class="graphie" data-update="numbers" data-each="A_DIGITS as index, value">
while( HIGHLIGHTS.length ) {
View
@@ -1,38 +1,9 @@
<!DOCTYPE html>
-<html data-require="math graphie word-problems">
+<html data-require="math graphie graphie-helpers-arithmetic word-problems">
<head>
<meta charset="UTF-8" />
<title>Addition 1</title>
<script src="../khan-exercise.js"></script>
- <script>
- function drawCircles( num, color ) {
- with ( KhanUtil.currentGraph ) {
- var numCols = Math.floor( Math.sqrt( num ));
- var numRows = Math.floor( num / numCols );
- var extra = num % numRows;
-
- init({
- range: [ [ 0, numCols + 1 ], [ -1, numRows + 2 ] ],
- scale: [30, 30]
- });
-
- style({
- stroke: color,
- fill: color
- });
-
- for ( var i = numRows; i > 0; i-- ) {
- for (var j = numCols; j > 0; j-- ) {
- circle( [ j, i ], 0.25 );
- }
- }
-
- for ( var j = extra; j > 0; j-- ) {
- circle( [ j, 0 ], 0.25 );
- }
- }
- }
- </script>
</head>
<body>
<div class="exercise">
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers">
+<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Addition 2</title>
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers">
+<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Addition 3</title>
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers">
+<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Addition 4</title>
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers">
+<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Dividing decimals</title>
@@ -35,8 +35,9 @@
strokeWidth: 1
});
- drawDigits( DIVISOR_DIGITS, -0.5 - DIVISOR_DIGITS.length, 0, true );
- drawDigits( DIVIDEND_DIGITS, 0, 0, true );
+ var padded = ( padDigitsToNum( DIVISOR_DIGITS.reverse(), DIVISOR_DECIMAL + 1 )).reverse();
+ drawDigits( padded, -0.5 - padded.length, 0 );
+ drawDigits( DIVIDEND_DIGITS, 0, 0 );
path( [ [ -0.75, -0.5 ], [ -0.75, 0.5 ], [ DIVIDEND_DIGITS.length, 0.5 ] ] );
style({
fill: "black"
@@ -1,23 +1,9 @@
<!DOCTYPE html>
-<html data-require="math graphie">
+<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Division 0.5</title>
<script src="../khan-exercise.js"></script>
- <script>
- function drawRow( num, y, color, startCount ) {
- with ( KhanUtil.currentGraph ) {
- style({
- stroke: color
- });
-
- for ( var x = 0; x < num; x++ ) {
- label( [ x, y ], "\\small{\\color{" + color + "}{" + ( startCount + x ) + "}}" );
- circle( [ x, y ], 0.25 );
- }
- }
- }
- </script>
</head>
<body>
<div class="exercise">
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers">
+<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Division 1.5</title>
View
@@ -1,23 +1,9 @@
<!DOCTYPE html>
-<html data-require="math graphie">
+<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Division 1</title>
<script src="../khan-exercise.js"></script>
- <script>
- function drawRow( num, y, color, startCount ) {
- with ( KhanUtil.currentGraph ) {
- style({
- stroke: color
- });
-
- for ( var x = 0; x < num; x++ ) {
- label( [ x, y ], "\\small{\\color{" + color + "}{" + ( startCount + x ) + "}}" );
- circle( [ x, y ], 0.25 );
- }
- }
- }
- </script>
</head>
<body>
<div class="exercise">
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers">
+<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Division 2</title>
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers">
+<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Division 3</title>
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers">
+<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Division 4</title>
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers word-problems">
+<html data-require="math graphie graphie-helpers-arithmetic word-problems">
<head>
<meta charset="UTF-8" />
<title>Multiplication 0.5</title>
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers">
+<html data-require="math graphie graphie-helpers graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Multiplication 1.5</title>
@@ -21,12 +21,10 @@
return factor;
})()
</var>
- <var id="CARRY">0</var>
<var id="PRODUCT">SMALL_FACTOR * BIG_FACTOR</var>
<var id="PRODUCT_DIGITS">integerToDigits( PRODUCT )</var>
<var id="SMALL_FACTOR_DIGITS">digits( SMALL_FACTOR )</var>
<var id="BIG_FACTOR_DIGITS">digits( BIG_FACTOR )</var>
- <var id="HIGHLIGHTS">[]</var>
</div>
<div class="problems">
@@ -40,73 +38,22 @@
style({
strokeWidth: 1
});
-
- drawDigits( SMALL_FACTOR_DIGITS.slice( 0 ).reverse(), 1 - SMALL_FACTOR_DIGITS.length, 1 );
- drawDigits( BIG_FACTOR_DIGITS.slice( 0 ).reverse(), 1 - BIG_FACTOR_DIGITS.length, 2 );
- path( [ [ -1 - PRODUCT_DIGITS.length, 0.5 ], [ 1, 0.5 ] ] );
- label( [ -BIG_FACTOR_DIGITS.length, 1 ] ,"\\huge{\\times\\vphantom{0}}" );
+ initMultiplication( SMALL_FACTOR_DIGITS, BIG_FACTOR_DIGITS, PRODUCT_DIGITS );
</div>
<div class="solution"><var>PRODUCT</var></div>
</div>
</div>
<div class="hints">
<div data-each="SMALL_FACTOR_DIGITS as smallIndex, smallDigit" data-unwrap>
<div data-each="BIG_FACTOR_DIGITS as bigIndex, bigDigit" class="graphie" data-update="numbers">
- while( HIGHLIGHTS.length ) {
- HIGHLIGHTS.pop().remove();
- }
- var bigDigit = <var>bigDigit</var>;
var bigIndex = <var>bigIndex</var>;
var smallIndex = <var>smallIndex</var>;
- var smallDigit = <var>smallDigit</var>;
- if ( bigIndex === 0 ) {
- CARRY = 0;
- }
- var product = smallDigit * bigDigit + CARRY;
- var ones = product % 10;
- var currCarry = floor( product / 10 );
- HIGHLIGHTS = HIGHLIGHTS.concat( drawDigits( [ bigDigit ], -bigIndex, 2, "#6495ED" ) );
- HIGHLIGHTS = HIGHLIGHTS.concat( drawDigits( [ smallDigit ], -smallIndex, 1, "#FF00AF" ) );
- if ( CARRY ) {
- HIGHLIGHTS = HIGHLIGHTS.concat( label( [ -bigIndex, 3 ], "\\color{#FFA500}{" + CARRY + "}", "below" ) );
- }
- label( [ 2, -smallIndex * BIG_FACTOR_DIGITS.length - bigIndex + 2 ],
- "\\color{#6495ED}{" + bigDigit + "}"
- + "\\times"
- + "\\color{#FF00AF}{" + smallDigit + "}"
- + ( CARRY ? "+\\color{#FFA500}{" + CARRY + "}" : "" )
- + "="
- + "\\color{#28AE7B}{" + product + "}", "right" );
-
- drawDigits( [ ones ], -smallIndex - bigIndex, -smallIndex );
- HIGHLIGHTS = HIGHLIGHTS.concat( drawDigits( [ ones ], -smallIndex - bigIndex, -smallIndex, "#28AE7B" ) );
-
- if ( currCarry ) {
- HIGHLIGHTS = HIGHLIGHTS.concat( label( [ -1 - bigIndex, 3 ], "\\color{#28AE7B}{" + currCarry + "}", "below" ) );
- if ( bigIndex === BIG_FACTOR_DIGITS.length - 1 ) {
- drawDigits( [ currCarry ], -smallIndex - bigIndex - 1, -smallIndex );
- HIGHLIGHTS = HIGHLIGHTS.concat( drawDigits( [ currCarry ], -smallIndex - bigIndex - 1, -smallIndex, "#28AE7B" ) );
- }
- }
- CARRY = currCarry;
- </div>
- </div>
-
- <div data-if="SMALL_FACTOR_DIGITS.length > 1" data-unwrap>
- <div class="graphie" data-update="numbers">
- while( HIGHLIGHTS.length ) {
- HIGHLIGHTS.pop().remove();
- }
- path( [ [ -1 - PRODUCT_DIGITS.length, 0.5 - SMALL_FACTOR_DIGITS.length ], [ 1, 0.5 - SMALL_FACTOR_DIGITS.length ] ] );
- label( [ -1 - PRODUCT_DIGITS.length, 1 - SMALL_FACTOR_DIGITS.length ] ,"\\huge{+\\vphantom{0}}" );
- </div>
- <div class="graphie" data-update="numbers">
- drawDigits( PRODUCT_DIGITS, 1 - PRODUCT_DIGITS.length, -2 );
+ doMultiplicationStep( bigIndex, BIG_FACTOR_DIGITS, smallIndex, SMALL_FACTOR_DIGITS );
</div>
</div>
- <div data-else class="graphie" data-update="numbers">
- while( HIGHLIGHTS.length ) {
- HIGHLIGHTS.pop().remove();
+ <div class="graphie" data-update="numbers">
+ while( graph.highlights.length ) {
+ graph.highlights.pop().remove();
}
</div>
</div>
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html data-require="math graphie graphie-helpers word-problems">
+<html data-require="math graphie graphie-helpers-arithmetic word-problems">
<head>
<meta charset="UTF-8" />
<title>Multiplication 1</title>
Oops, something went wrong.

0 comments on commit 2ace114

Please sign in to comment.