Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 315 lines (299 sloc) 16.799 kb
f77fcd7 @spicyj Fix graphing_inequalities
spicyj authored
1 <!DOCTYPE html>
7041f1b @jeresig Re-run the linter on the exercises.
jeresig authored
2 <html data-require="math math-format expressions graphie interactive">
3 <head>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
24b734a @jeresig Clean up the titles of the HTML files.
jeresig authored
5 <title>Graphing linear inequalities</title>
ac1415e @spicyj Use requirejs for module loading
spicyj authored
6 <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
ebe9aa9 @jpulgarin Added exercise graphing inequalities
jpulgarin authored
7 </head>
8 <body>
dba7fb5 @beneater Replace Graphing inequalities with new interactive exercise
beneater authored
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>
67a9f95 @petercollingridge Add 1/3 chance of point being on an inequality
petercollingridge authored
16 <var id="PRETTY_SLOPE">fractionVariable(SLOPE_FRAC[0], SLOPE_FRAC[1], "x")</var>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
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>
67a9f95 @petercollingridge Add 1/3 chance of point being on an inequality
petercollingridge authored
21 <var id="STD_FORM">randFromArray([true, false])</var>
22 <var id="COMP">randFromArray(["&lt;", "&gt;", "≤", "≥"])</var>
23 <var id="STD_FORM_COMP">B &lt; 0 ? { "&lt;": "&gt;", "&gt;": "&lt;", "≤": "≥", "≥": "≤" }[COMP] : COMP</var>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
24 <var id="LESS_THAN">COMP === "&lt;" || COMP === "≤"</var>
25 <var id="INCLUSIVE">COMP === "≥" || COMP === "≤"</var>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
26 </div>
ebe9aa9 @jpulgarin Added exercise graphing inequalities
jpulgarin authored
27
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
28 <p class="question">Graph the following inequality:</p>
ebe9aa9 @jpulgarin Added exercise graphing inequalities
jpulgarin authored
29
e6d5ef8 @MichelleTodd Rearrange answer area content within some exercises
MichelleTodd authored
30 <div class="render-answer-area-here"></div>
31
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
32 <div class="problem">
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
33 <p class="hint_blue" data-if="STD_FORM">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
34 <code><var>expr([ "+", [ "*", A, "x" ], [ "*", B, "y" ] ])</var> <var>STD_FORM_COMP</var> <var>C</var></code>
35 </p>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
36 <p class="hint_blue" data-else="">
67a9f95 @petercollingridge Add 1/3 chance of point being on an inequality
petercollingridge authored
37 <code>y <var>COMP</var> <var>PRETTY_SLOPE</var> + <var>YINT</var></code>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
38 </p>
ebe9aa9 @jpulgarin Added exercise graphing inequalities
jpulgarin authored
39
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
40 <form>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
41 <input onclick="javascript:
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
42 KhanUtil.currentGraph.graph.shadetop = !KhanUtil.currentGraph.graph.shadetop;
43 KhanUtil.currentGraph.graph.update();
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
44 " type="button" value="Shade other side">
d06d34c @xymostech Fix up graphing inequalities exercises (for mobile)
xymostech authored
45 <ul class="inequalities-one-line-radios">
46 <li>
47 <label>
48 <input checked name="dashradio" onclick="javascript:
49 KhanUtil.currentGraph.graph.dasharray = '';
50 KhanUtil.currentGraph.graph.update();
51 " type="radio" value="solid">
52 Solid line
53 </label>
54 </li>
55 <li>
56 <label>
57 <input name="dashradio" onclick="javascript:
58 KhanUtil.currentGraph.graph.dasharray = '- ';
59 KhanUtil.currentGraph.graph.update();
60 " type="radio" value="dashed">
61 Dashed line
62 </label>
63 </li>
64 </ul>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
65 </form>
d06d34c @xymostech Fix up graphing inequalities exercises (for mobile)
xymostech authored
66 <div class="graphie inequalities-padding" id="grid">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
67 graphInit({
68 range: 11,
69 scale: 20,
70 axisArrows: "&lt;-&gt;",
71 tickStep: 1,
72 labelStep: 1,
73 gridOpacity: 0.05,
74 axisOpacity: 0.2,
75 tickOpacity: 0.4,
76 labelOpacity: 0.5
77 });
ebe9aa9 @jpulgarin Added exercise graphing inequalities
jpulgarin authored
78
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
79 label( [ 0, -11 ], "y", "below" );
80 label( [ 11, 0 ], "x", "right" );
ebe9aa9 @jpulgarin Added exercise graphing inequalities
jpulgarin authored
81
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
82 addMouseLayer();
83 graph.pointA = addMovablePoint({
84 coord: [ -5, 5 ],
85 snapX: 0.5,
86 snapY: 0.5,
87 normalStyle: {
88 stroke: KhanUtil.BLUE,
89 fill: KhanUtil.BLUE
90 }
91 });
92 graph.pointB = addMovablePoint({
93 coord: [ 5, 5 ],
94 snapX: 0.5,
95 snapY: 0.5,
96 normalStyle: {
97 stroke: KhanUtil.BLUE,
98 fill: KhanUtil.BLUE
99 }
100 });
101 graph.line1 = bogusShape;
102 graph.shading = bogusShape;
ebe9aa9 @jpulgarin Added exercise graphing inequalities
jpulgarin authored
103
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
104 graph.update = function() {
105 graph.line1.remove();
106 graph.shading.remove();
107 if ( abs( graph.pointB.coord[0] - graph.pointA.coord[0] ) &gt; 0.001 ) {
108 var slope = ( graph.pointB.coord[1] - graph.pointA.coord[1] ) / ( graph.pointB.coord[0] - graph.pointA.coord[0] );
109 var yint = slope * ( 0 - graph.pointA.coord[0] ) + graph.pointA.coord[1];
110 var shadeEdge = ( ( graph.pointA.coord[0] &lt; graph.pointB.coord[0] ) ? graph.shadetop : !graph.shadetop ) ? 11 : -11;
111 style({ stroke: BLUE, strokeWidth: 2, strokeDasharray: graph.dasharray }, function() {
112 graph.line1 = line( [ -11, -11 * slope + yint ], [ 11, 11 * slope + yint ] ).toBack();
113 });
114 style({ fill: BLUE, stroke: null, opacity: KhanUtil.FILL_OPACITY }, function() {
115 graph.shading = path([ [ 11, shadeEdge ], [ 11, 11 * slope + yint ], [ -11, -11 * slope + yint ], [ -11, shadeEdge ] ]);
116 });
ebe9aa9 @jpulgarin Added exercise graphing inequalities
jpulgarin authored
117
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
118 } else {
119 // vertical line
120 var x = graph.pointA.coord[0];
121 var shadeEdge = ( ( graph.pointB.coord[1] &lt; graph.pointA.coord[1] ) ? graph.shadetop : !graph.shadetop ) ? 11 : -11;
122 style({ stroke: BLUE, strokeWidth: 2, strokeDasharray: graph.dasharray }, function() {
123 graph.line1 = line( [ x, -11 ], [ x, 11 ] ).toBack();
124 });
125 style({ fill: BLUE, stroke: null, opacity: KhanUtil.FILL_OPACITY }, function() {
126 graph.shading = path([ [ x, -11 ], [ x, 11 ], [ shadeEdge, 11 ], [ shadeEdge, -11 ] ]);
127 });
128 }
d7e51d9 @beneater Keep the points in front!
beneater authored
129 graph.pointA.toFront();
130 graph.pointB.toFront();
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
131 };
ebe9aa9 @jpulgarin Added exercise graphing inequalities
jpulgarin authored
132
67a9f95 @petercollingridge Add 1/3 chance of point being on an inequality
petercollingridge authored
133 graph.showCorrect = function() {
134 graph.pointA.setCoord([0, YINT]);
135 graph.pointB.setCoord([SLOPE_FRAC[1], YINT + SLOPE_FRAC[0]]);
136 graph.shadetop = graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? LESS_THAN : !LESS_THAN;
137 if (INCLUSIVE) {
138 graph.dasharray = '';
139 $('input[name=dashradio][value=solid]').attr('checked', true);
140 } else {
141 graph.dasharray = '- ';
142 $('input[name=dashradio][value=dashed]').attr('checked', true);
143 }
144 graph.update();
145 };
146
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
147 // A and B can't be in the same place
148 graph.pointA.onMove = function( x, y ) {
149 if ( x != graph.pointB.coord[0] || y != graph.pointB.coord[1] ) {
150 graph.pointA.setCoord([ x, y ]);
151 graph.update();
152 return true;
153 } else {
154 return false;
155 }
156 }
157 graph.pointB.onMove = function( x, y ) {
158 if ( x != graph.pointA.coord[0] || y != graph.pointA.coord[1] ) {
159 graph.pointB.setCoord([ x, y, ]);
160 graph.update();
161 return true;
162 } else {
163 return false;
164 }
165 }
ebe9aa9 @jpulgarin Added exercise graphing inequalities
jpulgarin authored
166
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
167 graph.dasharray = "";
168 graph.shadetop = true;
169 graph.update();
170 graph.pointA.toFront();
171 graph.pointB.toFront();
dba7fb5 @beneater Replace Graphing inequalities with new interactive exercise
beneater authored
172
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
173 </div>
ebe9aa9 @jpulgarin Added exercise graphing inequalities
jpulgarin authored
174
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
175 </div>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
176 <div class="solution" data-type="custom">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
177 <div class="instruction">
178 Drag the two points to move the line into the correct position.
179 </div>
180 <div class="guess">[ graph.pointA.coord, graph.pointB.coord,
181 graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? graph.shadetop : !graph.shadetop,
182 graph.dasharray === "- " ? false : true ]
183 </div>
184 <div class="validator-function">
185 var slope = ( guess[1][1] - guess[0][1] ) / ( guess[1][0] - guess[0][0] );
186 var yint = slope * ( 0 - guess[0][0] ) + guess[0][1];
187 return abs( SLOPE - slope ) &lt; 0.001
188 &amp;&amp; abs( YINT - yint ) &lt; 0.001
189 &amp;&amp; guess[2] === LESS_THAN
190 &amp;&amp; guess[3] === INCLUSIVE;
191 </div>
192 <div class="show-guess">
193 graph.pointA.setCoord( guess[0] );
194 graph.pointB.setCoord( guess[1] );
195 graph.shadetop = graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? guess[2] : !guess[2];
196 if ( guess[3] ) {
197 graph.dasharray = "";
198 $( "input[name=dashradio][value=solid]" ).attr( "checked", true );
199 } else {
200 graph.dasharray = "- ";
201 $( "input[name=dashradio][value=dashed]" ).attr( "checked", true );
202 }
203 graph.update();
204 </div>
205 </div>
206 </div>
207 </div>
dba7fb5 @beneater Replace Graphing inequalities with new interactive exercise
beneater authored
208
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
209 <div class="hints">
cbccff8 @jeresig Apply fixes to exercises again, after fixing some more bugs.
jeresig authored
210 <div data-if="STD_FORM" data-unwrap="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
211 <p>
212 Convert <code><var>expr([ "+", [ "*", A, "x" ], [ "*", B, "y" ] ])</var> <var>STD_FORM_COMP</var> <var>C</var></code>
213 to slope-intercept form by solving for <code>y</code>.
214 </p>
215 <div>
72429d8 @jeresig Re-run the exercises through the linter.
jeresig authored
216 <p data-if="A < 0">
217 Add <code><var>abs( A )</var>x</code> to both sides:
218 </p><p data-else="">
219 Subtract <code><var>abs( A )</var>x</code> from both sides:
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
220 </p><p>
221 <code>\qquad <var>expr( [ "*", B, "y" ] )</var> <var>STD_FORM_COMP</var> <var>expr([ "+", [ "*", -A, "x" ], C ])</var></code>
222 </p>
223 </div>
224 <div data-if="B !== 1">
225 <p>
72429d8 @jeresig Re-run the exercises through the linter.
jeresig authored
226 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>:
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
227 </p><p>
228 <code>\qquad y <var>COMP</var> <var>expr([ "+", "\\dfrac{" + expr([ "*", -A, "x" ]) + "}{" + B + "}", "\\dfrac{" + C + "}{" + B + "}" ])</var></code>
229 </p>
230 </div>
231 </div>
232 <div>
233 <p>
67a9f95 @petercollingridge Add 1/3 chance of point being on an inequality
petercollingridge authored
234 <code>\qquad y <var>COMP</var> \purple{<var>PRETTY_SLOPE</var>} \green{+ <var>YINT</var>}</code>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
235 </p><p>
236 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>.
237 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>.
238 </p>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
239 <div class="graphie" data-update="grid">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
240 style({ stroke: GREEN, fill: GREEN }, function() {
241 graph.yint = circle( [ 0, YINT ], 0.2 ).toBack();
242 });
243 </div>
244 </div>
245 <div>
246 <p>
b8d0f86 @jeresig Re-write the grammar of the graphing inequalities hints to flow better.
jeresig authored
247 <span>The slope is <code class="hint_purple"><var>decimalFraction( SLOPE, true, true )</var></code>. Remember that the slope tells you rise over run.</span>
a84763d @xymostech Fix up most instance of \text{} using the linter
xymostech authored
248 <span data-if="abs( SLOPE_FRAC[0] ) !== 1">
b8d0f86 @jeresig Re-write the grammar of the graphing inequalities hints to flow better.
jeresig authored
249 For every step we take we must move
72429d8 @jeresig Re-run the exercises through the linter.
jeresig authored
250 <code><var>abs( SLOPE_FRAC[0] )</var></code>
9ccf9fb @jeresig Fix mangled ternary var statement.
jeresig authored
251 positions
b8d0f86 @jeresig Re-write the grammar of the graphing inequalities hints to flow better.
jeresig authored
252 <span data-if="SLOPE_FRAC[0] < 0"><em>down</em> (because it's negative)</span><span data-else="">up</span>.</span><span data-else="">
253 For every step we take we must move
3718d22 @jeresig Re-run the linter on the exercises, fixing data-if usage and replacing e...
jeresig authored
254 <code><var>abs( SLOPE_FRAC[0] )</var></code>
9ccf9fb @jeresig Fix mangled ternary var statement.
jeresig authored
255 position
b8d0f86 @jeresig Re-write the grammar of the graphing inequalities hints to flow better.
jeresig authored
256 <span data-if="SLOPE_FRAC[0] < 0"><em>down</em> (because it's negative)</span><span data-else="">up</span>.</span>
a84763d @xymostech Fix up most instance of \text{} using the linter
xymostech authored
257 <span data-if="abs( SLOPE_FRAC[1] ) !== 1">
b8d0f86 @jeresig Re-write the grammar of the graphing inequalities hints to flow better.
jeresig authored
258 For every step we take we must also move
3718d22 @jeresig Re-run the linter on the exercises, fixing data-if usage and replacing e...
jeresig authored
259 <code><var>SLOPE_FRAC[1]</var></code>
9ccf9fb @jeresig Fix mangled ternary var statement.
jeresig authored
260 positions
b8d0f86 @jeresig Re-write the grammar of the graphing inequalities hints to flow better.
jeresig authored
261 to the right.</span><span data-else="">
262 For every step we take we must also move
72429d8 @jeresig Re-run the exercises through the linter.
jeresig authored
263 <code><var>SLOPE_FRAC[1]</var></code>
9ccf9fb @jeresig Fix mangled ternary var statement.
jeresig authored
264 position
9670527 @jeresig Rewrote a number of exercises to better handle pluralization (reducing t...
jeresig authored
265 to the right.</span>
b8d0f86 @jeresig Re-write the grammar of the graphing inequalities hints to flow better.
jeresig authored
266 <span>So the line must also pass through <code class="hint_purple">(<var>SLOPE_FRAC[1]</var>, <var>YINT + SLOPE_FRAC[0]</var>)</code>.</span>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
267 </p>
c6949fe @jeresig Running the clean-exercises.py script against the exercises.
jeresig authored
268 <div class="graphie" data-update="grid">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
269 style({
270 stroke: "purple",
271 strokeWidth: 2,
272 arrows: "-&gt;"
273 }, function() {
274 path([ [ 0, YINT ], [ 0, YINT + SLOPE_FRAC[0] ] ]).toBack();
275 path([ [ 0, YINT + SLOPE_FRAC[0] ], [ SLOPE_FRAC[1], YINT + SLOPE_FRAC[0] ] ]).toBack();
276 });
277 label( [ 0, YINT + SLOPE_FRAC[0] / 2 ], abs( SLOPE_FRAC[0] ) + " \\text{ " + ( SLOPE_FRAC[0] &lt; 0 ? "down" : "up" ) + "} \\quad", "left", { color: "purple" } );
a84763d @xymostech Fix up most instance of \text{} using the linter
xymostech authored
278 label( [ 0, YINT + SLOPE_FRAC[0] ], SLOPE_FRAC[1] + " \\text{ " + $._("right") + "}", ( SLOPE_FRAC[0] &lt; 0 ? "below right" : "above right" ), { color: "purple" } );
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
279 graph.yint.toBack();
280 </div>
281 </div>
72429d8 @jeresig Re-run the exercises through the linter.
jeresig authored
282 <p data-if="LESS_THAN">
283 Since our inequality has a less-than<span data-if="INCLUSIVE"> or equal to</span> sign, that means that any point
284 <strong>below</strong> the line is a solution to the inequality, so the area below
285 the line should be shaded.
286 </p><p data-else="">
287 Since our inequality has a greater-than<span data-if="INCLUSIVE"> or equal to</span> sign, that means that any point
288 <strong>above</strong> the line is a solution to the inequality, so the area above
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
289 the line should be shaded.
290 </p>
291 <div>
72429d8 @jeresig Re-run the exercises through the linter.
jeresig authored
292 <p data-if="INCLUSIVE"><span data-if="LESS_THAN" data-unwrap="">
293 Note that since the sign is less-than or <strong>equal to</strong>, any point on the line is also a solution, so the
969b378 @jeresig Apply the linter to all the HTML exercises.
jeresig authored
294 line should be solid.
72429d8 @jeresig Re-run the exercises through the linter.
jeresig authored
295 </span><span data-else="" data-unwrap="">
296 Note that since the sign is greater-than or <strong>equal to</strong>, any point on the line is also a solution, so the
297 line should be solid.
298 </span></p>
299 <p data-else=""><span data-if="LESS_THAN" data-unwrap="">
300 Note that since the sign is less-than (and not equal to), any point on the line is <strong>not</strong> part of the solution,
3718d22 @jeresig Re-run the linter on the exercises, fixing data-if usage and replacing e...
jeresig authored
301 so the line should be dashed to indicate this.
72429d8 @jeresig Re-run the exercises through the linter.
jeresig authored
302 </span><span data-else="" data-unwrap="">
303 Note that since the sign is greater-than (and not equal to), any point on the line is <strong>not</strong> part of the solution,
304 so the line should be dashed to indicate this.
305 </span></p>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
306 </div>
67a9f95 @petercollingridge Add 1/3 chance of point being on an inequality
petercollingridge authored
307 <div>
308 <input onclick="javascript:KhanUtil.currentGraph.graph.showCorrect();" type="button" value="Show me the correct graph">
309 </div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
310 </div>
dba7fb5 @beneater Replace Graphing inequalities with new interactive exercise
beneater authored
311
312 </div>
7041f1b @jeresig Re-run the linter on the exercises.
jeresig authored
313 </body>
314 </html>
Something went wrong with that request. Please try again.