Skip to content
Newer
Older
100644 156 lines (126 sloc) 7.97 KB
ce12678 @jruberg new exercise --> graphs of sine and cosine
jruberg authored Jun 27, 2011
1 <!DOCTYPE html>
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored Apr 24, 2013
2 <!-- 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 -->
3 <html data-require="math graphie math-format">
4 <head>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored Apr 16, 2013
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
6 <title>Graphs of sine and cosine</title>
ac1415e @spicyj Use requirejs for module loading
spicyj authored Mar 5, 2014
7 <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
8 <script type="text/javascript">
9 function decFrac( num ) {
10 return KhanUtil.decimalFraction( num, true, true, true );
11 }
12 </script>
ce12678 @jruberg new exercise --> graphs of sine and cosine
jruberg authored Jun 28, 2011
13 </head>
14 <body>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
15 <div class="exercise">
16 <div class="vars">
17 <var id="FN">randFromArray( [ "cos", "sin" ] )</var>
bd4e680 @csilvers Change from $._ and $.ngettext over to i18n._ and i18n.ngettext.
csilvers authored Oct 22, 2015
18 <var id="FNS">{ "cos": i18n._("cosine"), "sin": i18n._("sine")}[FN]</var>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
19 <var id="VSCALE">randRange( 1, 5 ) / 2</var>
20 <var id="HSCALE">random() &lt; 0.5 ? randRange( 1, 4 ) : 1 / randRange( 1, 4 )</var>
21 <var id="PERIOD">2 * PI * HSCALE</var>
22
23 <var id="VRANGE">3.5</var>
064281e @beneater Fix up exercises that are too wide for tutorials
beneater authored Sep 19, 2012
24 <var id="HRANGE">3.5 * PI * HSCALE</var>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
25
26 <var id="PIXVSCALE">150 / VRANGE</var>
064281e @beneater Fix up exercises that are too wide for tutorials
beneater authored Sep 19, 2012
27 <var id="PIXHSCALE">250 / HRANGE</var>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
28
29 <var id="FUNCS">VSCALE + "*" + FN + "(x/" + HSCALE + ")"</var>
30
31 <!-- this is the distance between grid lines -->
32 <var id="HSTEP">HSCALE * PI / 4</var>
33 <var id="VSTEP">0.5</var>
34
35 <!-- this is how many grid lines are between each tick mark -->
36 <var id="HTICKSTEP">2</var>
37 <var id="VTICKSTEP">1</var>
38
39 <!-- this is how many grid lines there are between each grid label -->
40 <var id="HLABELSTEP">4</var>
41 <var id="VLABELSTEP">2</var>
42
43 </div>
44
45 <div class="problems">
46 <div>
47
48 <div class="problem">
49 <p><code>f(x)</code> is graphed below.</p>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored Apr 16, 2013
50 <div class="graphie" id="graph">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
51 graphInit({
52 range: [ HRANGE, VRANGE ],
53 scale: [ PIXHSCALE, PIXVSCALE ],
e9807ff @jeresig Clean up the exercise files using the new cleaning utility.
jeresig authored Apr 16, 2013
54 axisArrows: "&lt;-&gt;",
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
55 gridStep: [ HSCALE * PI / 4, .5 ],
56 tickStep: [ 2, 1 ],
57 labelStep: [ 2, 2 ],
58 unityLabels: true,
59 xLabelFormat: piFraction
60 });
61
62 // draw sin/cos curve
63 style({
64 stroke: "#a3a3ff",
65 strokeWidth: 2
66 }, function() {
67 plot( function( x ) {
68 return eval( FUNCS );
69 }, [ -HRANGE, HRANGE ] );
70 });
71 </div>
72 </div>
73
74 <p class="question">What is <code>f(x)</code>?</p>
75
32fbe13 @xymostech Remove places khan-exercises manually sets font-size
xymostech authored Jan 6, 2015
76 <div class="solution" data-type="multiple">
064281e @beneater Fix up exercises that are too wide for tutorials
beneater authored Sep 19, 2012
77 <code>f(x)=</code>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored Apr 16, 2013
78 <span class="sol short25" data-fallback="1"><var>VSCALE</var></span>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
79 <!-- 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 -->
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored Apr 16, 2013
80 <span class="sol" data-choices="['', 'cos', 'sin']" data-type="list"><var>FN</var></span>
81 <code>(</code><span class="sol short25" data-fallback="1"><var>1 / HSCALE</var></span><code>x)</code>
32fbe13 @xymostech Remove places khan-exercises manually sets font-size
xymostech authored Jan 7, 2015
82 </div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
83 </div>
84 </div>
85
86 <div class="hints">
e9807ff @jeresig Clean up the exercise files using the new cleaning utility.
jeresig authored Apr 16, 2013
87 <div data-if="FN === 'cos'" data-unwrap="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
88
89 <p>The function starts at its maximum value (ie, <code>f(0)=<var>VSCALE</var></code>), so what kind of function is it?</p>
90
91 <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>
92
93 </div>
94
e9807ff @jeresig Clean up the exercise files using the new cleaning utility.
jeresig authored Apr 16, 2013
95 <div data-else="" data-unwrap="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
96
97 <p>The function starts at zero (ie, <code>f(0)=0</code>), so what kind of function is it?</p>
98
99 <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>
100
101 </div>
102
103 <div>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored Apr 16, 2013
104 <div class="graphie" data-update="graph">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
105 style({
106 stroke: "#00d505",
107 strokeWidth: 2
108 }, function() {
109 plot( function( x ) {
110 return eval( FUNCS );
111 }, [ 0, PERIOD ] );
112 line( [ 0, VSCALE ], [ PERIOD , VSCALE ], { arrows: "&lt;-&gt;" });
113 });
114 </div>
115 <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>
e9807ff @jeresig Clean up the exercise files using the new cleaning utility.
jeresig authored Apr 16, 2013
116 <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>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
117 </div>
118
2e12f20 @jeresig Run clean-exercises on the HTML exercises, fixing the entities inside…
jeresig authored Apr 25, 2013
119 <div data-if="abs( PERIOD - 2 * PI ) < 0.01" data-unwrap="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
120 <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>
121 </div>
122
e9807ff @jeresig Clean up the exercise files using the new cleaning utility.
jeresig authored Apr 16, 2013
123 <div data-else="" data-unwrap="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
124
125 <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>
126
127 <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>
128
129 </div>
130
131 <div>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored Apr 16, 2013
132 <div class="graphie" data-update="graph">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
133 style({
134 stroke: "#00d505",
135 strokeWidth: 2
136 }, function() {
137 var x = FN === "sin" ? PERIOD / 4 : PERIOD;
138 line( [ x, 0 ], [ x, VSCALE ], { arrows: "&lt;-&gt;" });
139 });
140 </div>
141 <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>
142 </div>
143
144 <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>
e9807ff @jeresig Clean up the exercise files using the new cleaning utility.
jeresig authored Apr 16, 2013
145 <div data-else="" data-unwrap="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored Apr 10, 2012
146 <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>
147 <p>To scale the function vertically, multiply the whole thing by <code><var>decFrac( VSCALE )</var></code>.</p>
148 </div>
149
150 <!-- 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. -->
151 <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>
152 </div>
153 </div>
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored Apr 24, 2013
154 </body>
155 </html>
Something went wrong with that request. Please try again.