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
/
fractions_on_the_number_line_1.html
114 lines (105 loc) · 5.41 KB
/
fractions_on_the_number_line_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
<!DOCTYPE html>
<html data-require="math math-format graphie word-problems interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fractions on the number line 1</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, 8)</var>
<var id="NUMERATOR" data-ensure="NUMERATOR / DENOMINATOR <= 3">randRange(1, 10)</var>
<var id="LOWER_BOUND">0</var>
<var id="UPPER_BOUND">ceil(NUMERATOR / DENOMINATOR)</var>
<var id="LOWER_SCALED">LOWER_BOUND * DENOMINATOR</var>
<var id="UPPER_SCALED">UPPER_BOUND * DENOMINATOR</var>
<var id="SOLUTION">NUMERATOR / DENOMINATOR</var>
<var id="ORANGE_DOT">i18n._("orange dot")</var>
</div>
<div class="problems">
<div>
<div class="question">
<p>Move the <strong><code>\orange{\text{<var>ORANGE_DOT</var>}}</code></strong> to
<strong><code>\orange{<var>fraction(NUMERATOR, DENOMINATOR)</var>}</code></strong> on the number line.</p>
<div class="graphie" id="number-line">
init({
range: [[LOWER_BOUND - 0.2 * UPPER_BOUND, UPPER_BOUND * 1.2], [-1.5, 0.5]],
scale: [360 / UPPER_BOUND, 40]
});
// Draw Number Line
style({arrows: ">"});
line([LOWER_BOUND, 0], [UPPER_BOUND + 0.1 * UPPER_BOUND, 0]);
style({arrows: "<"});
line([UPPER_BOUND, 0], [LOWER_BOUND - 0.1 * UPPER_BOUND, 0]);
style({arrows: ""});
// Draw Number Line Tick marks
for ( var x = LOWER_BOUND; x <= UPPER_BOUND; x += 1 / DENOMINATOR ) {
line( [ x, -0.2 ], [ x, 0.2 ] );
}
// Integer tick marks
style({ stroke: BLUE, strokeWidth: 3.5 });
for (var i = 0; i <= UPPER_BOUND; i++) {
line([i, -0.2], [i, 0.2]);
if (i === NUMERATOR / DENOMINATOR) {
graph.tempLabel = label([i, -0.53 ], i, "center", { color: BLUE });
} else {
label([i, -0.53 ], i, "center", { color: BLUE });
}
}
addMouseLayer();
graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: 0.25 / DENOMINATOR });
graph.movablePoint.onMove = function( x, y ) {
return [ min( max( LOWER_BOUND, x ), UPPER_BOUND ), y ];
};
</div>
</div>
<div class="solution" data-type="custom">
<div class="guess"> graph.movablePoint.coord[0] </div>
<div class="validator-function">
if ( guess === 0 ) {
return "";
}
return abs( SOLUTION - guess ) < 0.001;
</div>
<div class="show-guess">
graph.movablePoint.setCoord( [ guess, 0 ] );
</div>
</div>
<div class="hints">
<p>Above we've drawn the number line from <code>0</code> to <code><var>UPPER_BOUND</var></code>, divided into equal pieces.</p>
<p>
Between <code>0</code> and <code>1</code>, the number line is divided into <code><var>DENOMINATOR</var></code> equal pieces,
so each piece represents <code><var>fraction(1, DENOMINATOR)</var></code>.
</p>
<div>
<div class="graphie" data-update="number-line">
style({ stroke: BLUE, fill: BLUE, strokeWidth: 3.5, arrows: "->" });
line( [ 0, 0 ], [ SOLUTION, 0 ] );
graph.movablePoint.visibleShape.toFront();
</div>
<p data-if="isSingular(NUMERATOR)">
So we just move the orange dot <code>\blue{<var>NUMERATOR</var>}</code> tick mark to get to
<code><var>fraction(NUMERATOR, DENOMINATOR)</var></code>.
</p>
<p data-else="">
We move the orange dot <code>\blue{<var>NUMERATOR</var>}</code> tick marks because <code><var>fraction(NUMERATOR, DENOMINATOR)</var></code>
is the same as <code><var>NUMERATOR</var></code> copies of <code><var>fraction(1, DENOMINATOR)</var></code>.
</p>
</div>
<div>
<div class="graphie" data-update="number-line">
label( [ SOLUTION, -0.83 ], fraction(NUMERATOR, DENOMINATOR), "center", { color: ORANGE });
if (graph.tempLabel) {
graph.tempLabel.remove();
}
graph.movablePoint.moveTo( SOLUTION, 0 );
</div>
<p>The orange number shows where <code>\orange{<var>fraction(NUMERATOR, DENOMINATOR)</var>}</code> is on the number line.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>