This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
distributive_property.html
100 lines (100 loc) · 5.57 KB
/
distributive_property.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers math-format word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Distributive property</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="evaluate">
<div class="vars">
<var id="A, B, C">randRangeUnique( 2, 10, 3 )</var>
<var id="RESULT">A * ( B + C )</var>
</div>
<p class="question">Use distribution to solve:</p>
<p><code><var>A</var>\times(<var>B</var> + <var>C</var>)</code></p>
<p class="solution" data-forms="integer"><var>RESULT</var></p>
<div class="hints">
<div>
<p>Each row has <code><var>B</var> + <var>C</var> = <var>B+C</var></code> rectangles, and there are <code><var>A</var></code> rows.</p>
<div class="graphie" id="distrib">
init({
range: [ [ 0, 1 ], [ 0, A ] ],
scale: [ 180, 30 ]
});
rectchart( [ B, C ], [ "#FFA500", "#6495ED" ], A - 1 );
for ( var i = 0; i < A - 1; i++ ) {
rectchart( [ B, C ], [ "#FFCF22", "#85B7FF" ], i);
}
</div>
</div>
<p style="font-weight: bold">Counting by color:</p>
<p>Number of orange rectangles: <code><var>A</var> \times <var>B</var> = <var>A * B</var></code></p>
<p>Number of blue rectangles: <code><var>A</var> \times <var>C</var> = <var>A* C</var></code></p>
<p>Total number of rectangles: <code><var>A * B</var> + <var>A * C</var> = <var>RESULT</var></code></p>
<p style="font-weight: bold">Counting by row:</p>
<p>Number of rows: <code><var>A</var></code></p>
<p>Number of rectangles in a row: <code><var>B</var> + <var>C</var> = <var>B + C</var></code></p>
<p>Total number of rectangles: <code><var>A</var> \times <var>B + C</var> = <var>RESULT</var></code></p>
<div>
<p>Both ways of counting result in the same number, and this is known as the distributive property.</p>
<p><code>(<var>A</var> \times <var>B</var>) + (<var>A</var> \times <var>C</var>) = <var>A</var>\times(<var>B</var> + <var>C</var>)</code></p>
</div>
</div>
</div>
<div id="replace-symbol">
<div class="vars">
<var id="NUMS">randRangeUnique( 2, 10, 3 )</var>
<var id="A, B, C">NUMS</var>
<var id="RESULT">A * ( B + C )</var>
<var id="SYMBOL">binop( 1 )</var>
<var id="SWAP_INDEX">randRange( 0, 2 )</var>
<var id="SYM_A, SYM_B, SYM_C">
(function() {
return $.map( NUMS, function( el, i ) {
if ( i === SWAP_INDEX ) {
return SYMBOL;
} else {
return el;
}
});
})()
</var>
<var id="MISSING">NUMS[ SWAP_INDEX ]</var>
</div>
<p class="question">Using the picture below as a guide, what number could replace <code><var>SYMBOL</var></code>?</p>
<p><code><var>A</var>\times(<var>B</var> + <var>C</var>) = ( <var>SYM_A</var> \times <var>SYM_B</var> ) + ( <var>SYM_A</var> \times <var>SYM_C</var> )</code></p>
<div class="graphie" id="distrib">
init({
range: [ [ 0, 1 ], [ 0, A ] ],
scale: [ 180, 30 ]
});
rectchart( [ B, C ], [ "#FFA500", "#6495ED" ], A - 1 );
for ( var i = 0; i < A - 1; i++ ) {
rectchart( [ B, C ], [ "#FFCF22", "#85B7FF" ], i);
}
</div>
<p>There are <code><var>A</var></code> rows, and each row has <code><var>B</var> + <var>C</var> = <var>B+C</var></code> rectangles.</p>
<p class="solution" data-forms="integer"><var>MISSING</var></p>
<div class="hints">
<p style="font-weight: bold">Counting by color:</p>
<p>Number of orange rectangles: <code><var>A</var> \times <var>B</var> = <var>A * B</var></code></p>
<p>Number of blue rectangles: <code><var>A</var> \times <var>C</var> = <var>A* C</var></code></p>
<p>Total number of rectangles: <code><var>A * B</var> + <var>A * C</var> = <var>RESULT</var></code></p>
<p style="font-weight: bold">Counting by row:</p>
<p>Number of rows: <code><var>A</var></code></p>
<p>Number of rectangles in a row: <code><var>B</var> + <var>C</var> = <var>B + C</var></code></p>
<p>Total number of rectangles: <code><var>A</var> \times <var>B + C</var> = <var>RESULT</var></code></p>
<div>
<p>Both ways of counting result in the same number, and this is known as the distributive property.</p>
<p><code>(<var>A</var> \times <var>B</var>) + (<var>A</var> \times <var>C</var>) = <var>A</var>\times(<var>B</var> + <var>C</var>)</code></p>
<p>Thus the symbol <code><var>SYMBOL</var></code> could be replaced with <code><var>MISSING</var></code>.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>