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
/
ordering_negative_numbers.html
127 lines (114 loc) · 5.01 KB
/
ordering_negative_numbers.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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ordering negative numbers</title>
<script src="../khan-exercise.js"></script>
<style type="text/css">
.number-list {
font-size: 1.7em;
text-align: center
}
.sort-key {
visibility: hidden;
position: absolute;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="COLORS">KhanUtil.shuffle([ "blue", "green", "red", "purple", "orange", "brown", "gray", "teal", "olive" ])</var>
<var id="NUMS">(function() {
var array = [];
var used = {};
var arrLength = randRange( 4, 6 );
for ( var i = 0; i < arrLength; i++ ) {
var num = randRange( -100, -1 );
if ( !used[ num ] ) {
array[i] = [ num, COLORS[i] ];
used[ num ] = true;
} else {
i--;
}
}
return array;
})()</var>
<var id="NUMS_TEX">$.map( NUMS, function( el ) {
return el[0];
} ).join( "," )</var>
<var id="NUMS_TEX_COLOR">$.map( NUMS, function( el ) {
return "\\color{" + el[1] + "}{" + el[0] + "}";
} ).join( "," )</var>
<var id="NUMS_SORT">$.extend( true, [], NUMS ).sort( function(a, b) {
return a[0] - b[0];
} )</var>
<var id="NUMS_SORT_TEX">$.map( NUMS_SORT, function( el ) {
return el[0];
} ).join( "," )</var>
<var id="NUMS_SORT_TEX_COLOR">$.map( NUMS_SORT, function( el ) {
return "\\color{" + el[1] + "}{" + el[0] + "}";
} ).join( "," )</var>
<var id="SORTER">createSorter()</var>
</div>
<div class="problems">
<div>
<div class="question">
<p>Order the following negative numbers from least to greatest:</p>
<ul id="sortable">
<li data-each="NUMS as NUM">
<span class="sort-key"><var>NUM[0]</var></span>
<code><var>NUM[0]</var></code>
</li>
</ul>
<p><var>SORTER.init( "sortable" )</var></p>
</div>
<div class="solution" data-type="custom">
<div class="instruction">
Drag the numbers left and right so they are in order from least to greatest
</div>
<div class="guess">SORTER.getContent()</div>
<div class="validator-function">
return guess.join( "," ) === NUMS_SORT_TEX;
</div>
<div class="show-guess">
SORTER.setContent( guess );
</div>
</div>
<div class="hints">
<div>
<p>Let's use different colors for each number.</p>
<p class="number-list"><code><var>NUMS_TEX_COLOR</var></code></p>
</div>
<p>Plot these numbers on a number line. Then we can see which ones are lower and which ones are higher.</p>
<div class="graphie" id="number-line">
init({
range: [ [-1, 101], [-1, 1] ],
scale: [ 4.5, 40 ]
});
style({
stroke: "#666"
}, function() {
graph.nl = numberLine( -100, 0, 10 );
});
</div>
<div class="graphie" data-update="number-line">
$( "#number-line" ).find( ".MathJax" ).slice( 1, -1 ).remove();
var position = "above";
$.each( NUMS_SORT, function( i, el ) {
ellipse( [ 100 + el[0], 0 ], [ 0.89, 0.1 ], { "stroke-width": 0, fill: el[1] } );
label( [ 100 + el[0], 0 ], "\\color{" + el[1] + "}{" + el[0] + "}", position, { labelDistance: 5 } );
position = ( position === "above" ? "below" : "above" );
} );
</div>
<div>
<p>Now just read the numbers from left to right on the number line.</p>
<p>The leftmost numbers are least, and the rightmost numbers are greatest.</p>
</div>
<p class="number-list"><code><var>NUMS_SORT_TEX_COLOR</var></code></p>
</div>
</div>
</div>
</div>
</body>
</html>