forked from Khan/khan-exercises
/
number_line_3.html
78 lines (74 loc) · 4.25 KB
/
number_line_3.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
<!DOCTYPE html>
<html data-require="math graphie word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number line 3</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="MIDPOINT">randRange( -15, 15 )</var>
<var id="DISTANCE">randRange( -2, 2 )</var>
<var id="NUMBER">randRangeExclude( max(MIDPOINT-5, MIDPOINT-5-DISTANCE),min(MIDPOINT+5, MIDPOINT+5-DISTANCE), [ 0, MIDPOINT - DISTANCE ] )</var>
</div>
<div class="problems">
<div>
<div class="question">
<p data-if="DISTANCE !== 0">What number is <strong><var>plural( abs( DISTANCE ), "position")</var> to the <span data-if="DISTANCE < 1">left</span><span data-else>right</span> of the orange dot</strong>? The distance between tick marks is 1.</p>
<p data-else>What number does the orange dot represent? The distance between tick marks is 1.</p>
<div class="graphie" id="number-line">
init({
range: [ [ MIDPOINT-6, MIDPOINT+6 ], [ -1, 1 ] ]
});
line( [ MIDPOINT-5, 0 ], [ MIDPOINT+5, 0 ] );
for ( var x = MIDPOINT-5; x <= MIDPOINT+5; x++ ) {
line( [ x, -0.2 ], [ x, 0.2 ] );
}
style({ stroke: "#6495ED", strokeWidth: 3.5 });
line( [ MIDPOINT, -0.2], [MIDPOINT, 0.2]);
label( [ MIDPOINT, -0.53 ], MIDPOINT, "center", { color: "#6495ED" });
style({ stroke: "#FFA500", fill: "#FFA500" });
graph.orangeDot = circle( [ NUMBER, 0 ], 0.10 );
</div>
</div>
<div class="solution" data-forms="integer"><var>NUMBER+DISTANCE</var></div>
<div class="hints">
<p>We know where <code><var>MIDPOINT</var></code> is on this number line because it is labeled.</p>
<p>Numbers to the left are less than <code><var>MIDPOINT</var></code>, while numbers to the right are greater than <code><var>MIDPOINT</var></code>.</p>
<div data-if="DISTANCE !== 0">
<p>We need to find the number represented by the blue dot, which is <var>plural( abs( DISTANCE ), "position")</var> to the <span data-if="DISTANCE < 1">left</span><span data-else>right</span> of the orange dot.</p>
<div class="graphie" data-update="number-line">
style({ stroke: "#6495ED", fill: "#6495ED" });
graph.blueDot = circle( [ NUMBER+DISTANCE, 0 ], 0.10 );
</div>
</div>
<div>
<p>Starting from <code><var>MIDPOINT</var></code>, we move <code><var>abs( NUMBER-MIDPOINT+DISTANCE )</var></code> to the <span data-if="NUMBER-MIDPOINT+DISTANCE < 0">left</span><span data-else>right</span> to reach the <span data-if="DISTANCE !== 0">blue</span><span data-else>orange</span> dot.</p>
<div class="graphie" data-update="number-line">
var color = "#6495ED";
if ( DISTANCE === 0 ) {
color = "#FFA500";
}
style({ stroke: color, fill: color, strokeWidth: 3.5, arrows: "->" });
line( [ MIDPOINT, 0 ], [ NUMBER+DISTANCE, 0 ] );
graph.blueDot.toFront();
graph.orangeDot.toFront();
</div>
</div>
<div>
<p class="final_answer">Thus, the <span data-if="DISTANCE !== 0">blue</span><span data-else>orange</span> dot represents the number <code><var>NUMBER+DISTANCE</var></code>.</p>
<div class="graphie" data-update="number-line">
var color = "#6495ED";
if ( DISTANCE === 0 ) {
color = "#FFA500";
}
label( [ NUMBER+DISTANCE, -0.53 ], NUMBER+DISTANCE, "center", { color: color });
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>