Skip to content
This repository has been archived by the owner on May 11, 2021. It is now read-only.

Commit

Permalink
Add basic multiplication helpers, sorry for the copy/paste
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcia
marcia committed Jul 12, 2011
1 parent 7a4067c commit 869a1db
Show file tree
Hide file tree
Showing 5 changed files with 362 additions and 133 deletions.
125 changes: 95 additions & 30 deletions exercises/multiplication_1.5.html
View file
@@ -1,48 +1,113 @@
<!DOCTYPE html>
<html data-require="math">
<html data-require="math graphie graphie-helpers">
<head>
<title>Multiplication 1.5</title>
<script src="../khan-exercise.js"></script>
<script>
function createEasyMultiplier( n, length ){
var maxDigit;
var result = 0;
if( n === 2 ){
maxDigit = 4;
}
else{
maxDigit = Math.floor( 10 / n );
}
for( var i = 0; i < length; i++ ){
result += Math.pow( 10, i ) * KhanUtil.randRange( 1, maxDigit );
}
return result;
}
</script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="NUM_DIGITS">randRange(2,3)</var>
<var id="B">randRange(2,4)</var>
<var id="A">createEasyMultiplier( B, NUM_DIGITS )</var>
<var id="A_ARRAY">digits(A)</var>
<var id="SMALL_FACTOR">randRange( 2, 9 )</var>
<var id="NUM_DIGITS">randRange( 2, 3 )</var>
<var id="MAX_FACTOR_DIGIT">floor( 9 / SMALL_FACTOR )</var>
<var id="BIG_FACTOR">
(function() {
var factor = randRange( 1, MAX_FACTOR_DIGIT );
for ( var i = 1; i &lt; NUM_DIGITS; i++ ){
factor *= 10;
factor += randRange( 0, MAX_FACTOR_DIGIT );
}
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">
<div>
<p class="question"><var>A</var> * <var>B</var> = ?</p>
<div class="solution"><var>A*B</var></div>
<div class="graphie" id="numbers">
init({
range: [ [ -1 - PRODUCT_DIGITS.length, 3 ], [ -1 - SMALL_FACTOR_DIGITS.length, 3 ] ],
scale: [ 30, 45 ]
});

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}}" );
</div>
<div class="solution"><var>PRODUCT</var></div>
</div>
</div>
<div class="hints">
<p><var>A_ARRAY[0]</var> * <var>B</var> = <var>A_ARRAY[0]*B</var></p>
<p>Write <var>A_ARRAY[0]*B</var> as the digit</p>
<p data-else><var>A_ARRAY[1]</var> * <var>B</var> = <var>A_ARRAY[1] * B</var></p>
<p data-if="NUM_DIGITS === 3">Write <var>A_ARRAY[2] * B</var><var>A_ARRAY[1] * B</var> as the digit</p>
<p data-if="NUM_DIGITS === 3">Result is <var>A_ARRAY[2] * B</var><var>A_ARRAY[1] * B</var><var>A_ARRAY[0] * B</var></p>
<p data-if="NUM_DIGITS === 2">Write <var>A_ARRAY[1] * B</var> as the digit</p>
<p data-if="NUM_DIGITS === 2">Result is <var>A_ARRAY[1] * B</var><var>A_ARRAY[0] * B</var></p>
<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 );
</div>
</div>
<div data-else class="graphie" data-update="numbers">
while( HIGHLIGHTS.length ) {
HIGHLIGHTS.pop().remove();
}
</div>
</div>
</div>
</body>
Expand Down
102 changes: 84 additions & 18 deletions exercises/multiplication_2.html
View file
@@ -1,36 +1,102 @@
<!DOCTYPE html>
<html data-require="math math-table">
<html data-require="math graphie graphie-helpers">
<head>
<title>Multiplication 2</title>
<script src="../khan-exercise.js"></script>

