forked from Khan/khan-exercises
-
Notifications
You must be signed in to change notification settings - Fork 0
/
fractions_cut_and_copy_1.html
97 lines (86 loc) · 5.26 KB
/
fractions_cut_and_copy_1.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
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers word-problems slice-clone">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fractions cut and copy 1</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<!-- An integer will be a starting or ending quantity 1/3 of the time -->
<var id="D_PARENT">randRangeWeighted( 3, 12, 1, 1 / 6 )</var>
<var id="D_OFFSPRING">D_PARENT === 1 ? randRange( 3, 12 ) : ( rand( 5 ) > 0 ? D_PARENT : 1 )</var>
<div data-ensure="getGCD( N_PARENT * ( D_PARENT === 1 ? D_OFFSPRING : 1 ), N_OFFSPRING * ( D_OFFSPRING === 1 ? D_PARENT : 1 ) ) === 1 && N_PARENT / D_PARENT > N_OFFSPRING / D_OFFSPRING">
<var id="N_PARENT">D_PARENT === 1 ? randRange( 1, 4 ) : randRangeExclude( 2, 2 * D_PARENT - 1, [ D_PARENT ] )</var>
<var id="N_OFFSPRING">D_OFFSPRING === 1 ? randRange( 1, 4 ) : randRangeExclude( 2, 2 * D_OFFSPRING - 1, [ D_OFFSPRING ] )</var>
</div>
<var id="CODE_PARENT">D_PARENT === 1 ? N_PARENT : mixedOrImproper( N_PARENT, D_PARENT )</var>
<var id="CODE_OFFSPRING">D_OFFSPRING === 1 ? N_OFFSPRING : mixedOrImproper( N_OFFSPRING, D_OFFSPRING )</var>
<var id="PARENT">N_PARENT / D_PARENT</var>
<var id="OFFSPRING">N_OFFSPRING / D_OFFSPRING</var>
<var id="ANSWER">OFFSPRING / PARENT</var>
<var id="D">D_PARENT === 1 ? D_OFFSPRING : D_PARENT</var>
<var id="N_PARENT_EXPANDED">N_PARENT * ( D_PARENT === 1 ? D : 1 )</var>
<var id="N_OFFSPRING_EXPANDED">N_OFFSPRING * ( D_OFFSPRING === 1 ? D : 1 )</var>
</div>
<div class="problems">
<div>
<p class="question">The starting block below is <code><var>CODE_PARENT</var></code> units long. Use the tools to the right to convert the starting block into the goal block that is <code><var>CODE_OFFSPRING</var></code> units long. You can see your progress as the current block.</p>
<p>Starting Block:</p>
<div class="graphie" id="parent_block">
initSliceClone([ "current_block" ]);
init({ range: [ [ 0, 1 ], [ 0, 1 ] ],scale: [ 600, 25 ] });
rectchart( [ 1, 0 ], [ "#e00", "#999" ] );
</div>
<p>Current Block:</p>
<div class="graphie" id="current_block">
init({ range: [ [ 0, 1 ], [ 0, 1 ] ],scale: [ 600, 25 ] });
rectchart( [ 1, 0 ], [ "#e00", "#999" ] );
</div>
<p>Goal Block:</p>
<div class="graphie" id="goal_block">
init({ range: [ [ 0, 1 ], [ 0, 1 ] ],scale: [ 600 * ANSWER, 25 ] });
rectchart( [ 1, 0 ], [ BLUE, "#999" ] );
</div>
<div class="solution" data-type="multiple">
<div style="margin-bottom: 10px;">
Cut into
<input type="button" value="-" class="simple-button action-gradient" onclick="KhanUtil.changePieces( false )">
<span id="pieces" style="display: inline-block; width: 54px; text-align: center;">1 piece</span>
<input type="button" value="+" class="simple-button action-gradient" onclick="KhanUtil.changePieces( true )">
</div>
<div style="margin-bottom: 10px;">
<span style="display:inline-block; width: 42px;">Copy</span>
<input type="button" value="-" class="simple-button action-gradient" onclick="KhanUtil.changeTimes( false, 'current_block' )" disabled="disabled">
<span id="current_block_times" style="display: inline-block; width: 54px; text-align: center;">1 time</span>
<input type="button" value="+" class="simple-button action-gradient" onclick="KhanUtil.changeTimes( true, 'current_block' )">
</div>
<span class="sol" id="current_block_answer" style="display: none;"><var>roundTo( 3, ANSWER )</var></span>
</div>
<div class="hints">
<p data-if="CODE_PARENT !== fraction( N_PARENT, D)">The starting block of length <code><var>CODE_PARENT</var></code> units
can be rewritten as <code><var>fraction( N_PARENT_EXPANDED, D )</var></code>.</p>
<p data-if="CODE_OFFSPRING !== fraction( N_OFFSPRING, D)">The goal block of length <code><var>CODE_OFFSPRING</var></code> units
can be rewritten as <code><var>fraction( N_OFFSPRING_EXPANDED, D )</var></code>.</p>
<p>Cutting the starting block into <code>x</code> pieces is the same as dividing it by <code>x</code>.</p>
<div>
<p>Therefore cutting the starting block into <code><var>N_PARENT_EXPANDED</var></code> pieces is the same as:</p>
<p><code>\dfrac{<var>N_PARENT_EXPANDED</var>}{<var>D</var>} ÷ <var>N_PARENT_EXPANDED</var> =
\dfrac{<var>N_PARENT_EXPANDED</var>}{<var>D</var>} \cdot \dfrac{1}{<var>N_PARENT_EXPANDED</var>} = \dfrac{1}{<var>D</var>}</code></p>
</div>
<p>Copying the resulting block <code>y</code> times is the same as multiplying it by <code>y</code>.</p>
<div>
<p>Therefore copying the resulting block <code><var>N_OFFSPRING_EXPANDED</var></code> times is the same as:</p>
<p><code>\dfrac{1}{<var>D</var>} \cdot <var>N_OFFSPRING_EXPANDED</var> = \dfrac{<var>N_OFFSPRING_EXPANDED</var>}{<var>D</var>}</code></p>
</div>
<div>
<p>Notice that we end up with a block the same size as the goal block.</p>
<p><strong>Therefore the solution is to cut the starting block into <code><var>N_PARENT_EXPANDED</var></code> pieces and copy the resulting block <code><var>N_OFFSPRING_EXPANDED</var></code> times.</strong></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>