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
/
decimals_on_the_number_line_1.html
110 lines (94 loc) · 4.79 KB
/
decimals_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
<!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>Decimals on the number line 1</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="LOWER_BOUND">0</var>
<var id="UPPER_BOUND">1</var>
<var id="MARK_INCREMENT"> 0.1 </var>
<var id="TENTHS"> randRange(1, 9) </var>
<var id="SOLUTION"> TENTHS * MARK_INCREMENT </var>
<var id="SOLN_TXT"> SOLUTION.toFixed(1) </var>
</div>
<div class="problems">
<div>
<div class="question">
<p>Move the <strong><code>\color{orange}{\text{orange dot}}</code></strong> to <strong><code>\color{orange}{<var>SOLN_TXT</var>}</code></strong> on the number line.</p>
<div class="graphie" id="number-line">
init({
range: [ [LOWER_BOUND - 0.3, UPPER_BOUND + 0.4], [-1, 1] ],
scale: [350, 40]
});
style({arrows: ">"});
line( [ 0, 0 ], [ UPPER_BOUND + 0.06, 0 ] );
style({arrows: "->"});
line( [ 0, 0 ], [ LOWER_BOUND - 0.06, 0 ] );
style({arrows: ""});
for ( var x = LOWER_BOUND; x <= UPPER_BOUND; x += MARK_INCREMENT ) {
line( [ x, -0.2 ], [ x, 0.2 ] );
}
style({ stroke: BLUE, strokeWidth: 3.5 });
line( [ LOWER_BOUND, -0.2], [LOWER_BOUND, 0.2]);
label( [ LOWER_BOUND, -0.53 ], LOWER_BOUND, "center", { color: BLUE });
line( [ UPPER_BOUND, -0.2], [UPPER_BOUND, 0.2]);
label( [ UPPER_BOUND, -0.53 ], UPPER_BOUND, "center", { color: BLUE });
addMouseLayer();
graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: 0.025 });
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( 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 0 to 1, divided into 10 equal pieces.</p>
<div>
<p>The line is divided into 10 pieces, which means:</p>
<p><code>\color{green}{\text{piece of line}}</code> = <code>\color{red}{<var>MARK_INCREMENT</var>}</code>
</div>
<p><code>\color{orange}{<var>SOLN_TXT</var>}</code> =
<code>\color{red}{<var>MARK_INCREMENT</var>}</code> * <code>\color{blue}{<var>TENTHS</var>}</code></p>
<p>Therefore, moving the <code>\color{orange}{\text{orange dot}}</code>
<code>\color{blue}{<var>TENTHS</var>}</code> place<var>plural(TENTHS)</var> will put it at the position
<code>\color{orange}{<var>SOLN_TXT</var>}</code>.</p>
<div>
<div class="graphie" data-update="number-line">
var MI = MARK_INCREMENT;
for ( var x = LOWER_BOUND + MI; x < UPPER_BOUND - MI/2; x += MI ) {
label( [ LOWER_BOUND + x, -0.53 ], x.toFixed(1) , "center");
}
</div>
</div>
<div>
<div class="graphie" data-update="number-line">
style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "->" });
line( [ 0, 0 ], [ SOLUTION, 0 ] );
graph.movablePoint.visibleShape.toFront();
label( [ TENTHS, -0.53 ], SOLN_TXT, "center", { color: "orange" });
graph.movablePoint.moveTo( SOLUTION, 0 );
</div>
<p>The orange number shows where <code>\color{orange}{<var>SOLN_TXT</var>}</code> is on the number line.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>