Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 105 lines (94 sloc) 5.055 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
<!DOCTYPE html>
<html data-require="math math-format graphie word-problems interactive">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Fractions on the number line 1</title>
    <script src="../khan-exercise.js"></script>
</head>
<body>
    <div class="exercise">
    <div class="vars">
        <var id="LOWER_BOUND">0</var>
        <var id="UPPER_BOUND">1</var>
        <var id="SCALING_FACTOR">5</var>
        <!-- use array to make the fractions come up evenly(ish) -->
        <var id="fractionArray">[ [1, 2], [1, 3], [2, 3], [1, 4], [2, 4], [3, 4], [1, 5], [2, 5], [3, 5], [4, 5], [1, 6], [2, 6], [3, 6], [4, 6], [5, 6] ] </var>
        <var id="fractionToFind">randFromArray(fractionArray)</var>
        <var id="DENOMINATOR">fractionToFind[1]</var>
        <var id="NUMERATOR">fractionToFind[0]</var>

        <var id="LOWER_SCALED">LOWER_BOUND * DENOMINATOR</var>
        <var id="UPPER_SCALED">UPPER_BOUND * DENOMINATOR</var>

        <var id="SOLUTION">NUMERATOR / DENOMINATOR</var>
        <var id="SCALE">4.5</var>
    </div>
    <div class="problems">
        <div>
            <div class="question">
                <p>Move the <strong><code>\color{orange}{\text{orange dot}}</code></strong> to
                <strong><code>\color{orange}{<var>fraction(NUMERATOR, DENOMINATOR)</var>}</code></strong> on the number line.</p>

                <div class="graphie" id="number-line">
                    init({
                        range: [ [LOWER_BOUND - 0.1, UPPER_BOUND + 0.1], [-1, 1] ],
                        scale: [80*SCALE, 40]
                    });

                    // Draw Number Line
                    style({arrows: "&gt;"});
                    line( [ LOWER_BOUND, 0 ], [ UPPER_BOUND + 0.25 / SCALE, 0 ] );
                    style({arrows: ""});

                    // Draw Number Line Tick marks
                    for ( var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x += 1 / DENOMINATOR ) {
                        line( [ x, -0.2 ], [ x, 0.2 ] );
                    }

                    // 0 and 1 tick marks
                    style({ stroke: BLUE, strokeWidth: 3.5 });
                    line( [ LOWER_BOUND, -0.2], [LOWER_BOUND, 0.2]);
                    label( [ LOWER_BOUND, -0.53 ], LOWER_BOUND, "center", { color: BLUE });
                    line( [ UPPER_BOUND, -0.2], [UPPER_BOUND, 0.2]);
                    label( [ UPPER_BOUND, -0.53 ], UPPER_BOUND, "center", { color: BLUE });

                    addMouseLayer();
                    graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: 0.25 / DENOMINATOR });
                    graph.movablePoint.onMove = function( x, y ) {
                        return [ min( max( LOWER_BOUND, x ), UPPER_BOUND ), y ];
                    };
                </div>
            </div>

            <div class="solution" data-type="custom">
                <span class="instruction"> Move the orange dot to select your answer. </span>
                <div class="guess"> graph.movablePoint.coord[0] </div>
                <div class="validator-function">
                    if ( guess === 0 ) {
                        return "";
                    }
                    return abs( SOLUTION - guess ) &lt; 0.001;
                </div>
                <div class="show-guess">
                    graph.movablePoint.setCoord( [ guess, 0 ] );
                </div>
            </div>

            <div class="hints">
                <p>Above we've drawn the number line from 0 to 1, divided into equal pieces.</p>
                <p>The number line is divided into <code><var>DENOMINATOR</var></code> equal pieces, so each piece represents
                <code><var>fraction(1, DENOMINATOR)</var></code>.</p>

                <div>
                    <div class="graphie" data-update="number-line">
                        style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "-&gt;" });
                        line( [ 0, 0 ], [ SOLUTION, 0 ] );
                        graph.movablePoint.visibleShape.toFront();
                    </div>
                    <p>The orange dot should be shifted <span class="hint_blue"><code><strong><var>NUMERATOR</var></strong></code></span>
                    segment<var>plural(NUMERATOR)</var> over, as <code><var>fraction(NUMERATOR, DENOMINATOR)</var> =
                    <var>NUMERATOR</var>*<var>fraction(1, DENOMINATOR)</var></code></p>
                </div>

                <div>
                    <div class="graphie" data-update="number-line">
                        label( [ SOLUTION, -0.83 ], fraction(NUMERATOR, DENOMINATOR), "center", { color: "#FFA500" });
                        graph.movablePoint.moveTo( SOLUTION, 0 );
                    </div>
                    <p>The orange number shows where <code>\color{orange}{<var>fraction(NUMERATOR, DENOMINATOR)</var>}</code> is on the number line.</p>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>
</html>
Something went wrong with that request. Please try again.