This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
fractions_cut_and_copy_1.html
113 lines (102 loc) · 6.82 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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: [500, 25 ]});
rectchart([1, 0], ["#e00", "#999"]);
</div>
<p>Current Block:</p>
<div class="graphie" id="current_block">
init({ range: [[0, 1], [0, 1] ], scale: [500, 25]});
rectchart([1, 0], ["#e00", "#999"]);
</div>
<p>Goal Block:</p>
<div class="graphie" id="goal_block">
init({range: [[0, 1], [0, 1]], scale: [500 * ANSWER, 25]});
rectchart([1, 0], [BLUE, "#999"]);
</div>
<div class="solution" data-type="custom">
<div class="instruction">
<div style="margin-bottom: 10px;">
Cut into
<input type="button" value="-" class="simple-button" 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" 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" 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" onclick="KhanUtil.changeTimes(true, 'current_block')">
</div>
</div>
<div class="guess">
[pieces, times['current_block']]
</div>
<div class="validator-function">
return roundTo(3, guess[1] / guess[0]) === roundTo(3, ANSWER);
</div>
<div class="show-guess">
pieces = guess[0];
times['current_block'] = guess[1];
updateGraphAndAnswer();
</div>
<div class="show-guess-solutionarea">
$('#pieces').text(plural(guess[0], 'piece'));
$('#current_block_times').text(plural(guess[1], 'time'));
</div>
</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>