Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 329 lines (315 sloc) 18.58 kB
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
1 <!DOCTYPE html>
2 <html data-require="math math-format expressions graphie interactive">
3 <head>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Graphing inequalities 2</title>
6 <script src="../khan-exercise.js"></script>
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
7 </head>
8 <body>
9 <div class="exercise">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
10 <div class="problems">
11 <div>
12 <div class="vars">
13 <var id="SLOPE_FRAC">reduce( randRangeNonZero( -5, 5 ), randRange( 1, 5 ) )</var>
14 <var id="YINT">randRangeNonZero( max( -10, -10 - SLOPE_FRAC[0] ), min( 10, 10 - SLOPE_FRAC[0] ) )</var>
15 <var id="SLOPE">SLOPE_FRAC[0] / SLOPE_FRAC[1]</var>
16 <var id="PRETTY_SLOPE">SLOPE === 1 ? "" : ( SLOPE === -1 ? "-" : fraction( SLOPE_FRAC[0], SLOPE_FRAC[1], true, true ) )</var>
17 <var id="MULT">randRangeNonZero( -3, 3 )</var>
18 <var id="A">SLOPE_FRAC[0] * -MULT</var>
19 <var id="B">SLOPE_FRAC[1] * MULT</var>
20 <var id="C">SLOPE_FRAC[1] * YINT * MULT</var>
21 <var id="STD_FORM">randFromArray([ true, false ])</var>
22 <var id="COMP">randFromArray([ "&lt;", "&gt;", "&le;", "&ge;" ])</var>
23 <var id="STD_FORM_COMP">B &lt; 0 ? { "&lt;": "&gt;", "&gt;": "&lt;", "&le;": "&ge;", "&ge;": "&le;" }[ COMP ] : COMP</var>
24 <var id="LESS_THAN">COMP === "&lt;" || COMP === "&le;"</var>
25 <var id="INCLUSIVE">COMP === "&ge;" || COMP === "&le;"</var>
26 <div data-ensure="sqrt( pow( POINT_1[0] - POINT_2[0], 2 ) + pow( POINT_1[1] - POINT_2[1], 2 ) ) > 4">
27 <var id="POINT_1">[ randRangeExclude( -9, 9, [ -3, -2, -1, 0 ] ), randRangeExclude( -9, 9, [ -1, -2 ] ) ]</var>
28 <var id="POINT_2">[ randRangeExclude( -9, 9, [ -3, -2, -1, 0 ] ), randRangeExclude( -9, 9, [ -1, -2 ] ) ]</var>
29 <var id="POINT_1_SOLUTION">
30 (((COMP === "&lt;") &amp;&amp; ( POINT_1[1] &lt; SLOPE * POINT_1[0] + YINT ))
31 || ((COMP === "&le;") &amp;&amp; ( POINT_1[1] &lt;= SLOPE * POINT_1[0] + YINT ))
32 || ((COMP === "&gt;") &amp;&amp; ( POINT_1[1] &gt; SLOPE * POINT_1[0] + YINT ))
33 || ((COMP === "&ge;") &amp;&amp; ( POINT_1[1] &gt;= SLOPE * POINT_1[0] + YINT )))
34 </var>
35 <var id="POINT_2_SOLUTION">
36 (((COMP === "&lt;") &amp;&amp; ( POINT_2[1] &lt; SLOPE * POINT_2[0] + YINT ))
37 || ((COMP === "&le;") &amp;&amp; ( POINT_2[1] &lt;= SLOPE * POINT_2[0] + YINT ))
38 || ((COMP === "&gt;") &amp;&amp; ( POINT_2[1] &gt; SLOPE * POINT_2[0] + YINT ))
39 || ((COMP === "&ge;") &amp;&amp; ( POINT_2[1] &gt;= SLOPE * POINT_2[0] + YINT )))
40 </var>
41 </div>
42 </div>
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
43
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
44 <p class="question">
45 Graph the following inequality and determine if the points
46 <code>(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> or
47 <code>(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> are solutions:
48 </p>
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
49
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
50 <div class="problem">
51 <p class="hint_blue" data-if="STD_FORM">
52 <code><var>expr([ "+", [ "*", A, "x" ], [ "*", B, "y" ] ])</var> <var>STD_FORM_COMP</var> <var>C</var></code>
53 </p>
54 <p class="hint_blue" data-else>
55 <code>y <var>COMP</var> <var>PRETTY_SLOPE</var> x + <var>YINT</var></code>
56 </p>
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
57
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
58 <form>
59 <input type="button" value="Shade other side" onClick="javascript:
60 KhanUtil.currentGraph.graph.shadetop = !KhanUtil.currentGraph.graph.shadetop;
61 KhanUtil.currentGraph.graph.update();
62 " />
63 <label>
64 <input name="dashradio" type="radio" value="solid" checked onClick="javascript:
65 KhanUtil.currentGraph.graph.dasharray = '';
66 KhanUtil.currentGraph.graph.update();
67 " />
68 Solid line
69 </label>
70 <label>
71 <input name="dashradio" type="radio" value="dashed" onClick="javascript:
72 KhanUtil.currentGraph.graph.dasharray = '- ';
73 KhanUtil.currentGraph.graph.update();
74 " />
75 Dashed line
76 </label>
77 </form>
78 <div class="graphie" id="grid">
79 graphInit({
80 range: 11,
81 scale: 20,
82 axisArrows: "&lt;-&gt;",
83 tickStep: 1,
84 labelStep: 1,
85 gridOpacity: 0.05,
86 axisOpacity: 0.2,
87 tickOpacity: 0.4,
88 labelOpacity: 0.5
89 });
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
90
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
91 label( [ 0, -11 ], "y", "below" );
92 label( [ 11, 0 ], "x", "right" );
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
93
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
94 addMouseLayer();
95 graph.pointA = addMovablePoint({
96 coord: [ -5, 5 ],
97 snapX: 0.5,
98 snapY: 0.5,
99 normalStyle: {
100 stroke: KhanUtil.BLUE,
101 fill: KhanUtil.BLUE
102 }
103 });
104 graph.pointB = addMovablePoint({
105 coord: [ 5, 5 ],
106 snapX: 0.5,
107 snapY: 0.5,
108 normalStyle: {
109 stroke: KhanUtil.BLUE,
110 fill: KhanUtil.BLUE
111 }
112 });
113 graph.line1 = bogusShape;
114 graph.shading = bogusShape;
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
115
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
116 graph.update = function() {
117 graph.line1.remove();
118 graph.shading.remove();
119 if ( abs( graph.pointB.coord[0] - graph.pointA.coord[0] ) &gt; 0.001 ) {
120 var slope = ( graph.pointB.coord[1] - graph.pointA.coord[1] ) / ( graph.pointB.coord[0] - graph.pointA.coord[0] );
121 var yint = slope * ( 0 - graph.pointA.coord[0] ) + graph.pointA.coord[1];
122 var shadeEdge = ( ( graph.pointA.coord[0] &lt; graph.pointB.coord[0] ) ? graph.shadetop : !graph.shadetop ) ? 11 : -11;
123 style({ stroke: BLUE, strokeWidth: 2, strokeDasharray: graph.dasharray }, function() {
124 graph.line1 = line( [ -11, -11 * slope + yint ], [ 11, 11 * slope + yint ] ).toBack();
125 });
126 style({ fill: BLUE, stroke: null, opacity: KhanUtil.FILL_OPACITY }, function() {
127 graph.shading = path([ [ 11, shadeEdge ], [ 11, 11 * slope + yint ], [ -11, -11 * slope + yint ], [ -11, shadeEdge ] ]);
128 });
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
129
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
130 } else {
131 // vertical line
132 var x = graph.pointA.coord[0];
133 var shadeEdge = ( ( graph.pointB.coord[1] &lt; graph.pointA.coord[1] ) ? graph.shadetop : !graph.shadetop ) ? 11 : -11;
134 style({ stroke: BLUE, strokeWidth: 2, strokeDasharray: graph.dasharray }, function() {
135 graph.line1 = line( [ x, -11 ], [ x, 11 ] ).toBack();
136 });
137 style({ fill: BLUE, stroke: null, opacity: KhanUtil.FILL_OPACITY }, function() {
138 graph.shading = path([ [ x, -11 ], [ x, 11 ], [ shadeEdge, 11 ], [ shadeEdge, -11 ] ]);
139 });
140 }
141 };
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
142
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
143 // A and B can't be in the same place
144 graph.pointA.onMove = function( x, y ) {
145 if ( x != graph.pointB.coord[0] || y != graph.pointB.coord[1] ) {
146 graph.pointA.setCoord([ x, y ]);
147 graph.update();
148 return true;
149 } else {
150 return false;
151 }
152 }
153 graph.pointB.onMove = function( x, y ) {
154 if ( x != graph.pointA.coord[0] || y != graph.pointA.coord[1] ) {
155 graph.pointB.setCoord([ x, y, ]);
156 graph.update();
157 return true;
158 } else {
159 return false;
160 }
161 }
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
162
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
163 graph.dasharray = "";
164 graph.shadetop = true;
165 graph.update();
166 graph.pointA.toFront();
167 graph.pointB.toFront();
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
168
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
169 </div>
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
170
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
171 </div>
172 <div class="solution" data-type="multiple">
173 <div class="sol" data-type="custom">
174 <div class="instruction">
175 Drag the two points to move the line into the correct position.
176 </div>
177 <div class="guess">[ graph.pointA.coord, graph.pointB.coord,
178 graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? graph.shadetop : !graph.shadetop,
179 graph.dasharray === "- " ? false : true ]
180 </div>
181 <div class="validator-function">
182 var slope = ( guess[1][1] - guess[0][1] ) / ( guess[1][0] - guess[0][0] );
183 var yint = slope * ( 0 - guess[0][0] ) + guess[0][1];
184 return abs( SLOPE - slope ) &lt; 0.001
185 &amp;&amp; abs( YINT - yint ) &lt; 0.001
186 &amp;&amp; guess[2] === LESS_THAN
187 &amp;&amp; guess[3] === INCLUSIVE;
188 </div>
189 <div class="show-guess">
190 graph.pointA.setCoord( guess[0] );
191 graph.pointB.setCoord( guess[1] );
192 graph.shadetop = graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? guess[2] : !guess[2];
193 if ( guess[3] ) {
194 graph.dasharray = "";
195 $( "input[name=dashradio][value=solid]" ).attr( "checked", true );
196 } else {
197 graph.dasharray = "- ";
198 $( "input[name=dashradio][value=dashed]" ).attr( "checked", true );
199 }
200 graph.update();
201 </div>
202 </div>
203 <div class="sol" data-type="set">
204 <p class="input-format">
205 <label><span class="checkbox">POINT_1_SOLUTION</span><code>(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> is a solution</label><br />
206 <label><span class="checkbox">POINT_2_SOLUTION</span><code>(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> is a solution</label>
207 </p>
208 </div>
209 <div class="example">graph the inequality</div>
210 <div class="example">make sure the correct side is shaded</div>
211 <div class="example">make sure the line is correctly shown as solid or dashed</div>
212 </div>
213 </div>
214 </div>
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
215
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
216 <div class="hints">
217 <div data-if="STD_FORM" data-unwrap>
218 <p>
219 Convert <code><var>expr([ "+", [ "*", A, "x" ], [ "*", B, "y" ] ])</var> <var>STD_FORM_COMP</var> <var>C</var></code>
220 to slope-intercept form by solving for <code>y</code>.
221 </p>
222 <div>
223 <p>
224 <var>A &lt; 0 ? "Add" : "Subtract"</var> <code><var>abs( A )</var>x</code> <var>A &lt; 0 ? "to" : "from"</var> both sides:
225 </p><p>
226 <code>\qquad <var>expr( [ "*", B, "y" ] )</var> <var>STD_FORM_COMP</var> <var>expr([ "+", [ "*", -A, "x" ], C ])</var></code>
227 </p>
228 </div>
229 <div data-if="B !== 1">
230 <p>
231 Divide both sides by <code><var>B</var></code><span data-if="B < 0">. Since you're multiplying or dividing by a negative number, <strong>don't forget</strong> to flip the inequality sign</span>:
232 </p><p>
233 <code>\qquad y <var>COMP</var> <var>expr([ "+", "\\dfrac{" + expr([ "*", -A, "x" ]) + "}{" + B + "}", "\\dfrac{" + C + "}{" + B + "}" ])</var></code>
234 </p>
235 </div>
236 </div>
237 <div>
238 <p>
239 <code>\qquad y <var>COMP</var> \color{purple}{<var>PRETTY_SLOPE</var>} x \color{<var>GREEN</var>}{+ <var>YINT</var>}</code>
240 </p><p>
241 The y-intercept is <code class="hint_green"><var>YINT</var></code> and the slope is <code class="hint_purple"><var>decimalFraction( SLOPE, true, true )</var></code>.
242 Since the y-intercept is <code class="hint_green"><var>YINT</var></code>, the line must pass through the point <code class="hint_green">(0, <var>YINT</var>)</code>.
243 </p>
244 <div class="graphie" data-update="grid">
245 style({ stroke: GREEN, fill: GREEN }, function() {
246 graph.yint = circle( [ 0, YINT ], 0.2 ).toBack();
247 });
248 </div>
249 </div>
250 <div>
251 <p>
252 The slope is <code class="hint_purple"><var>decimalFraction( SLOPE, true, true )</var></code>. Remember that
253 the slope tells you rise over run. So in this case for every
254 <code><var>abs( SLOPE_FRAC[0] )</var></code>
255 <var>"position" + ( abs( SLOPE_FRAC[0] ) !== 1 ? "s" : "" )</var>
256 you move
257 <span data-if="SLOPE_FRAC[0] < 0"><em>down</em> (because it's negative)</span>
258 <span data-else>up</span>
259 you must also move
260 <code><var>SLOPE_FRAC[1]</var></code>
261 <var>"position" + ( abs( SLOPE_FRAC[1] ) !== 1 ? "s" : "" )</var>
262 to the right. So the line must also pass through <code class="hint_purple">(<var>SLOPE_FRAC[1]</var>, <var>YINT + SLOPE_FRAC[0]</var>)</code>
263 </p>
264 <div class="graphie" data-update="grid">
265 style({
266 stroke: "purple",
267 strokeWidth: 2,
268 arrows: "-&gt;"
269 }, function() {
270 path([ [ 0, YINT ], [ 0, YINT + SLOPE_FRAC[0] ] ]).toBack();
271 path([ [ 0, YINT + SLOPE_FRAC[0] ], [ SLOPE_FRAC[1], YINT + SLOPE_FRAC[0] ] ]).toBack();
272 });
273 label( [ 0, YINT + SLOPE_FRAC[0] / 2 ], abs( SLOPE_FRAC[0] ) + " \\text{ " + ( SLOPE_FRAC[0] &lt; 0 ? "down" : "up" ) + "} \\quad", "left", { color: "purple" } );
274 label( [ 0, YINT + SLOPE_FRAC[0] ], SLOPE_FRAC[1] + " \\text{ right}", ( SLOPE_FRAC[0] &lt; 0 ? "below right" : "above right" ), { color: "purple" } );
275 graph.yint.toBack();
276 </div>
277 </div>
278 <p>
279 Since our inequality has a <var>LESS_THAN ? "less-than" : "greater-than"</var><var>INCLUSIVE ? " or equal to" : ""</var> sign, that means that any point
280 <strong><var>LESS_THAN ? "below" : "above"</var></strong> the line is a solution to the inequality, so the area <var>LESS_THAN ? "below" : "above"</var>
281 the line should be shaded.
282 </p>
283 <div>
284 <p data-if="INCLUSIVE">
285 Note that since the sign is <var>LESS_THAN ? "less-than" : "greater-than"</var> or <strong>equal to</strong>, any point on the line is also a solution, so the
286 line should be solid.
287 </p>
288 <p data-else>
289 Note that since the sign is <var>LESS_THAN ? "less-than" : "greater-than"</var> (and not equal to), any point on the line is <strong>not</strong> part of the solution,
290 so the line should be dashed to indicate this.
291 </p>
292 </div>
293 <div>
294 <p>
295 Plot each of the points to determine which are solutions:
296 <code class="hint_pink">(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> and
297 <code class="hint_pink">(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code>
298 </p>
299 <div class="graphie" data-update="grid">
300 style({ stroke: PINK, fill: PINK }, function() {
301 circle( [ POINT_1[0], POINT_1[1] ], 0.2 ).toBack();
302 circle( [ POINT_2[0], POINT_2[1] ], 0.2 ).toBack();
303 });
304 </div>
305 </div>
306 <div>
307 <p data-if="POINT_1_SOLUTION && !POINT_2_SOLUTION">
308 <code class="hint_pink">(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> is a solution because it's inside the shaded area, but
309 <code class="hint_pink">(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> is not.
310 </p>
311 <p data-else-if="POINT_2_SOLUTION && !POINT_1_SOLUTION">
312 <code class="hint_pink">(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> is outside the shaded area, so it's not a solution, but
313 <code class="hint_pink">(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> is a solution.
314 </p>
315 <p data-else-if="POINT_1_SOLUTION && POINT_2_SOLUTION"> Both
316 <code class="hint_pink">(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> and
317 <code class="hint_pink">(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> are solutions because they're inside the shaded area.
318 </p>
319 <p data-else> Neither
320 <code class="hint_pink">(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> nor
321 <code class="hint_pink">(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> are solutions because they are not within the shaded area.
322 </p>
323 </div>
324 </div>
10b1798 @beneater Add exercise: Graphing inequalities 2
beneater authored
325
326 </div>
327 </body>
328 </html>
Something went wrong with that request. Please try again.