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
/
number_line.html
91 lines (87 loc) · 3.97 KB
/
number_line.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
<!DOCTYPE html>
<html data-require="math graphie word-problems interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>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="SCALE">randRange(1, 10)</var>
<var id="LOWER_BOUND">0</var>
<var id="UPPER_BOUND">10 * SCALE</var>
<var id="NUMBER">randRange(2, 10) * SCALE</var>
</div>
<div class="problems">
<div>
<div class="question">
<p class="question">Where is <code><var>NUMBER</var></code> on the number line?</p>
<div class="render-answer-area-here"></div>
<div class="graphie" id="number-line">
var scale = 40 / SCALE;
init({
range: [[LOWER_BOUND - (30 / scale), UPPER_BOUND + (30 / scale)], [-1, 1]],
scale: [40 / SCALE, 40]
});
line([LOWER_BOUND - (25 / scale), 0], [UPPER_BOUND + (25 / scale), 0], { arrows: "->" });
line([UPPER_BOUND + (25 / scale), 0], [LOWER_BOUND - (25 / scale), 0], { arrows: "->" });
for (var x = LOWER_BOUND; x <= UPPER_BOUND; x += SCALE) {
line([x, -0.2], [x, 0.2 ]);
}
style({ stroke: BLUE, strokeWidth: 3.5 });
line( [ 0, -0.2], [0, 0.2]);
label( [ 0, -0.53 ], "0", "center");
label( [ SCALE, -0.53 ], SCALE, "center");
addMouseLayer();
var snap = SCALE / 4;
if (SCALE === 3) {
snap = SCALE / 3;
}
graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: snap });
graph.movablePoint.onMove = function( x, y ) {
return [ min( max( LOWER_BOUND, x ), UPPER_BOUND ), y ];
};
</div>
</div>
<div class="solution" data-type="custom">
<span class="instruction"> Move the orange dot to select your answer. </span>
<div class="guess"> graph.movablePoint.coord[0] </div>
<div class="validator-function">
if (guess === 0) {
return "";
}
return abs(NUMBER - guess) < 0.001;
</div>
<div class="show-guess">
graph.movablePoint.setCoord([guess, 0]);
</div>
</div>
<div class="hints">
<p>We know each tick mark is <code><var>SCALE</var></code> because <code>0</code> and <code><var>SCALE</var></code> are labeled.</p>
<div>
<p>Label the rest of the number line.</p>
<div class="graphie" data-update="number-line">
for (var x = LOWER_BOUND + 2 * SCALE; x <= UPPER_BOUND; x += SCALE) {
if (x !== NUMBER) {
label([x, -0.53], x, "center");
} else {
graph.num = label([x, -0.53], x, "center");
}
}
</div>
</div>
<div>
<p>The orange number shows where <code><var>NUMBER</var></code> is on the number line.</p>
<div class="graphie" data-update="number-line">
graph.num.remove();
label([ NUMBER, -0.53], NUMBER, "center", { color: ORANGE });
graph.movablePoint.moveTo(NUMBER, 0);
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>