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