This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
dividing_fractions_0.5.html
71 lines (61 loc) · 3.04 KB
/
dividing_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
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dividing fractions by whole numbers</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="DENOMINATOR">randRange(2, 9)</var>
<var id="DENOMINATOR_FRACTION">1 / DENOMINATOR</var>
<var id="INTEGER">randRange(2, 10)</var>
<var id="INTEGER_FRACTION">1 / INTEGER</var>
</div>
<div class="problems">
<div>
<div class="question"><p><code>\large{\dfrac{1}{<var>DENOMINATOR</var>} \div <var>INTEGER</var> = {?}}</code></p></div>
<div class="solution" data-type="rational"><var>1 / (DENOMINATOR * INTEGER)</var></div>
</div>
</div>
<div class="hints">
<div class="graphie" id="fraction">
init({
range: [[-0.05, 1], [0, 1.1]],
scale: 360
});
rectchart([1, DENOMINATOR - 1], [ RED, "#CCC" ]);
style({ color: RED }, function() {
label([DENOMINATOR_FRACTION / 2, 1.05], "\\frac{" + 1 + "}{" + DENOMINATOR + "}", "center" );
});
</div>
<div>
<p>Divide <code>\red{\dfrac{1}{<var>DENOMINATOR</var>}}</code> into <code>\blue{<var>INTEGER</var>}</code> pieces.</p>
<div class="graphie" data-update="fraction">
rect(0, 0, DENOMINATOR_FRACTION, INTEGER_FRACTION, {fill: BLUE, stroke: KhanUtil._BACKGROUND});
style({ color: BLUE }, function() {
label([0, 1 / (2 * INTEGER)], "\\frac{" + 1 + "}{" + INTEGER + "}", "left" );
});
for (var i=1; i < INTEGER; i++) {
line([0, i * INTEGER_FRACTION], [DENOMINATOR_FRACTION, i * INTEGER_FRACTION], {stroke: KhanUtil._BACKGROUND});
}
</div>
</div>
<div>
<p>Each piece is <code>\green{\dfrac{1}{<var>DENOMINATOR * INTEGER</var>}}</code> of the whole.</p>
<div class="graphie" data-update="fraction">
rect(0, 0, DENOMINATOR_FRACTION, 1, {fill: "#CCC", stroke: KhanUtil._BACKGROUND, opacity: 0.7});
rect(0, 0, DENOMINATOR_FRACTION, INTEGER_FRACTION, {fill: GREEN, stroke: KhanUtil._BACKGROUND});
style({ color: BLACK }, function() {
label([DENOMINATOR_FRACTION/2, 1 / (2 * INTEGER)], "\\frac{" + 1 + "}{" + (DENOMINATOR * INTEGER) + "}", "center" );
});
for (var i=1; i < INTEGER; i++) {
line([0, i * INTEGER_FRACTION], [1, i * INTEGER_FRACTION], {stroke: KhanUtil._BACKGROUND});
}
</div>
</div>
</div>
</div>
</body>
</html>