forked from Khan/khan-exercises
-
Notifications
You must be signed in to change notification settings - Fork 0
/
decimals_on_the_number_line.html
78 lines (73 loc) · 2.08 KB
/
decimals_on_the_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
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Decimals on the number line</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars" >
<var id="NUMBER">( randRange( -300, 300 ) / 100 )</var>
<var id="WRONGS">( function() {
var pos = rand( 5 );
while( NUMBER - (0.47 * pos) < -3 ){
pos--;
}
while( NUMBER + 0.47 * (5 - pos) > 3 ){
pos++;
}
arr = [];
for ( i = 0; i < pos; i++){
arr.push( NUMBER - ((pos - i) * 0.47));
}
arr.push( NUMBER );
for ( i = pos + 1; i < 5; i++ ){
arr.push( NUMBER + (( i - pos) * 0.47));
}
return arr;
})()</var>
<var id="POSS_ANSWER">[ "A", "B", "C", "D", "E" ]</var>
<var id="ANSWER" >POSS_ANSWER[ WRONGS.indexOf( NUMBER ) ] </var>
</div>
<div class="problems">
<div>
<div class="question">
<p>Which dot marks the position of <code><var>NUMBER</var></code> on the number line?</p>
<div class="graphie">
init({
scale: [ 80, 40 ],
range: [ [-0.2, 22], [-1, 1] ]
});
var start = -3;
var end = 3;
var originX = 0;
var x = NUMBER;
numberLine( start, end );
style({ stroke: "#6495ED", fill: "#6495ED" });
style({ stroke: "#FFA500", fill: "#FFA500", strokeWidth: 3.5, arrows: "->" });
var already = [];
for( i = 0; i != WRONGS.length; i++ ){
ellipse( [ WRONGS[ i ] + 3, 0 ], [ 0.06, 0.12 ] );
label( [WRONGS[ i ] + 3, 0 ], POSS_ANSWER[ i ] , "above", { labelDistance: 5 } );
}
</div>
<div class="solution"><var>ANSWER</var></div>
<ul class="choices" data-category="true">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div>
<div class="hints">
<p><var>NUMBER</var> is between <var>floor( NUMBER )</var> and <var>ceil( NUMBER )</var>.</p>
<p><var>NUMBER</var> is closest to <var>round( NUMBER )</var></p>
<p>It is <var>ANSWER</var>.</p>
</div>
</div>
</div>
</div>
</body>
</html>