Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 173 lines (160 sloc) 8.74 kb
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 &lt; 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>
Something went wrong with that request. Please try again.