forked from Khan/khan-exercises
/
decimals_on_the_number_line_2.html
108 lines (95 loc) · 4.31 KB
/
decimals_on_the_number_line_2.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
<!DOCTYPE html>
<html data-require="math math-format graphie word-problems interactive">
<head>
<meta charset="UTF-8" />
<title>Decimals on the number line 2</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="LOWER_BOUND">-2</var>
<var id="UPPER_BOUND">2</var>
<var id="LOWER_VALUE">LOWER_BOUND</var>
<var id="UPPER_VALUE">UPPER_BOUND</var>
<var id="SOLUTION">roundTo(1, randRangeNonZero(-19, 19) / 10)</var>
<var id="SOLUTION_DECIMAL">roundTo(1, SOLUTION % 1)</var>
<var id="SOLUTION_WHOLE">SOLUTION - SOLUTION_DECIMAL</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>SOLUTION</var>}</code></strong> on the number line. The distance between adjacent tick marks is 0.5.</p>
<div class="graphie" id="number-line">
init({
range: [ [LOWER_BOUND - 1, UPPER_BOUND + 1], [-1, 1] ],
scale: [120, 40]
});
style({arrows: ">"});
line( [ 0, 0 ], [ UPPER_BOUND + 0.25, 0 ] );
style({arrows: "->"});
line( [ 0, 0 ], [ LOWER_BOUND - 0.25, 0 ] );
style({arrows: ""});
for ( var x = LOWER_BOUND; x <= UPPER_BOUND; x+=0.5 ) {
var markLength;
x % 1 === 0 ? markLength = 0.2 : markLength = 0.1
line( [ x, -markLength ], [ x, markLength ] );
}
style({ stroke: GREEN, strokeWidth: 3.5 });
line( [ LOWER_BOUND, -0.2], [LOWER_BOUND, 0.2]);
label( [ LOWER_BOUND, -0.53 ], LOWER_BOUND, "center", { color: GREEN });
line( [ UPPER_BOUND, -0.2], [UPPER_BOUND, 0.2]);
label( [ UPPER_BOUND, -0.53 ], UPPER_BOUND, "center", { color: GREEN });
line( [ 0, -0.2], [0, 0.2]);
label( [ 0, -0.53 ], "0", "center", { color: GREEN });
addMouseLayer();
this.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: 0.1 });
movablePoint.onMove = function( x, y ) {
if (x < LOWER_BOUND || UPPER_BOUND < x) {
return false; // don't allow the point to move past the bounds
}
jQuery("#solutionarea input").val( x );
};
</div>
</div>
<div class="solution" data-type="multiple">
<span>Move the orange dot to select your answer.</span>
<div class="sol" data-type="decimal" style="visibility:hidden"><var>SOLUTION</var></div>
</div>
<div class="hints">
<p> Because <code>\color{orange}{<var>SOLUTION</var>}</code> is <span data-if="SOLUTION > 0">positive</span><span data-else>negative</span> the orange dot will be to the <span data-if="SOLUTION > 0">right</span><span data-else>left</span> of 0.</p>
<span data-if="abs(SOLUTION) > 1">
<div>
<p>Separate the decimal from the whole number:</p>
<p><code>\color{orange}{<var>SOLUTION</var>}</code> = <code>\color{blue}{<var>SOLUTION_WHOLE</var>}</code> + <code>\color{blue}{<var>SOLUTION_DECIMAL</var>}</code>
</div>
</span>
<div>
<p>Therefore, we know <code>\color{orange}{<var>SOLUTION</var>}</code> lies between <code>\color{orange}{<var>SOLUTION_WHOLE</var>}</code> and <code>\color{orange}{<var>SOLUTION_WHOLE + (SOLUTION > 0 ? 1 : -1)</var>}</code> on the number line.</p>
<div class="graphie" data-update="number-line">
style({ stroke: "#FFA500", strokeWidth: 3.5 });
line( [SOLUTION_WHOLE, -0.2], [SOLUTION_WHOLE, 0.2]);
line( [SOLUTION_WHOLE + (SOLUTION > 0 ? 1 : -1), -0.2], [SOLUTION_WHOLE + (SOLUTION > 0 ? 1 : -1), 0.2]);
</div>
</div>
<div>
<div class="graphie" data-update="number-line">
style({ stroke: GREEN, fill: "#6495ED", strokeWidth: 3.5, arrows: "->" });
line( [ 0, 0 ], [ SOLUTION, 0 ] );
movablePoint.visibleShape.toFront();
</div>
<p>The orange dot should be shifted to the position <code>\color{orange}{<var>SOLUTION</var>}</code> right of 0.</p>
</div>
<div>
<div class="graphie" data-update="number-line">
label( [ SOLUTION, -0.53 ], SOLUTION, "center", { color: "#FFA500" });
movablePoint.moveTo( SOLUTION, 0 );
</div>
<p>The orange number shows where <code>\color{orange}{<var>SOLUTION</var>}</code> is on the number line.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>