Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 243 lines (223 sloc) 9.778 kb
f70a258 @beneater Add exercise: Graphing parabolas 0.5
beneater authored
1 <!DOCTYPE html>
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored
2 <html data-require="math math-format graphie interactive">
3 <head>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
113bddd @spicyj Update the title tags to match real display names
spicyj authored
5 <title>Graphing parabolas in standard form</title>
ac1415e @spicyj Use requirejs for module loading
spicyj authored
6 <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
7 <style>
8 .plug_in > span:first-child {
9 width: 50px;
10 }
11 .plug_in > span {
12 width: 150px;
13 }
14 </style>
f70a258 @beneater Add exercise: Graphing parabolas 0.5
beneater authored
15 </head>
16 <body>
17 <div class="exercise">
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
18 <div class="vars" data-ensure=" B !== 0 || C !== 0">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
19 <var id="A">1</var>
20 <var id="B">randRange( -4, 4 )</var>
21 <var id="C">randRange( [ -5, -7, -8, -9, -9, -9, -8, -7, -5 ][ B + 4 ], [ -3, -1, 1, 3, 5, 3, 1, -1, -3 ][ B + 4 ] )</var>
22 </div>
23
24 <p class="question">Graph the following equation:</p>
25
26 <div class="problem">
d53a57c @jeresig Two doctypes were being output. Only output one.
jeresig authored
27 <div class="graphie" id="grid">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
28 graphInit({
29 range: 11,
30 scale: 20,
31 axisArrows: "&lt;-&gt;",
32 tickStep: 1,
33 labelStep: 1,
34 gridOpacity: 0.05,
35 axisOpacity: 0.2,
36 tickOpacity: 0.4,
37 labelOpacity: 0.5
38 });
39
40 label( [ 0, 11 ], "y", "above" );
41 label( [ 11, 0 ], "x", "right" );
42
43 addMouseLayer();
44 graph.pointA = addMovablePoint({
45 coord: [ 5, 5 ],
46 snapX: 0.5,
47 snapY: 0.5,
48 normalStyle: {
49 stroke: KhanUtil.BLUE,
50 fill: KhanUtil.BLUE
51 }
52 });
53 graph.pointB = addMovablePoint({
54 coord: [ -5, 5 ],
55 snapX: 0.5,
56 snapY: 0.5,
57 normalStyle: {
58 stroke: KhanUtil.BLUE,
59 fill: KhanUtil.BLUE
60 }
61 });
62 graph.pointC = addMovablePoint({
63 coord: [ 0, 5 ],
64 snapX: 0.5,
65 snapY: 0.5,
66 normalStyle: {
67 stroke: KhanUtil.BLUE,
68 fill: KhanUtil.BLUE
69 }
70 });
71
72 // returns true if the three points don't form a parabola (that opens vertically)
73 graph.invalid = function( p1, p2, p3 ) {
74 return ( ( p1[ 0 ] - p2[ 0 ] ) * ( p1[ 0 ] - p3[ 0 ] ) * ( p2[ 0 ] - p3[ 0 ] ) === 0 );
75 };
76
77 // Fits a parabola to 3 points
78 graph.fitParabola = function( p1, p2, p3 ) {
79 var denom = (p1[0] - p2[0]) * (p1[0] - p3[0]) * (p2[0] - p3[0]);
80 if ( denom !== 0 ) {
81 var A = (p3[0] * (p2[1] - p1[1]) + p2[0] * (p1[1] - p3[1]) + p1[0] * (p3[1] - p2[1])) / denom;
82 var B = ((p3[0] * p3[0]) * (p1[1] - p2[1]) + (p2[0] * p2[0]) * (p3[1] - p1[1]) + (p1[0] * p1[0]) * (p2[1] - p3[1])) / denom;
83 var C = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
84 return [ A, B, C ];
85 } else {
86 return [ 0, 0, 0 ];
87 }
88 };
89
90 // A and B can't be in the same place
91 graph.pointA.onMove = function( x, y ) {
92 if ( graph.invalid( [ x, y ], graph.pointB.coord, graph.pointC.coord ) ) {
93 return false;
94 }
95 graph.pointA.coord = [ x, y ];
96 graph.drawParabola();
97 };
98 graph.pointB.onMove = function( x, y ) {
99 if ( graph.invalid( graph.pointA.coord, [ x, y ], graph.pointC.coord ) ) {
100 return false;
101 }
102 graph.pointB.coord = [ x, y ];
103 graph.drawParabola();
104 };
105 graph.pointC.onMove = function( x, y ) {
106 if ( graph.invalid( graph.pointA.coord, graph.pointB.coord, [ x, y ] ) ) {
107 return false;
108 }
109 graph.pointC.coord = [ x, y ];
110 graph.drawParabola();
111 };
112
113 graph.parabola = bogusShape;
114
115 graph.drawParabola = function() {
116 graph.parabola.remove();
117 var coeffs = graph.fitParabola( graph.pointA.coord, graph.pointB.coord, graph.pointC.coord );
118 style({
119 stroke: KhanUtil.BLUE
120 }, function() {
b2647d2 @crm416 Convert remaining parabola exercises and use coefficients for graphie…
crm416 authored
121 // Plot the parabola
122 var a = coeffs[0], b = coeffs[1], c = coeffs[2];
123 graph.parabola = parabola(a, b, c);
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
124 graph.parabola.toBack();
125 });
126 };
127
128 graph.drawParabola();
129
130 graph.showSolution = function() {
131 $( "html, body" ).animate({
132 scrollTop: $( ".question" ).offset().top
133 }, {
134 duration: 500,
135 easing: "swing",
136 complete: function() {
137 var coords = {
138 x1: graph.pointA.coord[0],
139 y1: graph.pointA.coord[1],
140 x2: graph.pointB.coord[0],
141 y2: graph.pointB.coord[1],
142 x3: graph.pointC.coord[0],
143 y3: graph.pointC.coord[1]
144 };
145 $( coords ).delay( 100 ).animate({
146 x1: 2,
147 y1: 2 * 2 + B * 2 + C,
148 x2: -2,
149 y2: -2 * -2 + B * -2 + C,
150 x3: 0,
151 y3: C
152 }, {
153 duration: 500,
154 easing: "linear",
155 step: function( now, fx ) {
156 coords[ fx.prop ] = now;
157 graph.pointA.setCoord([ coords.x1, coords.y1 ]);
158 graph.pointB.setCoord([ coords.x2, coords.y2 ]);
159 graph.pointC.setCoord([ coords.x3, coords.y3 ]);
160 graph.drawParabola();
161 }
162 });
163 }
164 });
165
166 };
167
168 </div>
169 </div>
170
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
171 <div class="solution" data-type="custom">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
172 <div class="instruction">
173 Drag the three points to graph the equation.
174 </div>
175 <div class="guess">[ graph.pointA.coord, graph.pointB.coord, graph.pointC.coord ]</div>
176 <div class="validator-function">
177 var coeffs = graph.fitParabola( graph.pointA.coord, graph.pointB.coord, graph.pointC.coord );
178 if ( coeffs[0] === 0 &amp;&amp; coeffs[1] === 0 &amp;&amp; coeffs[2] === 5 ) {
179 return "";
180 }
181 return abs( A - coeffs[0] ) &lt; 0.001 &amp;&amp; abs( B - coeffs[1] ) &lt; 0.001 &amp;&amp; abs( C - coeffs[2] ) &lt; 0.001;
182 </div>
183 <div class="show-guess">
184 graph.pointA.setCoord( guess[0] );
185 graph.pointB.setCoord( guess[1] );
186 graph.pointC.setCoord( guess[2] );
187 graph.drawParabola();
188 </div>
189 </div>
190
191 <div class="problems">
192 <div id="standard-form">
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
193 <div class="problem" data-apply="prependContents">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
194 <p class="hint_blue">
195 <code>y = <var>plus( "x^2", B + "x", C )</var></code>
196 </p>
197 </div>
198 <div class="hints">
199 <div>
200 <p>
201 Create a table of <code class="hint_green">x</code> and <code class="hint_pink">y</code> values by plugging different values of
202 <code class="hint_green">x</code> into the equation and plot each value:
203 </p>
204 <div class="fake_header plug_in">
62dae32 @cbhl Clean up the exercise files using the new cleaning utility. (IV)
cbhl authored
205 <span><code class="hint_green">x</code></span><span>&nbsp;</span><span><code class="hint_pink">\hphantom{= } \quad y</code></span>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
206 </div>
207 </div>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
208 <div class="fake_row plug_in" data-each="[ -2, -1, 0, 1, 2 ] as x">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
209 <span>
210 <code class="hint_green"><var>x</var></code>
211 </span><span>
212 <code>\color{<var>BLUE</var>}{<var>plus( "(" + x + ")^2", B + "(" + x + ")", C )</var>}</code>
213 </span><span>
214 <code>= \quad \color{<var>PINK</var>}{<var>x * x + B * x + C</var>}</code>
215 </span>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
216 <div class="graphie" data-update="grid">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
217 var y = x * x + B * x + C;
218 style({
219 stroke: PINK,
220 strokeWidth: 3
221 }, function() {
222 line( [ x - 0.3, y - 0.3 ], [ x + 0.3, y + 0.3 ] ).toBack();
223 line( [ x - 0.3, y + 0.3 ], [ x + 0.3, y - 0.3 ] ).toBack();
224 });
225 </div>
226 </div>
227
228 <div>
229 <p class="final_answer">
230 There is only one graph of a parabola that passes through all of the <code>(\color{<var>GREEN</var>}{x}, \color{<var>PINK</var>}{y})</code> points we plotted.
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
231 <br><input onclick="javascript:KhanUtil.currentGraph.graph.showSolution();" type="button" value="Show me">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
232 </p>
233 </div>
234
235 </div>
236 </div>
237
238 </div>
f70a258 @beneater Add exercise: Graphing parabolas 0.5
beneater authored
239
240 </div>
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored
241 </body>
242 </html>
Something went wrong with that request. Please try again.