</head>
<body>
<div class="exercise">
<div class="vars">
<var id="A">randRange(11,99)</var>
<var id="B">randRange(2,9)</var>
<var id="A_ARRAY">digits(A)</var>
<var id="B_ARRAY">digits(B)</var>
<var id="TABLE">createLongMultiplicationTable( A_ARRAY, B_ARRAY)</var>
<var id="DIGITS">TABLE.digits</var>
<var id="CARRY">TABLE.carry</var>
<var id="SMALL_FACTOR">randRange( 2, 9 )</var>
<var id="BIG_FACTOR">randRange( 10, 99 )</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">
<div>
<p class="question"><var>A</var> * <var>B</var> = ?</p>
<div class="solution"><var>A*B</var></div>
<div class="graphie" id="numbers">
init({
range: [ [ -1 - PRODUCT_DIGITS.length, 3 ], [ -1 - SMALL_FACTOR_DIGITS.length, 3 ] ],
scale: [ 30, 45 ]
});

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}}" );
</div>
<div class="solution"><var>PRODUCT</var></div>
</div>
</div>
<div class="hints">
<p><var>A_ARRAY[0]</var> * <var>B_ARRAY[0]</var> = <var>A_ARRAY[0]*B_ARRAY[0]</var></p>
<p data-if="CARRY[1]">carry = <var>CARRY[1]</var></p>
<p>Write <var>DIGITS[0]</var> as the digit</p>
<p data-if="CARRY[1]"><var>A_ARRAY[1]</var> * <var>B_ARRAY[0]</var> + <var>CARRY[1]</var> = <var>A_ARRAY[1] * B_ARRAY[0] + CARRY[1]</var></p>
<p data-else><var>A_ARRAY[1]</var> * <var>B_ARRAY[0]</var> = <var>A_ARRAY[1] * B_ARRAY[0]</var></p>
<p>Write <var>DIGITS[2]</var><var>DIGITS[1]</var> as the digit</p>
<p>Result is <var>DIGITS[2]</var><var>DIGITS[1]</var><var>DIGITS[0]</var></p>
<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 );
</div>
</div>
<div data-else class="graphie" data-update="numbers">
while( HIGHLIGHTS.length ) {
HIGHLIGHTS.pop().remove();
}
</div>
</div>
</div>
</body>
Expand Down
105 changes: 84 additions & 21 deletions exercises/multiplication_3.html
View file
@@ -1,39 +1,102 @@
<!DOCTYPE html>
<html data-require="math math-table">
<html data-require="math graphie graphie-helpers">
<head>
<title>Multiplication 3</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="A">randRange(101,999)</var>
<var id="B">randRange(2,9)</var>
<var id="A_ARRAY">digits(A)</var>
<var id="B_ARRAY">digits(B)</var>
<var id="TABLE">createLongMultiplicationTable( A_ARRAY, B_ARRAY)</var>
<var id="DIGITS">TABLE.digits</var>
<var id="CARRY">TABLE.carry</var>
<var id="SMALL_FACTOR">randRange( 2, 9 )</var>
<var id="BIG_FACTOR">randRange( 100, 999 )</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">
<div>
<p class="question"><var>A</var> * <var>B</var> = ?</p>
<div class="solution"><var>A*B</var></div>
<div class="graphie" id="numbers">
init({
range: [ [ -1 - PRODUCT_DIGITS.length, 3 ], [ -1 - SMALL_FACTOR_DIGITS.length, 3 ] ],
scale: [ 30, 45 ]
});

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}}" );
</div>
<div class="solution"><var>PRODUCT</var></div>
</div>
</div>
<div class="hints">
<p><var>A_ARRAY[0]</var> * <var>B_ARRAY[0]</var> = <var>A_ARRAY[0]*B_ARRAY[0]</var></p>
<p data-if="CARRY[1]">carry = <var>CARRY[1]</var></p>
<p>Write <var>DIGITS[0]</var> as the digit</p>
<p data-if="CARRY[1]"><var>A_ARRAY[1]</var> * <var>B_ARRAY[0]</var> + <var>CARRY[1]</var> = <var>A_ARRAY[1] * B_ARRAY[0] + CARRY[1]</var></p>
<p data-else><var>A_ARRAY[1]</var> * <var>B_ARRAY[0]</var> = <var>A_ARRAY[1] * B_ARRAY[0]</var></p>
<p data-if="CARRY[2]">carry = <var>CARRY[2]</var></p>
<p>Write <var>DIGITS[1]</var> as the digit</p>
<p data-if="CARRY[2]"><var>A_ARRAY[2]</var> * <var>B_ARRAY[0]</var> + <var>CARRY[2]</var> = <var>A_ARRAY[2] * B_ARRAY[0] + CARRY[2]</var></p>
<p data-else><var>A_ARRAY[2]</var> * <var>B_ARRAY[0]</var> = <var>A_ARRAY[2] * B_ARRAY[0]</var></p>
<p>Write <var>DIGITS[3]</var><var>DIGITS[2]</var> as the digit</p>
<p>Result is <var>DIGITS[3]</var><var>DIGITS[2]</var><var>DIGITS[1]</var><var>DIGITS[0]</var></p>
<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 );
</div>
</div>
<div data-else class="graphie" data-update="numbers">
while( HIGHLIGHTS.length ) {
HIGHLIGHTS.pop().remove();
}
</div>
</div>
</div>
</body>
Expand Down

0 comments on commit 869a1db

Please sign in to comment.