Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

146 lines (136 sloc) 4.958 kb
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers-arithmetic">
<head>
<meta charset="UTF-8" />
<title>Adding decimals</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="A">randRange( 100, 999 )</var>
<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="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 ) || 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 ) || result.length &lt; B_DECIMAL + 1; i++ ) {
result.push( 0 );
}
return result;
})()</var>
<var id="CARRY">0</var>
<var id="HAS_FINAL_CARRY">floor( ( NEW_A + NEW_B ) / pow( 10, A_DIGITS.length ) ) !== 0</var>
<var id="HIGHLIGHTS">[]</var>
<var id="Y_CARRY">3</var>
<var id="Y_FIRST">2</var>
<var id="Y_SECOND">1</var>
<var id="Y_SUM">0</var>
<var id="X_MAX">3</var>
<var id="X_SIDE">6</var>
<var id="Y_SIDE">1.5</var>
</div>
<div class="problems">
<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" id="numbers">
init({
range: [ [ -2, 17 ], [ -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 ], "\\text{Make sure the decimals are lined up.}", "right" ) );
drawDigits( A_DIGITS.slice( 0 ).reverse(), X_MAX - A_DIGITS.length + 1, Y_FIRST );
drawDigits( B_DIGITS.slice( 0 ).reverse(), X_MAX - B_DIGITS.length + 1, Y_SECOND );
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 ) {
HIGHLIGHTS.pop().remove();
}
var index = <var>index</var>;
var prevCarry = CARRY;
var prevCarryStr = "";
var carryStr = "";
var addendStr = "";
var sum;
if ( prevCarry !== 0 ) {
HIGHLIGHTS.push( label( [ X_MAX - index, Y_CARRY ], "\\color{#6495ED}{" + prevCarry + "}", "below" ) );
prevCarryStr = "\\color{#6495ED}{" + prevCarry + "} + ";
}
sum = A_DIGITS[ index ] + CARRY;
HIGHLIGHTS.push( label( [ X_MAX - index, Y_FIRST ],
"\\Huge{\\color{#6495ED}{" + A_DIGITS[ index ] + "}}" ) );
if ( index &lt; B_DIGITS.length ) {
HIGHLIGHTS.push( label( [ X_MAX - index, Y_SECOND ],
"\\Huge{\\color{#6495ED}{" + B_DIGITS[ index ] + "}}" ) );
addendStr = " + \\color{#6495ED}{" + B_DIGITS[ index ] + "}";
sum += B_DIGITS[ index ];
}
label( [ X_MAX - index, 0 ], "\\Huge{" + sum % 10 + "}");
HIGHLIGHTS.push( label( [ X_MAX - index, Y_SUM ],
"\\Huge{\\color{#28AE7B}{" + sum % 10 + "}}" ) );
CARRY = floor( sum / 10 );
if ( CARRY !== 0 ) {
HIGHLIGHTS.push( label( [ X_MAX - index - 1, Y_CARRY ],
"\\color{#FFA500}{" + CARRY + "}", "below" ) );
carryStr = "\\color{#FFA500}{" + CARRY + "}";
}
HIGHLIGHTS.push( label( [ X_SIDE, Y_SIDE ], "\\Large{"
+ prevCarryStr
+ "\\color{#6495ED}{" + A_DIGITS[ index ] + "}"
+ addendStr
+ " = "
+ carryStr
+ "\\color{#28AE7B}{" + sum % 10 + "}"
+ "}", "right" ) );
</div>
<div data-if="HAS_FINAL_CARRY">
<div class="graphie" data-update="numbers">
while( HIGHLIGHTS.length ) {
HIGHLIGHTS.pop().remove();
}
HIGHLIGHTS.push( label( [ 0, Y_CARRY ],
"\\color{#6495ED}{" + CARRY + "}", "below" ) );
label( [ 0, Y_SUM ], "\\Huge{" + CARRY + "}" );
HIGHLIGHTS.push( label( [ 0, Y_SUM ],
"\\Huge{\\color{#28AE7B}{" + CARRY + "}}" ) );
HIGHLIGHTS.push( label( [ X_SIDE, Y_SIDE ],
"\\Large{"
+ "\\color{#6495ED}{" + CARRY + "}"
+ " = "
+ "\\color{#28AE7B}{" + CARRY + "}"
+ "}", "right" ) );
</div>
</div>
<div class="graphie" data-update="numbers">
while( HIGHLIGHTS.length ) {
HIGHLIGHTS.pop().remove();
}
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.