This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
fractions_cut_and_copy_2.html
207 lines (183 loc) · 12.1 KB
/
fractions_cut_and_copy_2.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!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 2</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<div data-ensure="SLICES < 20 && isInt(SLICES)">
<var id="D_PARENT">randRangeWeighted(3, 8, 1, 1 / 6)</var>
<var id="N_PARENT" data-ensure="getGCD(D_PARENT, N_PARENT) === 1">
D_PARENT === 1 ? randRange(1, 2) : randRange(D_PARENT + 1, 2 * D_PARENT - 1)
</var>
<var id="PARENT">N_PARENT / D_PARENT</var>
<var id="D_OFFSPRING_1">randRange(3, 8)</var>
<var id="D_OFFSPRING_2" data-ensure="D_OFFSPRING_1 !== D_OFFSPRING_2">randRange(3, 8)</var>
<var id="N_OFFSPRING_1" data-ensure="getGCD(D_OFFSPRING_1, N_OFFSPRING_1) === 1 && PARENT > N_OFFSPRING_1 / D_OFFSPRING_1">
randRangeExclude(2, 2 * D_OFFSPRING_1 - 1, [D_OFFSPRING_1])
</var>
<var id="N_OFFSPRING_2" data-ensure="getGCD(D_OFFSPRING_2, N_OFFSPRING_2) === 1 && PARENT > N_OFFSPRING_2 / D_OFFSPRING_2">
randRangeExclude(2, 2 * D_OFFSPRING_2 - 1, [ D_OFFSPRING_2])
</var>
<var id="SLICES">N_PARENT * getLCM(D_OFFSPRING_1, D_OFFSPRING_2) / D_PARENT</var>
</div>
<var id="CODE_PARENT">D_PARENT === 1 ? N_PARENT : mixedOrImproper(N_PARENT, D_PARENT)</var>
<var id="CODE_OFFSPRING_1">mixedOrImproper(N_OFFSPRING_1, D_OFFSPRING_1)</var>
<var id="CODE_OFFSPRING_2">mixedOrImproper(N_OFFSPRING_2, D_OFFSPRING_2)</var>
<var id="OFFSPRING_1">N_OFFSPRING_1 / D_OFFSPRING_1</var>
<var id="OFFSPRING_2">N_OFFSPRING_2 / D_OFFSPRING_2</var>
<var id="ANSWER_1">OFFSPRING_1 / PARENT</var>
<var id="ANSWER_2">OFFSPRING_2 / PARENT</var>
<var id="LCM">getLCM(D_OFFSPRING_1, D_OFFSPRING_2)</var>
<var id="PARENT_MULTI">LCM / D_PARENT</var>
<var id="OFFSPRING_1_MULTI">LCM / D_OFFSPRING_1</var>
<var id="OFFSPRING_2_MULTI">LCM / D_OFFSPRING_2</var>
<var id="UNIT">new Plural(function(n) {
return i18n.ngettext("unit", "units", n);
})</var>
</div>
<div class="problems">
<div>
<p class="question">
<span data-if="isSingular(CODE_PARENT)">
The starting block below is <code><var>CODE_PARENT</var></code> unit long.
</span><span data-else="">
The starting block below is <code><var>CODE_PARENT</var></code> units long.
</span>
Use the tools below to convert the starting block into both of the goal blocks that are
<code><var>CODE_OFFSPRING_1</var></code> units long and <code><var>CODE_OFFSPRING_2</var></code> units long.
The current blocks show your progress.
</p>
<p class="render-answer-area-here"></p>
<p>Starting Block:</p>
<div class="graphie" id="parent_block">
initSliceClone(["current_block_1", "current_block_2"]);
init({range: [[0, 1], [0, 1]], scale: [ 500, 25]});
rectchart([1, 0], [RED, "#999"]);
</div>
<p>Current Block 1:</p>
<div class="graphie" id="current_block_1">
init({range: [[0, 1], [0, 1]], scale: [500, 25]});
rectchart([1, 0], [RED, "#999"]);
</div>
<p>Goal Block 1:</p>
<div class="graphie" id="goal_block_2">
init({range: [[0, 1], [0, 1]], scale: [500 * ANSWER_1, 25]});
rectchart([1, 0], [BLUE, "#999"]);
</div>
<p>Current Block 2:</p>
<div class="graphie" id="current_block_2">
init({range: [[0, 1], [0, 1]], scale: [500, 25]});
rectchart([1, 0], [RED, "#999"]);
</div>
<p>Goal Block 2:</p>
<div class="graphie" id="goal_block_2">
init({range: [[0, 1], [0, 1]], scale: [500 * ANSWER_2, 25]});
rectchart([1, 0], [ORANGE, "#999"]);
</div>
<div class="solution" data-type="custom">
<div class="instruction" style="padding-bottom: 20px; width: 300px;">
<div style="clear: both;">
<div style="float: left;">Cut Starting Block into: <span id="pieces">1 piece</span></div>
<div style="float: right; margin-bottom: 4px;">
<input class="simple-button mini-button" onclick="KhanUtil.changePieces(false)" type="button" value="-">
<input class="simple-button mini-button" onclick="KhanUtil.changePieces(true)" type="button" value="+">
</div>
</div>
<div style="clear: both;">
<div style="float: left;">Copy Current Block 1: <span id="current_block_1_times">1 time</span></div>
<div style="float: right; margin-bottom: 4px;">
<input class="simple-button mini-button" onclick="KhanUtil.changeTimes(false, 'current_block_1')" type="button" value="-">
<input class="simple-button mini-button" onclick="KhanUtil.changeTimes(true, 'current_block_1')" type="button" value="+">
</div>
</div>
<div style="clear: both;">
<div style="float: left;">Copy Current Block 2: <span id="current_block_2_times">1 time</span></div>
<div style="float: right; margin-bottom: 4px;">
<input class="simple-button mini-button" onclick="KhanUtil.changeTimes(false, 'current_block_2')" type="button" value="-">
<input class="simple-button mini-button" onclick="KhanUtil.changeTimes(true, 'current_block_2')" type="button" value="+">
</div>
</div>
</div>
<div class="guess">
[pieces, times['current_block_1'], times['current_block_2']]
</div>
<div class="validator-function">
var guess1 = roundTo(3, guess[1] / guess[0]),
guess2 = roundTo(3, guess[2] / guess[0]),
answer1 = roundTo(3, ANSWER_1);
answer2 = roundTo(3, ANSWER_2);
return guess1 === answer1 && guess2 === answer2;
</div>
<div class="show-guess">
pieces = guess[0];
times['current_block_1'] = guess[1];
times['current_block_2'] = guess[2];
updateGraphAndAnswer();
</div>
<div class="show-guess-solutionarea">
guess = guess.length ? guess : [1, 1, 1];
$('#pieces').text(plural(guess[0], 'piece'));
$('#current_block_1_times').text(plural(guess[1], 'time'));
$('#current_block_2_times').text(plural(guess[2], 'time'));
</div>
</div>
<div class="hints">
<p>We want to cut the starting block into a piece that can be copied into both goal block 1 and goal block 2.</p>
<p>
The least common denominator of <code><var>D_OFFSPRING_1</var></code> and <code><var>D_OFFSPRING_2</var></code>
(the denominators of the goal blocks) is <code><var>LCM</var></code>. Therefore you can copy a block
<code>\dfrac{1}{<var>LCM</var>}</code> units long to make both goal blocks.
</p>
<div data-if="CODE_PARENT !== fraction(N_PARENT, D_PARENT) && D_PARENT !== 1">
<p>The starting block has a length of <code><var>CODE_PARENT</var></code>, which can be rewritten as:</p>
<p><code>\qquad<var>fraction(D_PARENT, D_PARENT)</var> + <var>fraction(N_PARENT - D_PARENT, D_PARENT)</var> =
<var>fraction(N_PARENT, D_PARENT)</var></code>
</p>
</div>
<div data-if="PARENT_MULTI !== 1">
<p>We can rewrite the starting block length in terms of <code>\dfrac{1}{<var>LCM</var>}</code> units:</p>
<p><code>\qquad <var>fraction(N_PARENT, D_PARENT)</var> \times <var>fraction(PARENT_MULTI, PARENT_MULTI)</var> =
<var>fraction(SLICES, LCM)</var></code></p>
</div>
<p>
If we cut the starting block into <code><var>SLICES</var></code> equal pieces,
each piece will have a length of <code><var>fraction(1, LCM)</var></code> units.
</p>
<div data-if="CODE_OFFSPRING_1 !== fraction(N_OFFSPRING_1, D_OFFSPRING_1)">
<p>Goal block 1 has a length of <code><var>CODE_OFFSPRING_1</var></code> units, which can be rewritten as:</p>
<p><code>\qquad<var>fraction(D_OFFSPRING_1, D_OFFSPRING_1)</var> + <var>fraction(N_OFFSPRING_1 - D_OFFSPRING_1, D_OFFSPRING_1)</var> =
<var>fraction(N_OFFSPRING_1, D_OFFSPRING_1)</var></code></p>
</div>
<div data-if="OFFSPRING_1_MULTI !== 1">
<p>We can rewrite the goal block 1 length in terms of <code>\dfrac{1}{<var>LCM</var>}</code> units:</p>
<p><code>\qquad <var>fraction(N_OFFSPRING_1, D_OFFSPRING_1)</var> \times <var>fraction(OFFSPRING_1_MULTI, OFFSPRING_1_MULTI)</var> =
<var>fraction(OFFSPRING_1_MULTI * N_OFFSPRING_1, LCM)</var></code></p>
</div>
<p>
If we copy a piece of length <code>\dfrac{1}{<var>LCM</var>}</code> units <code><var>OFFSPRING_1_MULTI * N_OFFSPRING_1</var></code> times
we get <code><var>fraction(OFFSPRING_1_MULTI * N_OFFSPRING_1, LCM)</var></code> units, which is the length of goal block 1.
</p>
<div data-if="OFFSPRING_2_MULTI !== 1">
<p>We can rewrite the goal block 2 length in terms of <code>\dfrac{1}{<var>LCM</var>}</code> units:</p>
<p><code>\qquad <var>fraction(N_OFFSPRING_2, D_OFFSPRING_2)</var> \times <var>fraction(OFFSPRING_2_MULTI, OFFSPRING_2_MULTI)</var> =
<var>fraction(OFFSPRING_2_MULTI * N_OFFSPRING_2, LCM)</var></code></p>
</div>
<p>
If we copy a piece of length <code>\dfrac{1}{<var>LCM</var>}</code> units <code><var>OFFSPRING_2_MULTI * N_OFFSPRING_2</var></code> times
we get <code><var>fraction(OFFSPRING_2_MULTI * N_OFFSPRING_2, LCM)</var></code> units, which is the length of goal block 2.
</p>
<p>
Therefore the solution is to cut the starting block into <code><var>SLICES</var></code> pieces, copy current block 1
<code><var>OFFSPRING_1_MULTI * N_OFFSPRING_1</var></code> times and current block 2
<code><var>OFFSPRING_2_MULTI * N_OFFSPRING_2</var></code> times.
</p>
</div>
</div>
</div>
</div>
</body>
</html>