Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

164 lines (146 sloc) 7.071 kB
<!DOCTYPE html>
<html data-require="math math-format interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ordering fractions</title>
<script src="../khan-exercise.js"></script>
<style type="text/css">
.number-list {
font-size: 1.7em;
text-align: center
}
.sol input {
width: 40px !important;
}
.sort-key {
visibility: hidden;
position: absolute;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars" data-ensure="LCD &lt; 200">
<var id="COLORS">KhanUtil.shuffle([ "blue", "green", "red", "purple", "orange", "brown" ])</var>
<var id="NUMS">(function() {
var array = [];
var ds = [];
var used = {};
var arrLength = randRange( 4, 6 );
while ( array.length &lt; arrLength ) {
var d = randRange( 1, 3 ) * randRange( 2, 9 );
var n = randRange( 1, d - 1 );
var ns = ( n / d ).toFixed( 3 );
if ( !used[ ns ] ) {
var gcd = getGCD( n, d );
array.push([ n/d,
(n/gcd),
(d/gcd),
fractionReduce( n, d, true ),
(n/gcd) + "/" + (d/gcd),
COLORS[array.length]
]);
ds.push( d/gcd );
used[ ns ] = true;
}
}
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[5] + "}{" + 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[5] + "}{" + fractionSmall( n * scalar, LCD ) + "}";
})</var>
<var id="NUMS_LCD_TEX_COLOR">NUMS_LCD_COLOR.join( "," )</var>
<var id="NUMS_TEX">$.map( NUMS, function( el ) {
return el[3];
} ).join( "," )</var>
<var id="NUMS_TEX_COLOR">$.map( NUMS, function( el ) {
return "\\color{" + el[5] + "}{" + 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[3];
} ).join( "," )</var>
<var id="NUMS_SORT_TEX_COLOR">$.map( NUMS_SORT, function( el ) {
return "\\color{" + el[5] + "}{" + el[3] + "}";
} ).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[5] + "}{" + fractionSmall( 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[3]</var></span>
<code><var>NUM[3]</var></code>
</li>
</ul>
<p><var>SORTER.init( "sortable" )</var></p>
</div>
<div class="solution" data-type="custom">
<div class="instruction">
Drag the fractions 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 fraction.</p>
<p class="number-list"><code><var>NUMS_TEX_COLOR</var></code></p>
</div>
<p>Find the least common denominator of all the fractions, so that we can compare them more easily.</p>
<div>
<p>The least common denominator is the least common multiple of all the denominators.</p>
<p>The least common multiple of <code><var>DENOMS_TEX_COLOR</var></code> is <code><var>LCD</var></code>.</p>
</div>
<div>
<p>Multiply all the fractions <code>\dfrac{a}{b}</code> by <code>\dfrac{\frac{<var>LCD</var>}{b}}{\frac{<var>LCD</var>}{b}}</code>. Then each fraction will have <code><var>LCD</var></code> as its denominator:</p>
<div>
<p data-each="NUMS as I, NUM"><code>
\color{<var>NUM[5]</var>}{<var>NUM[3]</var>} \times \dfrac{\frac{<var>LCD</var>}{<var>NUM[2]</var>}}{\frac{<var>LCD</var>}{<var>NUM[2]</var>}}
= \color{<var>NUM[5]</var>}{<var>NUM[3]</var>} \times \frac{<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, reduce each fraction again.</p>
<p class="number-list"><code><var>NUMS_SORT_TEX_COLOR</var></code></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.