This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
comparing_fractions_1.html
121 lines (114 loc) · 4.51 KB
/
comparing_fractions_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
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Comparing fractions 1</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<!--
Compares fractions that have the same numerator or have the same denominator.
TODO: would like to draw overlapping circles or rectangle slices for hints.
-->
<div class="exercise">
<div class="problems">
<div id="same-numerator">
<div class="vars" data-ensure="DEN_1 !== DEN_2">
<var id="NUM_1">randRange( 1, 14 )</var>
<var id="DEN_1">randRange( NUM_1 + 1, 15 )</var>
<var id="NUM_2">NUM_1</var>
<var id="DEN_2">randRange( NUM_2 + 1, 15 )</var>
<var id="SOLUTION">(function() {
if ( DEN_1 < DEN_2 ) {
return ">";
} else {
return "<";
}
})()</var>
<var id="MORE">DEN_1 > DEN_2 ? "more" : "fewer"</var>
<var id="SMALLER">DEN_1 > DEN_2 ? "smaller" : "bigger"</var>
<var id="LESS">DEN_1 > DEN_2 ? "less" : "more"</var>
<var id="BIGGER">SMALLER === "smaller" ? "bigger" : "smaller"</var>
</div>
<div class="problem">
<p>Fill in the blank.</p>
<p>
<code>\dfrac{<var>NUM_1</var>}{<var>DEN_1</var>}</code>
____ <code>\dfrac{<var>NUM_2</var>}{<var>DEN_2</var>}</code>
</p>
</div>
<p class="solution"><code><var>SOLUTION</var></code></p>
<ul class="choices" data-category="true">
<li><code><</code></li>
<li><code>></code></li>
</ul>
<div class="hints">
<div>
<p>This is like comparing two equally sized pizzas where one is cut into <var>DEN_1</var> equal slices and the other is cut into <var>DEN_2</var> equal slices.</p>
<div style="height: 150px;">
<div class="graphie" style="float: left">
init({ range: [ [-3, 3], [-3, 3] ], scale: 25 });
piechart( [NUM_1, DEN_1 - NUM_1], ["#e00", "#999"], 2 );
</div>
<div class="graphie" style="float: left">
init({ range: [ [-3, 3], [-3, 3] ], scale: 25 });
piechart( [NUM_2, DEN_2 - NUM_2], ["#e00", "#999"], 2 );
</div>
</div>
</div>
<p>Note that cutting a pizza into more slices will result in smaller slices.</p>
<p>The left fraction represents a pizza with <var>MORE</var> slices, and so each slice is <var>SMALLER</var>.</p>
<p><var>NUM_1</var> <var>SMALLER</var> slice<var>plural( NUM_1 )</var> is <var>LESS</var> pizza than <var>NUM_2</var> <var> BIGGER</var> slice<var>plural( NUM_2 )</var>.</p>
<p>So, <code>\dfrac{<var>NUM_1</var>}{<var>DEN_1</var>} <var>SOLUTION</var> \dfrac{<var>NUM_2</var>}{<var>DEN_2</var>}</code>.</p>
</div>
</div>
<div id="same-denominator">
<div class="vars" data-ensure="NUM_1 !== NUM_2">
<var id="NUM_1">randRange( 1, 14 )</var>
<var id="DEN_1">randRange( NUM_1 + 1, 15 )</var>
<var id="DEN_2">DEN_1</var>
<var id="NUM_2">randRange( 1, DEN_2 - 1 )</var>
<var id="SOLUTION">(function() {
if ( NUM_1 < NUM_2 ) {
return "<";
} else {
return ">";
}
})()</var>
<var id="LESS">NUM_1 < NUM_2 ? "less" : "more"</var>
</div>
<div class="problem">
<p>Fill in the blank.</p>
<p>
<code>\dfrac{<var>NUM_1</var>}{<var>DEN_1</var>}</code>
____ <code>\dfrac{<var>NUM_2</var>}{<var>DEN_2</var>}</code>
</p>
</div>
<p class="solution"><code><var>SOLUTION</var></code></p>
<ul class="choices" data-category="true">
<li><code><</code></li>
<li><code>></code></li>
</ul>
<div class="hints">
<div>
<p>This is like considering two equally sized pizzas that have been cut into <var>DEN_1</var> equal slices.</p>
<p>Since both pizzas have the same number of slices, all the slices are the same size.</p>
<div style="height: 150px;">
<div class="graphie" style="float: left">
init({ range: [ [-3, 3], [-3, 3] ], scale: 25 });
piechart( [NUM_1, DEN_1 - NUM_1], ["#e00", "#999"], 2 );
</div>
<div class="graphie" style="float: left">
init({ range: [ [-3, 3], [-3, 3] ], scale: 25 });
piechart( [NUM_2, DEN_2 - NUM_2], ["#e00", "#999"], 2 );
</div>
</div>
</div>
<p><var>plural( NUM_1, "slice" )</var> is <var>LESS</var> pizza than <var>plural( NUM_2, "slice" )</var>.</p>
<p>So, <code>\dfrac{<var>NUM_1</var>}{<var>DEN_1</var>} <var>SOLUTION</var> \dfrac{<var>NUM_2</var>}{<var>DEN_2</var>}</code>.</p>
</div>
</div>
</div>
</div>
</body>
</html>