Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 156 lines (126 sloc) 8.187 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
<!DOCTYPE html>
<!-- TODO: replace randFromArray with <ul> when <ul> works --><!-- TODO: make advanced version of this exercise, with negative vertical scaling, vertical and horizontal offsets --><!-- TODO: might want to change the things already rendered in graphie to highlight the current thing being hinted; ie, make the thing just displayed at 2 stroke, reduce all previously renedred things to 1 storke -->
<html data-require="math graphie math-format">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Graphs of sine and cosine</title>
    <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
    <script type="text/javascript">
        function decFrac( num ) {
            return KhanUtil.decimalFraction( num, true, true, true );
        }
    </script>
</head>
<body>
    <div class="exercise">
        <div class="vars">
            <var id="FN">randFromArray( [ "cos", "sin" ] )</var>
            <var id="FNS">{ "cos": $._("cosine"), "sin": $._("sine")}[FN]</var>
            <var id="VSCALE">randRange( 1, 5 ) / 2</var>
            <var id="HSCALE">random() &lt; 0.5 ? randRange( 1, 4 ) : 1 / randRange( 1, 4 )</var>
            <var id="PERIOD">2 * PI * HSCALE</var>

            <var id="VRANGE">3.5</var>
            <var id="HRANGE">3.5 * PI * HSCALE</var>

            <var id="PIXVSCALE">150 / VRANGE</var>
            <var id="PIXHSCALE">250 / HRANGE</var>

            <var id="FUNCS">VSCALE + "*" + FN + "(x/" + HSCALE + ")"</var>

            <!-- this is the distance between grid lines -->
            <var id="HSTEP">HSCALE * PI / 4</var>
            <var id="VSTEP">0.5</var>

            <!-- this is how many grid lines are between each tick mark -->
            <var id="HTICKSTEP">2</var>
            <var id="VTICKSTEP">1</var>

            <!-- this is how many grid lines there are between each grid label -->
            <var id="HLABELSTEP">4</var>
            <var id="VLABELSTEP">2</var>

        </div>

        <div class="problems">
            <div>

                <div class="problem">
                    <p><code>f(x)</code> is graphed below.</p>
                    <div class="graphie" id="graph">
                        graphInit({
                            range: [ HRANGE, VRANGE ],
                            scale: [ PIXHSCALE, PIXVSCALE ],
                            axisArrows: "&lt;-&gt;",
                            gridStep: [ HSCALE * PI / 4, .5 ],
                            tickStep: [ 2, 1 ],
                            labelStep: [ 2, 2 ],
                            unityLabels: true,
                            xLabelFormat: piFraction
                        });

                        // draw sin/cos curve
                        style({
                            stroke: "#a3a3ff",
                             strokeWidth: 2
                        }, function() {
                            plot( function( x ) {
                                return eval( FUNCS );
                            }, [ -HRANGE, HRANGE ] );
                        });
                    </div>
                </div>

                <p class="question">What is <code>f(x)</code>?</p>

                <div class="solution" data-type="multiple"><div style="font-size: 11px;">
                    <code>f(x)=</code>
                    <span class="sol short25" data-fallback="1"><var>VSCALE</var></span>
                    <!-- we make the default fn type blank so users don't think the default value of sin or cos is important, not sure if this is necessary, though -->
                    <span class="sol" data-choices="['', 'cos', 'sin']" data-type="list"><var>FN</var></span>
                    <code>(</code><span class="sol short25" data-fallback="1"><var>1 / HSCALE</var></span><code>x)</code>
                </div></div>
            </div>
        </div>

        <div class="hints">
            <div data-if="FN === 'cos'" data-unwrap="">

                <p>The function starts at its maximum value (ie, <code>f(0)=<var>VSCALE</var></code>), so what kind of function is it?</p>

                <p>The cosine function, <code>\cos(x)</code>, starts at 1 (ie, <code>\cos(0)=1</code>), so <code>f(x)</code> must be a scaled version of the cosine function.</p>

            </div>

            <div data-else="" data-unwrap="">

                <p>The function starts at zero (ie, <code>f(0)=0</code>), so what kind of function is it?</p>

                <p>The sine function, <code>\sin(x)</code>, starts at 0 (ie, <code>\sin(0)=0</code>), so <code>f(x)</code> must be a scaled version of the sine function.</p>

            </div>

            <div>
                <div class="graphie" data-update="graph">
                    style({
                        stroke: "#00d505",
                        strokeWidth: 2
                    }, function() {
                        plot( function( x ) {
                            return eval( FUNCS );
                        }, [ 0, PERIOD ] );
                        line( [ 0, VSCALE ], [ PERIOD , VSCALE ], { arrows: "&lt;-&gt;" });
                    });
                </div>
                <p data-if="FN === 'cos'">The distance from peak to peak is <code><var>piFraction( PERIOD )</var></code>, so the period of <code>f(x)</code> is <code><var>piFraction( PERIOD )</var></code>.</p>
                <p data-else="">The distance between every other zero is <code><var>piFraction( PERIOD )</var></code>, so the period of <code>f(x)</code> is <code><var>piFraction( PERIOD )</var></code>.</p>
            </div>

            <div data-if="abs( PERIOD - 2 * PI ) < 0.01" data-unwrap="">
                <p>The period of a normal <var>FNS</var> function is <code>2\pi</code>, and the period we want is <code><var>piFraction( PERIOD )</var></code>, so we don't need to worry about scaling the function horizontally.</p>
            </div>

            <div data-else="" data-unwrap="">

                <p>The period of a normal <var>FNS</var> function is <code>2\pi</code>, and the period we want is <code><var>piFraction( PERIOD )</var></code>, so we need to scale the <var>FNS</var> function horizontally by <code><var>decFrac( PERIOD / 2 / PI )</var></code>.</p>

                <p>To horizontally scale <code>\<var>FN</var>(x)</code> by <code><var>decFrac( PERIOD / 2 / PI )</var></code>, we need to substitute <code><var>decFrac( 2 * PI / PERIOD )</var>x</code> in for <code>x</code> to get <code>\<var>FN</var>(<var>decFrac( 2 * PI / PERIOD )</var>x)</code>.</p>

            </div>

            <div>
                <div class="graphie" data-update="graph">
                    style({
                        stroke: "#00d505",
                        strokeWidth: 2
                    }, function() {
                        var x = FN === "sin" ? PERIOD / 4 : PERIOD;
                        line( [ x, 0 ], [ x, VSCALE ], { arrows: "&lt;-&gt;" });
                    });
                </div>
                <p>The height of <code>f(x)</code> is <code><var>decFrac( VSCALE )</var></code>, so the amplitude of <code>f(x)</code> is <code><var>decFrac( VSCALE )</var></code>.</p>
            </div>

            <p data-if="VSCALE === 1">The amplitude of <code>f(x)</code> is 1, so we don't need to worry about scaling the function vertically.</p>
            <div data-else="" data-unwrap="">
                <p>The amplitude of <code>f(x)</code> is <code><var>decFrac( VSCALE )</var></code>, so we need to scale <var>FNS</var> function vertically by <code><var>decFrac( VSCALE )</var></code>.</p>
                <p>To scale the function vertically, multiply the whole thing by <code><var>decFrac( VSCALE )</var></code>.</p>
            </div>

            <!-- the calls to plus here are to reduce things like 1cos(1x) into cos(x). it works, but it is not the most semantic way. could be improved. -->
            <p>So the resulting function (after we perform all these manipulations) is <code><var>plus( toFractionTex( VSCALE ) + "\\" + FN + "(" + plus( toFractionTex( 1 / HSCALE ) + "x" ) + ")" )</var></code>.</p>
        </div>
    </div>
</body>
</html>
Something went wrong with that request. Please try again.