This repository has been archived by the owner on May 11, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 863
/
recognizing_fractions_0.5.html
122 lines (116 loc) · 5.96 KB
/
recognizing_fractions_0.5.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
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Recognizing fractions 0.5</title>
<script data-main="../local-only/main.js" src="../local-only/require.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="vars">
<var id="NUM_1">randRange(1, 9)</var>
<var id="DEN_1">randRange(3, 9)</var>
<var id="WHOLES">ceil(NUM_1 / DEN_1)</var>
<var id="FINAL">NUM_1 - (WHOLES - 1) * DEN_1</var>
</div>
<div class="problems">
<div id="pie-chart">
<div class="question">
<p data-if="WHOLES === 1">
What fraction of the circle is shaded red?
<span class="render-answer-area-here"></span>
</p>
<div data-else="">
<p>This circle represents one whole.</p>
<div class="graphie">
init({
range: [[0, 6], [-2.1, 2.1]],
scale: 25
});
piechart([0, DEN_1], [RED, "#999"], 2, false, 3, 0);
</div>
<p>
What fraction is shaded red below?
<span class="render-answer-area-here"></span>
<p>
</div>
<div class="graphie">
init({
range: [[0, 6 * WHOLES], [-2.1, 2.1]],
scale: 25
});
for (var i = 0; i < WHOLES; i++) {
if (i === 0) {
piechart([FINAL, DEN_1 - FINAL], [RED, "#999"], 2, false, (i + 1) * 3, 0);
} else {
piechart([DEN_1, 0], [RED, "#999"], 2, false, i * 6 + 3, 0);
}
}
</div>
</div>
<p class="solution" data-simplify="optional"><var>NUM_1 / DEN_1</var></p>
<div class="hints">
<p>To find the numerator, count the red slices.</p>
<p data-if="isSingular(NUM_1)">There is <code><var>NUM_1</var></code> red slice.</p>
<p data-else="">There are <code><var>NUM_1</var></code> red slices.</p>
<p data-if="WHOLES === 1">To find the denominator, count the total number of slices in the circle.</p>
<p data-else="">To find the denominator, count the total number of slices in a circle.</p>
<p data-if="WHOLES === 1">There are <code><var>DEN_1</var></code> slices in the circle.</p>
<p data-else="">There are <code><var>DEN_1</var></code> slices in a circle.</p>
<p>So the answer is <code>\dfrac{\red{<var>NUM_1</var>}}{<var>DEN_1</var>}</code>.</p>
</div>
</div>
<div id="rectangle-area">
<div class="question">
<p data-if="WHOLES === 1">
What fraction of the rectangle is shaded red?
<span class="render-answer-area-here"></span>
</p>
<div data-else="">
<p>This rectangle represents one whole.</p>
<div class="graphie">
init({
range: [[0, 1], [0, 1]],
scale: [250, 25]
});
rectchart([0, DEN_1], [RED, "#999"], 0);
</div>
<p>
What fraction is shaded red below?
<span class="render-answer-area-here"></span>
<p>
</div>
<div class="graphie">
init({
range: [[0, 1], [0, 2 * WHOLES - 1]],
scale: [250, 25]
});
for (var i = 0; i < WHOLES; i++) {
if (i === 0) {
rectchart([FINAL, DEN_1 - FINAL], [RED, "#999"], i * 2);
} else {
rectchart([DEN_1, 0], [RED, "#999"], i * 2);
}
}
</div>
</div>
<p class="solution" data-simplify="optional"><var>NUM_1 / DEN_1</var></p>
<div class="hints">
<p>To find the numerator, count the red blocks.</p>
<p data-if="isSingular(NUM_1)">There is <code><var>NUM_1</var></code> red block.</p>
<p data-else="">There are <code><var>NUM_1</var></code> red blocks.</p>
<p data-if="WHOLES === 1">To find the denominator, count the total blocks in the rectangle.</p>
<p data-else="">To find the denominator, count the total blocks in a rectangle.</p>
<p data-if="WHOLES === 1">There are <code><var>DEN_1</var></code> blocks in the rectangle.</p>
<p data-else="">There are <code><var>DEN_1</var></code> blocks in a rectangle.</p>
<p>So the answer is <code>\dfrac{\red{<var>NUM_1</var>}}{<var>DEN_1</var>}</code>.</p>
</div>
</div>
</div>
</div>
</body>
</html>