This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
ordering_numbers.html
121 lines (104 loc) · 4.45 KB
/
ordering_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
<!DOCTYPE html>
<html data-require="math math-format interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ordering numbers</title>
<script src="../khan-exercise.js"></script>
<style>
.sort-key {
visibility: hidden;
position: absolute;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="NUMS">(function() {
var array = [];
var types = shuffle( [1, 1, 1, 2, 2, 2, 3, 3, 3], 5 );
var used = {};
while ( array.length < 5 ) {
var type = types[ array.length ], n, ns;
switch ( type ) {
case 1: // decimal
n = randRange( 100, 999 ) / 1000;
ns = n.toFixed( 3 );
if ( !used[ ns ] ) {
array.push([ type, n, ns, "= " + ns ]);
used[ ns ] = true;
}
break;
case 2: // percentage
n = randRange( 100, 999 ) / 1000;
ns = n.toFixed( 3 );
if ( !used[ ns ] ) {
array.push([ type, n, (100 * n).toFixed( 1 ) + "\\%", "= " + ns ]);
used[ ns ] = true;
}
break;
case 3: // fraction
var d = 4 * randRange( 5, 15 );
n = randRange( 1, d - 1 );
ns = ( n / d ).toFixed( 3 );
if ( !used[ ns ] ) {
var gcd = KhanUtil.getGCD( n, d );
array.push([ type, n/d, fractionReduce( n, d, true ), "\\approx " + ns, (n/gcd) + "/" + (d/gcd) ]);
used[ ns ] = true;
}
break;
}
}
return array;
})()</var>
<var id="NUMS_TEX">$.map( NUMS, function( el ) {
return el[2];
} ).join( "," )</var>
<var id="NUMS_SORT">$.extend( true, [], NUMS ).sort( function(a, b) {
return a[1] - b[1];
} )</var>
<var id="NUMS_SORT_TEX">$.map( NUMS_SORT, function( el ) {
return el[2];
} ).join( "," )</var>
<var id="NUMS_SORT_DECS">$.map( NUMS_SORT, function( el ) {
return el[3].match( / (.+)$/ )[1];
} ).join( ",\\space" )</var>
<var id="SORTER">createSorter()</var>
</div>
<div class="problems">
<div>
<div class="question">
<p>Order the following numbers from least to greatest:</p>
<ul id="sortable">
<li data-each="NUMS as NUM">
<span class="sort-key"><var>NUM[2]</var></span>
<code><var>NUM[2]</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">
<p>Convert each number to a decimal.</p>
<p><code>\begin{align*}
<span data-each="NUMS as NUM"><var>NUM[4] || NUM[2]</var> & <var>NUM[3]</var> \\</span>
\end{align*}</code></p>
<p>Sort the decimals: <code><var>NUMS_SORT_DECS</var></code>.</p>
<p>Convert back: <code>\Large{<var>NUMS_SORT_TEX</var>}</code>.</p>
</div>
</div>
</div>
</div>
</body>
</html>