Permalink
Fetching contributors…
Cannot retrieve contributors at this time
526 lines (508 sloc) 30 KB
<!DOCTYPE html>
<html data-require="math math-format expressions graphie interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Graphing systems of inequalities</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div>
<div class="vars">
<div data-ensure="abs(YINT_1 + SLOPE_FRAC_1[0]) &lt;= 10 &amp;&amp; abs(YINT_2 + SLOPE_FRAC_2[0]) &lt;= 10">
<var id="X">randRangeNonZero(-5, 5)</var>
<var id="Y">randRange(-5, 5)</var>
<div data-ensure="abs(YINT_1 - YINT_2) &gt; 3">
<var id="YINT_1">randRangeExclude(-5, 5, [0, Y])</var>
<var id="YINT_2">randRangeExclude(-5, 5, [0, Y])</var>
</div>
<var id="SLOPE_1">(Y - YINT_1) / X</var>
<var id="SLOPE_2">(Y - YINT_2) / X</var>
<var id="SLOPE_FRAC_1">toFraction(SLOPE_1, 0.001)</var>
<var id="SLOPE_FRAC_2">toFraction(SLOPE_2, 0.001)</var>
</div>
<var id="PRETTY_SLOPE_1">fractionVariable(SLOPE_FRAC_1[0], SLOPE_FRAC_1[1], "x")</var>
<var id="PRETTY_SLOPE_2">fractionVariable(SLOPE_FRAC_2[0], SLOPE_FRAC_2[1], "x")</var>
<var id="MULT_1">randRangeNonZero( -3, 3 )</var>
<var id="MULT_2">randRangeNonZero( -3, 3 )</var>
<var id="A_1">SLOPE_FRAC_1[0] * -MULT_1</var>
<var id="A_2">SLOPE_FRAC_2[0] * -MULT_2</var>
<var id="B_1">SLOPE_FRAC_1[1] * MULT_1</var>
<var id="B_2">SLOPE_FRAC_2[1] * MULT_2</var>
<var id="C_1">SLOPE_FRAC_1[1] * YINT_1 * MULT_1</var>
<var id="C_2">SLOPE_FRAC_2[1] * YINT_2 * MULT_2</var>
<var id="STD_FORM_1">randFromArray([ true, false ])</var>
<var id="STD_FORM_2">randFromArray([ true, false ])</var>
<var id="COMP_1">randFromArray([ "&lt;", "&gt;", "≤", "≥" ])</var>
<var id="COMP_2">randFromArray([ "&lt;", "&gt;", "≤", "≥" ])</var>
<var id="STD_FORM_COMP_1">B_1 &lt; 0 ? { "&lt;": "&gt;", "&gt;": "&lt;", "≤": "≥", "≥": "≤" }[ COMP_1 ] : COMP_1</var>
<var id="STD_FORM_COMP_2">B_2 &lt; 0 ? { "&lt;": "&gt;", "&gt;": "&lt;", "≤": "≥", "≥": "≤" }[ COMP_2 ] : COMP_2</var>
<var id="LESS_THAN_1">COMP_1 === "&lt;" || COMP_1 === "≤"</var>
<var id="LESS_THAN_2">COMP_2 === "&lt;" || COMP_2 === "≤"</var>
<var id="INCLUSIVE_1">COMP_1 === "≥" || COMP_1 === "≤"</var>
<var id="INCLUSIVE_2">COMP_2 === "≥" || COMP_2 === "≤"</var>
</div>
<p class="question">
Graph the following system of inequalities:
</p>
<div class="problem">
<p data-if="STD_FORM_1">
<code>\blue{<var>expr([ "+", [ "*", A_1, "x" ], [ "*", B_1, "y" ] ])</var> <var>STD_FORM_COMP_1</var> <var>C_1</var>}</code>
</p><p data-else="">
<code>\blue{y <var>COMP_1</var> <var>PRETTY_SLOPE_1</var> + <var>YINT_1</var>}</code>
</p>
<p data-if="STD_FORM_2">
<code>\green{<var>expr([ "+", [ "*", A_2, "x" ], [ "*", B_2, "y" ] ])</var> <var>STD_FORM_COMP_2</var> <var>C_2</var>}</code>
</p><p data-else="">
<code>\green{y <var>COMP_2</var> <var>PRETTY_SLOPE_2</var> + <var>YINT_2</var>}</code>
</p>
<form>
<span class="hint_blue" style="width: 40px">Inequality 1:</span>
<input onclick="javascript:
KhanUtil.currentGraph.graph.shadetop1 = !KhanUtil.currentGraph.graph.shadetop1;
KhanUtil.currentGraph.graph.update();
" type="button" value="Shade other side">
<ul class="inequalities-one-line-radios">
<li>
<label class="hint_blue">
<input checked name="dashradio1" onclick="javascript:
KhanUtil.currentGraph.graph.dasharray1 = '';
KhanUtil.currentGraph.graph.update();
" type="radio" value="solid">
Solid line
</label>
</li>
<li>
<label class="hint_blue">
<input name="dashradio1" onclick="javascript:
KhanUtil.currentGraph.graph.dasharray1 = '- ';
KhanUtil.currentGraph.graph.update();
" type="radio" value="dashed">
Dashed line
</label>
</li>
</ul>
<br>
<span class="hint_green" style="width: 40px">Inequality 2:</span>
<input onclick="javascript:
KhanUtil.currentGraph.graph.shadetop2 = !KhanUtil.currentGraph.graph.shadetop2;
KhanUtil.currentGraph.graph.update();
" type="button" value="Shade other side">
<ul class="inequalities-one-line-radios">
<li>
<label class="hint_green">
<input checked name="dashradio2" onclick="javascript:
KhanUtil.currentGraph.graph.dasharray2 = '';
KhanUtil.currentGraph.graph.update();
" type="radio" value="solid">
Solid line
</label>
</li>
<li>
<label class="hint_green">
<input name="dashradio2" onclick="javascript:
KhanUtil.currentGraph.graph.dasharray2 = '- ';
KhanUtil.currentGraph.graph.update();
" type="radio" value="dashed">
Dashed line
</label>
</li>
</ul>
</form>
<div class="graphie inequalities-padding" id="grid">
graphInit({
range: 11,
scale: 20,
axisArrows: "&lt;-&gt;",
tickStep: 1,
labelStep: 1,
gridOpacity: 0.05,
axisOpacity: 0.2,
tickOpacity: 0.4,
labelOpacity: 0.5
});
label( [ 0, -11 ], "y", "below" );
label( [ 11, 0 ], "x", "right" );
addMouseLayer();
graph.pointA = addMovablePoint({
coord: [ -5, 5 ],
snapX: 0.5,
snapY: 0.5,
normalStyle: {
stroke: KhanUtil.BLUE,
fill: KhanUtil.BLUE
}
});
graph.pointB = addMovablePoint({
coord: [ 5, 5 ],
snapX: 0.5,
snapY: 0.5,
normalStyle: {
stroke: KhanUtil.BLUE,
fill: KhanUtil.BLUE
}
});
graph.pointC = addMovablePoint({
coord: [ -5, -5 ],
snapX: 0.5,
snapY: 0.5,
normalStyle: {
stroke: KhanUtil.BLUE,
fill: KhanUtil.BLUE
}
});
graph.pointD = addMovablePoint({
coord: [ 5, -5 ],
snapX: 0.5,
snapY: 0.5,
normalStyle: {
stroke: KhanUtil.BLUE,
fill: KhanUtil.BLUE
}
});
graph.set = raphael.set();
graph.update = function() {
graph.set.remove();
if ( abs( graph.pointB.coord[0] - graph.pointA.coord[0] ) &gt; 0.001 ) {
var slope = ( graph.pointB.coord[1] - graph.pointA.coord[1] ) / ( graph.pointB.coord[0] - graph.pointA.coord[0] );
var yint = slope * ( 0 - graph.pointA.coord[0] ) + graph.pointA.coord[1];
var shadeEdge = ( ( graph.pointA.coord[0] &lt; graph.pointB.coord[0] ) ? graph.shadetop1 : !graph.shadetop1 ) ? 11 : -11;
style({ stroke: BLUE, strokeWidth: 2, strokeDasharray: graph.dasharray1 }, function() {
graph.set.push( line( [ -11, -11 * slope + yint ], [ 11, 11 * slope + yint ] ) );
});
style({ fill: BLUE, stroke: null, opacity: KhanUtil.FILL_OPACITY }, function() {
graph.set.push( path([ [ 11, shadeEdge ], [ 11, 11 * slope + yint ], [ -11, -11 * slope + yint ], [ -11, shadeEdge ] ]) );
});
} else {
// vertical line
var x = graph.pointA.coord[0];
var shadeEdge = ( ( graph.pointB.coord[1] &lt; graph.pointA.coord[1] ) ? graph.shadetop1 : !graph.shadetop1 ) ? 11 : -11;
style({ stroke: BLUE, strokeWidth: 2, strokeDasharray: graph.dasharray1 }, function() {
graph.set.push( line( [ x, -11 ], [ x, 11 ] ) );
});
style({ fill: BLUE, stroke: null, opacity: KhanUtil.FILL_OPACITY }, function() {
graph.set.push( path([ [ x, -11 ], [ x, 11 ], [ shadeEdge, 11 ], [ shadeEdge, -11 ] ]) );
});
}
if ( abs( graph.pointD.coord[0] - graph.pointC.coord[0] ) &gt; 0.001 ) {
var slope = ( graph.pointD.coord[1] - graph.pointC.coord[1] ) / ( graph.pointD.coord[0] - graph.pointC.coord[0] );
var yint = slope * ( 0 - graph.pointC.coord[0] ) + graph.pointC.coord[1];
var shadeEdge = ( ( graph.pointC.coord[0] &lt; graph.pointD.coord[0] ) ? graph.shadetop2 : !graph.shadetop2 ) ? 11 : -11;
style({ stroke: GREEN, strokeWidth: 2, strokeDasharray: graph.dasharray2 }, function() {
graph.set.push( line( [ -11, -11 * slope + yint ], [ 11, 11 * slope + yint ] ) );
});
style({ fill: GREEN, stroke: null, opacity: KhanUtil.FILL_OPACITY }, function() {
graph.set.push( path([ [ 11, shadeEdge ], [ 11, 11 * slope + yint ], [ -11, -11 * slope + yint ], [ -11, shadeEdge ] ]) );
});
} else {
// vertical line
var x = graph.pointC.coord[0];
var shadeEdge = ( ( graph.pointD.coord[1] &lt; graph.pointC.coord[1] ) ? graph.shadetop2 : !graph.shadetop2 ) ? 11 : -11;
style({ stroke: GREEN, strokeWidth: 2, strokeDasharray: graph.dasharray2 }, function() {
graph.set.push( line( [ x, -11 ], [ x, 11 ] ) );
});
style({ fill: GREEN, stroke: null, opacity: KhanUtil.FILL_OPACITY }, function() {
graph.set.push( path([ [ x, -11 ], [ x, 11 ], [ shadeEdge, 11 ], [ shadeEdge, -11 ] ]) );
});
}
graph.set.toBack();
};
graph.showCorrect = function() {
graph.pointA.setCoord([ 0, YINT_1 ]);
graph.pointB.setCoord([ SLOPE_FRAC_1[1], YINT_1 + SLOPE_FRAC_1[0] ]);
graph.pointC.setCoord([ 0, YINT_2 ]);
graph.pointD.setCoord([ SLOPE_FRAC_2[1], YINT_2 + SLOPE_FRAC_2[0] ]);
graph.shadetop1 = graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? LESS_THAN_1 : !LESS_THAN_1;
graph.shadetop2 = graph.pointC.coord[0] &gt; graph.pointD.coord[0] ? LESS_THAN_2 : !LESS_THAN_2;
if ( INCLUSIVE_1 ) {
graph.dasharray1 = '';
$( 'input[name=dashradio1][value=solid]' ).attr( 'checked', true );
} else {
graph.dasharray1 = '- ';
$( 'input[name=dashradio1][value=dashed]' ).attr( 'checked', true );
}
if ( INCLUSIVE_2 ) {
graph.dasharray2 = '';
$( 'input[name=dashradio2][value=solid]' ).attr( 'checked', true );
} else {
graph.dasharray2 = '- ';
$( 'input[name=dashradio2][value=dashed]' ).attr( 'checked', true );
}
graph.update();
};
// A and B can't be in the same place
graph.pointA.onMove = function( x, y ) {
if ( x != graph.pointB.coord[0] || y != graph.pointB.coord[1] ) {
graph.pointA.setCoord([ x, y ]);
graph.update();
return true;
} else {
return false;
}
}
graph.pointB.onMove = function( x, y ) {
if ( x != graph.pointA.coord[0] || y != graph.pointA.coord[1] ) {
graph.pointB.setCoord([ x, y, ]);
graph.update();
return true;
} else {
return false;
}
}
// C and D can't be in the same place
graph.pointC.onMove = function( x, y ) {
if ( x != graph.pointD.coord[0] || y != graph.pointD.coord[1] ) {
graph.pointC.setCoord([ x, y ]);
graph.update();
return true;
} else {
return false;
}
}
graph.pointD.onMove = function( x, y ) {
if ( x != graph.pointC.coord[0] || y != graph.pointC.coord[1] ) {
graph.pointD.setCoord([ x, y, ]);
graph.update();
return true;
} else {
return false;
}
}
graph.dasharray1 = "";
graph.dasharray2 = "";
graph.shadetop1 = true;
graph.shadetop2 = false;
graph.update();
graph.pointA.toFront();
graph.pointB.toFront();
graph.pointC.toFront();
graph.pointD.toFront();
</div>
</div>
<div class="solution" data-type="multiple">
<div class="sol" data-type="custom">
<div class="instruction"></div>
<div class="guess">[ graph.pointA.coord, graph.pointB.coord,
graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? graph.shadetop1 : !graph.shadetop1,
graph.dasharray1 === "- " ? false : true,
graph.pointC.coord, graph.pointD.coord,
graph.pointC.coord[0] &gt; graph.pointD.coord[0] ? graph.shadetop2 : !graph.shadetop2,
graph.dasharray2 === "- " ? false : true ]
</div>
<div class="validator-function">
var slope1 = ( guess[1][1] - guess[0][1] ) / ( guess[1][0] - guess[0][0] );
var yint1 = slope1 * ( 0 - guess[0][0] ) + guess[0][1];
var slope2 = ( guess[5][1] - guess[4][1] ) / ( guess[5][0] - guess[4][0] );
var yint2 = slope2 * ( 0 - guess[4][0] ) + guess[4][1];
return (abs(SLOPE_1 - slope1) &lt; 0.001
&amp;&amp; abs(YINT_1 - yint1) &lt; 0.001
&amp;&amp; guess[2] === LESS_THAN_1
&amp;&amp; guess[3] === INCLUSIVE_1
&amp;&amp; abs(SLOPE_2 - slope2) &lt; 0.001
&amp;&amp; abs(YINT_2 - yint2) &lt; 0.001
&amp;&amp; guess[6] === LESS_THAN_2
&amp;&amp; guess[7] === INCLUSIVE_2)
|| (abs(SLOPE_2 - slope1) &lt; 0.001
&amp;&amp; abs(YINT_2 - yint1) &lt; 0.001
&amp;&amp; guess[2] === LESS_THAN_2
&amp;&amp; guess[3] === INCLUSIVE_2
&amp;&amp; abs(SLOPE_1 - slope2) &lt; 0.001
&amp;&amp; abs(YINT_1 - yint2) &lt; 0.001
&amp;&amp; guess[6] === LESS_THAN_1
&amp;&amp; guess[7] === INCLUSIVE_1);
</div>
<div class="show-guess">
graph.pointA.setCoord( guess[0] );
graph.pointB.setCoord( guess[1] );
graph.pointC.setCoord( guess[4] );
graph.pointD.setCoord( guess[5] );
graph.shadetop1 = graph.pointA.coord[0] &gt; graph.pointB.coord[0] ? guess[2] : !guess[2];
graph.shadetop2 = graph.pointC.coord[0] &gt; graph.pointD.coord[0] ? guess[6] : !guess[6];
if ( guess[3] ) {
graph.dasharray1 = "";
$( "input[name=dashradio1][value=solid]" ).attr( "checked", true );
} else {
graph.dasharray1 = "- ";
$( "input[name=dashradio1][value=dashed]" ).attr( "checked", true );
}
if ( guess[7] ) {
graph.dasharray2 = "";
$( "input[name=dashradio2][value=solid]" ).attr( "checked", true );
} else {
graph.dasharray2 = "- ";
$( "input[name=dashradio2][value=dashed]" ).attr( "checked", true );
}
graph.update();
</div>
</div>
</div>
</div>
</div>
<div class="hints">
<div data-if="STD_FORM_1" data-unwrap="">
<p class="hint_blue">
Convert the first inequality, <code><var>expr([ "+", [ "*", A_1, "x" ], [ "*", B_1, "y" ] ])</var> <var>STD_FORM_COMP_1</var> <var>C_1</var></code>,
to slope-intercept form by solving for <code>y</code>.
</p>
<div class="hint_blue">
<p data-if="A_1 < 0">
Add <code><var>abs( A_1 )</var>x</code> to both sides:
</p><p data-else="">
Subtract <code><var>abs( A_1 )</var>x</code> from both sides:
</p><p>
<code>\qquad <var>expr( [ "*", B_1, "y" ] )</var> <var>STD_FORM_COMP_1</var> <var>expr([ "+", [ "*", -A_1, "x" ], C_1 ])</var></code>
</p>
</div>
<div class="hint_blue" data-if="B_1 !== 1">
<p>
Divide both sides by <code><var>B_1</var></code><span data-if="B_1 < 0">. Since you're multiplying or dividing by a negative number, <strong>don't forget</strong> to flip the inequality sign</span>:
</p><p>
<code>\qquad y <var>COMP_1</var> <var>expr([ "+", "\\dfrac{" + expr([ "*", -A_1, "x" ]) + "}{" + B_1 + "}", "\\dfrac{" + C_1 + "}{" + B_1 + "}" ])</var></code>
</p>
</div>
</div>
<div class="hint_blue">
<p>
<code>\qquad y <var>COMP_1</var> \color{purple}{<var>PRETTY_SLOPE_1</var>} \red{+ <var>YINT_1</var>}</code>
</p><p>
The y-intercept is <code class="hint_red"><var>YINT_1</var></code> and the slope is <code class="hint_purple"><var>decimalFraction( SLOPE_1, true, true )</var></code>.
Since the y-intercept is <code class="hint_red"><var>YINT_1</var></code>, the line must pass through the point <code class="hint_red">(0, <var>YINT_1</var>)</code>.
</p>
</div>
<div class="hint_blue">
<p>
<span>The slope is <code class="hint_purple"><var>decimalFraction( SLOPE_1, true, true )</var></code>. Remember that the slope tells you rise over run.</span>
<span data-if='abs( SLOPE_FRAC_1[0] ) !== 1'>
For every step we take we must move
<code><var>abs( SLOPE_FRAC_1[0] )</var></code>
positions
<span data-if="SLOPE_FRAC_1[0] < 0"><em>down</em> (because it's negative)</span><span data-else="">up</span>.</span><span data-else="">
For every step we take we must move
<code><var>abs( SLOPE_FRAC_1[0] )</var></code>
position
<span data-if="SLOPE_FRAC_1[0] < 0"><em>down</em> (because it's negative)</span><span data-else="">up</span>.</span>
<span data-if='abs( SLOPE_FRAC_1[1] ) !== 1'>
For every step we take we must also move
<code><var>SLOPE_FRAC_1[1]</var></code>
positions
to the right.</span><span data-else="">
For every step we take we must also move
<code><var>SLOPE_FRAC_1[1]</var></code>
position
to the right.</span>
<span>So the line must also pass through <code class="hint_purple">(<var>SLOPE_FRAC_1[1]</var>, <var>YINT_1 + SLOPE_FRAC_1[0]</var>)</code>.</span>
</p>
</div>
<p class="hint_blue" data-if="LESS_THAN_1">
Since our inequality has a less-than<span data-if="INCLUSIVE_1"> or equal to</span> sign, that means that any point
<strong>below</strong> the line is a solution to the inequality, so the area below
the line should be shaded.
</p><p class="hint_blue" data-else="">
Since our inequality has a greater-than<span data-if="INCLUSIVE_1"> or equal to</span> sign, that means that any point
<strong>above</strong> the line is a solution to the inequality, so the area above
the line should be shaded.
</p>
<div class="hint_blue">
<p data-if="INCLUSIVE_1"><span data-if="LESS_THAN_1" data-unwrap="">
Note that since the sign is less-than or <strong>equal to</strong>, any point on the line is also a solution, so the
line should be solid.
</span><span data-else="" data-unwrap="">
Note that since the sign is greater-than or <strong>equal to</strong>, any point on the line is also a solution, so the
line should be solid.
</span></p>
<p data-else=""><span data-if="LESS_THAN_1" data-unwrap="">
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,
so the line should be dashed to indicate this.
</span><span data-else="" data-unwrap="">
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,
so the line should be dashed to indicate this.
</span></p>
</div>
<!-- **** begin hints for second equation **** -->
<div data-if="STD_FORM_2" data-unwrap="">
<p class="hint_green">
Convert the second inequality, <code><var>expr([ "+", [ "*", A_2, "x" ], [ "*", B_2, "y" ] ])</var> <var>STD_FORM_COMP_2</var> <var>C_2</var></code>,
to slope-intercept form by solving for <code>y</code>.
</p>
<div class="hint_green">
<p data-if="A_2 < 0">
Add <code><var>abs( A_2 )</var>x</code> to both sides:
</p><p data-else="">
Subtract <code><var>abs( A_2 )</var>x</code> from both sides:
</p><p>
<code>\qquad <var>expr( [ "*", B_2, "y" ] )</var> <var>STD_FORM_COMP_2</var> <var>expr([ "+", [ "*", -A_2, "x" ], C_2 ])</var></code>
</p>
</div>
<div class="hint_green" data-if="B_2 !== 1">
<p>
Divide both sides by <code><var>B_2</var></code><span data-if="B_2 < 0">. Since you're multiplying or dividing by a negative number, <strong>don't forget</strong> to flip the inequality sign</span>:
</p><p>
<code>\qquad y <var>COMP_2</var> <var>expr([ "+", "\\dfrac{" + expr([ "*", -A_2, "x" ]) + "}{" + B_2 + "}", "\\dfrac{" + C_2 + "}{" + B_2 + "}" ])</var></code>
</p>
</div>
</div>
<div class="hint_green">
<p>
<code>\qquad y <var>COMP_2</var> \color{purple}{<var>PRETTY_SLOPE_2</var>} \red{+ <var>YINT_2</var>}</code>
</p><p>
The y-intercept is <code class="hint_red"><var>YINT_2</var></code> and the slope is <code class="hint_purple"><var>decimalFraction( SLOPE_2, true, true )</var></code>.
Since the y-intercept is <code class="hint_red"><var>YINT_2</var></code>, the line must pass through the point <code class="hint_red">(0, <var>YINT_2</var>)</code>.
</p>
</div>
<div class="hint_green">
<p>
<span>The slope is <code class="hint_purple"><var>decimalFraction( SLOPE_2, true, true )</var></code>. Remember that the slope tells you rise over run.</span>
<span data-if='abs( SLOPE_FRAC_2[0] ) !== 1'>
For every step we take we must move
<code><var>abs( SLOPE_FRAC_2[0] )</var></code>
positions
<span data-if="SLOPE_FRAC_2[0] < 0"><em>down</em> (because it's negative)</span><span data-else="">up</span>.</span><span data-else="">
For every step we take we must move
<code><var>abs( SLOPE_FRAC_2[0] )</var></code>
position
<span data-if="SLOPE_FRAC_2[0] < 0"><em>down</em> (because it's negative)</span><span data-else="">up</span>.</span>
<span data-if='abs( SLOPE_FRAC_2[1] ) !== 1'>
For every step we take we must also move
<code><var>SLOPE_FRAC_2[1]</var></code>
positions
to the right.</span><span data-else="">
For every step we take we must also move
<code><var>SLOPE_FRAC_2[1]</var></code>
position
to the right.</span>
<span>So the line must also pass through <code class="hint_purple">(<var>SLOPE_FRAC_2[1]</var>, <var>YINT_2 + SLOPE_FRAC_2[0]</var>)</code>.</span>
</p>
</div>
<p class="hint_green" data-if="LESS_THAN_2">
Since our inequality has a less-than<span data-if="INCLUSIVE_2"> or equal to</span> sign, that means that any point
<strong>below</strong> the line is a solution to the inequality, so the area below
the line should be shaded.
</p><p class="hint_green" data-else="">
Since our inequality has a greater-than<span data-if="INCLUSIVE_2"> or equal to</span> sign, that means that any point
<strong>above</strong> the line is a solution to the inequality, so the area above
the line should be shaded.
</p>
<div class="hint_green">
<p data-if="INCLUSIVE_2"><span data-if="LESS_THAN_2" data-unwrap="">
Note that since the sign is less-than or <strong>equal to</strong>, any point on the line is also a solution, so the
line should be solid.
</span><span data-else="" data-unwrap="">
Note that since the sign is greater-than or <strong>equal to</strong>, any point on the line is also a solution, so the
line should be solid.
</span></p>
<p data-else=""><span data-if="LESS_THAN_2" data-unwrap="">
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,
so the line should be dashed to indicate this.
</span><span data-else="" data-unwrap="">
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,
so the line should be dashed to indicate this.
</span></p>
</div>
<div>
<input onclick="javascript:KhanUtil.currentGraph.graph.showCorrect();" type="button" value="Show me the correct graphs">
</div>
</div>
</div>
</body>
</html>