This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
ordering_improper_fractions_and_mixed_numbers.html
173 lines (160 loc) · 8.54 KB
/
ordering_improper_fractions_and_mixed_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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html data-require="math math-format interactive">
<head>
<meta charset="UTF-8" />
<title>Ordering Mixed Numbers and Improper Fractions</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">
<!--COLORS needed in hints section to explain the sorting -->
<var id="COLORS">KhanUtil.shuffle([ "blue", "green", "red", "purple", "orange", "brown" ])</var>
<var id="NUMS">(function() {
var ARRAY_LENGTH = 5;
// constants for displaying fractions and mixed numbers
var REDUCE = true;
var SMALL_TYPESET = true;
var DEFRACT = true;
// Create random mixture of mixed numbers and improper fractions
var MIXED_NUMBER = 1;
var IMPROPER_FRACTION = 2;
var TYPES = shuffle( [ MIXED_NUMBER, MIXED_NUMBER, MIXED_NUMBER, IMPROPER_FRACTION, IMPROPER_FRACTION, IMPROPER_FRACTION], ARRAY_LENGTH );
// calculate values so that they be accessed later in hints and solution
var array = [];
var used = {};
while ( array.length < ARRAY_LENGTH ) {
var denominator = randRange( 2, 3 ) * randRange( 2, 5 );
// Since all are improper fractions, numerator is greater than denominator
var numerator = randRange( denominator + 1, denominator + 15 );
var number = ( numerator / denominator ).toFixed( 3 );
var gcd = getGCD( numerator, denominator );
switch ( TYPES[ array.length ] ) {
case MIXED_NUMBER:
// If number is a whole number, try again
if ( numerator % denominator !== 0 ) {
if ( !used[ number ] ) {
array.push( [ numerator / denominator,
( numerator / gcd ),
( denominator / gcd ),
fraction( numerator, denominator, !DEFRACT, REDUCE ),
COLORS[ array.length ],
mixedFractionFromImproper( numerator, denominator, DEFRACT, REDUCE, SMALL_TYPESET )
]);
used[ number ] = true;
}
}
break;
case IMPROPER_FRACTION:
if ( !used[ number ] ) {
array.push([ numerator / denominator,
( numerator / gcd ),
( denominator / gcd ),
fraction( numerator, denominator, !DEFRACT, REDUCE ),
COLORS[ array.length ],
fractionReduce( numerator, denominator, SMALL_TYPESET )
]);
used[ number ] = true;
}
break;
}
}
return array;
})()</var>
<var id="DENOMS">$.map( NUMS, function( el ) {
return el[ 2 ];
})</var>
<var id="DENOMS_TEX_COLOR">$.map( NUMS, function( el ) {
return "\\color{" + el[4] + "}{" + el[2] + "}";
}).join( "," )</var>
<var id="LCD">getLCM.apply( KhanUtil, DENOMS )</var>
<var id="NUMS_LCD_COLOR">$.map( NUMS, function( el, idx ) {
var n = el[ 1 ],
d = el[ 2 ],
scalar = (LCD/d);
return "\\color{" + el[ 4 ] + "}{" + fraction( n * scalar, LCD ) + "}";
})</var>
<var id="NUMS_LCD_TEX_COLOR">NUMS_LCD_COLOR.join( "," )</var>
<var id="NUMS_TEX_COLOR">$.map( NUMS, function( el ) {
return "\\color{" + el[ 4 ] + "}{" + el[ 3 ] + "}";
} ).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[ 5 ];
}).join( "," )</var>
<var id="MIXED_NUMS_SORT_TEX_COLOR">$.map( NUMS_SORT, function( el ) {
return "\\color{" + el[ 4 ] + "}{" + el[ 5 ] + "}";
}).join( "," )</var>
<var id="NUMS_LCD_SORT_COLOR">$.map( NUMS_SORT, function( el, idx ) {
var n = el[ 1 ],
d = el[ 2 ],
scalar = ( LCD / d );
return "\\color{" + el[ 4 ] + "}{" + fraction( n * scalar, LCD ) + "}";
})</var>
<var id="NUMS_LCD_SORT_COLOR_TEX">NUMS_LCD_SORT_COLOR.join( "," )</var>
<var id="SORTER">createSorter()</var>
</div>
<div class="problems">
<div>
<div class="question">
<p>Order the following fractions from least to greatest. </p>
<ul id="sortable">
<li data-each="NUMS as NUM">
<span class="sort-key"><var>NUM[ 5 ]</var></span>
<code><var>NUM[ 5 ]</var></code>
</li>
</ul>
<p><var>SORTER.init( "sortable" )</var></p>
</div>
<div class="solution" data-type="custom">
<div class="instruction">
Drag the fractions or mixed numbers to the left or the 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>It's easier to compare fractions if they are all in the same form, so convert mixed numbers and whole numbers into improper fractions.</p>
<p class="number-list"><code><var>NUMS_TEX_COLOR</var></code></p>
</div>
<div>
<p>We can compare fractions when they have the same denominator. To make these fractions have the same denominator, we have to find the least common denominator. The least common denominator is the least common multiple of all the denominators. The least common multiple of <code><var>DENOMS_TEX_COLOR</var></code> is <code><var>LCD</var></code>.</p>
</div>
<div>
<p>We can change the denominator of fractions by multiplying by a form of <code>1</code>, such as <code>\dfrac{2}{2}</code> or <code>\dfrac{10}{10}</code>. Multiply the improper fractions above by forms of <code>1</code> so that their denominators are all equal to <code><var>LCD</var></code>.</p>
<div>
<p data-each="NUMS as I, NUM"><code>\color{<var>NUM[4]</var>}{<var>NUM[3]</var>}\times \dfrac {<var>LCD / NUM[2] </var>}{<var>LCD / NUM[2]</var>} = <var>NUMS_LCD_COLOR[I]</var></code></p>
</div>
</div>
<div>
<p>Now all the fractions are in a form where we can compare them by numerator.</p>
<p class="number-list"><code><var>NUMS_LCD_TEX_COLOR</var></code></p>
</div>
<div>
<p>Sort the fractions from least to greatest by their numerators.</p>
<p class="number-list"><code><var>NUMS_LCD_SORT_COLOR_TEX</var></code></p>
</div>
<div>
<p>Finally, convert the numbers back to their original form.</p>
<p class="number-list"><code><var>MIXED_NUMS_SORT_TEX_COLOR</var></code></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>