<!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 and solving 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>
                <var id="EDGE_POINT" data-ensure="abs(EDGE_POINT[0]) < 10 && abs(EDGE_POINT[1]) < 10">(function() {
                    // Create a point on one of the lines
                    var minN = -floor((9 + X) / abs(SLOPE_FRAC_1[1]));
                    var maxN = floor((9 - X) / abs(SLOPE_FRAC_1[1]));
                    var n = randRange(minN, maxN);
                    if (rand(2) &lt; 1) {
                        return [X + n * SLOPE_FRAC_1[1], Y + n * SLOPE_FRAC_1[0]];
                    } else {
                        return [X + n * SLOPE_FRAC_2[1], Y + n * SLOPE_FRAC_2[0]];
                    }
                })()</var>
                <!-- !/3 of the time one of the points should be on the line -->
                <var id="POINT">randFromArray([
                    [randRangeExclude(-9, 9, [-1, -2]), randRangeExclude(-9, 9, [-1, -2])],
                    [randRangeExclude(-9, 9, [-1, -2]), randRangeExclude(-9, 9, [-1, -2])],
                    EDGE_POINT
                ])
                </var>
                <var id="POINT_SOLUTION">(function() {
                    var p = POINT[1];
                    var p1 = SLOPE_1 * POINT[0] + YINT_1;
                    var p2 = SLOPE_2 * POINT[0] + YINT_2;

                    return ((COMP_1 === "&lt;" &amp;&amp; p &lt; p1) || (COMP_1 === "≤" &amp;&amp; p &lt;= p1) ||
                            (COMP_1 === "&gt;" &amp;&amp; p &gt; p1) || (COMP_1 === "≥" &amp;&amp; p &gt;= p1)) &amp;&amp;
                           ((COMP_2 === "&lt;" &amp;&amp; p &lt; p2) || (COMP_2 === "≤" &amp;&amp; p &lt;= p2) ||
                            (COMP_2 === "&gt;" &amp;&amp; p &gt; p2) || (COMP_2 === "≥" &amp;&amp; p &gt;= p2));
                })()</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>

                <p>
                    Is <code>(<var>POINT[0]</var>, <var>POINT[1]</var>)</code> a solution to this system of the inequalities?
                </p>

                <div class="render-answer-area-here"></div>
            </div>

            <div class="solution" data-type="multiple">
                <div class="instruction">
                    <ul>
                        <li>
                            <label>
                                <input id="yes" checked name="isSolution" type="radio">
                                <span>Yes</span>
                            </label>
                        </li>
                        <li>
                            <label>
                                <input id="no" name="isSolution" type="radio">
                                <span>No</span>
                            </label>
                        </li>
                    </ul>
                </div>

                <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,
                        $("input[name='isSolution']:checked").attr("id")]
                    </div>
                    <div class="validator-function">
                        if (_.isEqual(guess, [[-5,5],[5,5],false,true,[-5,-5],[5,-5],true,true])) {
                            return "";
                        }

                        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 POINT_SOLUTION === (guess[8] === 'yes') &amp;&amp;
                            (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>
            <p>
                Let's first graph the boundary lines.
                If an inequality is in slope-intercept form, we can use it to
                determine the slope and the <code>y</code>-intercept of the line.
                If an inequality isn't in slope-intercept form, let's convert it to this form.
            </p>
            <p>
                The inequality signs in each inequality then tell us which side of
                the lines are to be shaded and whether the lines are solid or dashed.
            </p>
            <p>
                Finally, we can see whether or not our given point lies in the shaded area
                representing both inequalities to check if it's a solution of the system.
            </p>
        </div>

        <div>
            <div data-if="STD_FORM_1">
                <p>
                    The first inequality,
                    <code>\blue{<var>expr(["+", ["*", A_1, "x"], ["*", B_1, "y"]])</var><var>STD_FORM_COMP_1</var><var>C_1</var>}</code>,
                    isn't in slope-intercept form. Let's convert it:
                </p>
                <p><code>
                    \qquad\begin{eqnarray}
                    <var>expr(["+", ["*", A_1, "x"], ["*", B_1, "y"]])</var> &amp;<var>STD_FORM_COMP_1</var>&amp; <var>C_1</var> \\
                    <var>coefficient(B_1)</var>y &amp;<var>STD_FORM_COMP_1</var>&amp; <var>expr([ "+", [ "*", -A_1, "x" ], C_1 ])</var> \\
                    y &amp;<var>COMP_1</var>&amp; <var>PRETTY_SLOPE_1</var> + <var>YINT_1</var>
                    \end{eqnarray}
                </code></p>
                <p>
                    Now we see the slope of the line is
                    <code>\pink{<var>fractionReduce(SLOPE_FRAC_1[0], SLOPE_FRAC_1[1])</var>}</code>
                    and its <code>y</code>-intercept is <code>\purple{(0, <var>YINT_1</var>)}.</code>
                </p>
            </div>
            <p data-else="">
                The first inequality, <code>\blue{y <var>COMP_1</var> <var>PRETTY_SLOPE_1</var> + <var>YINT_1</var>}</code>,
                is in slope-intercept form: the slope of the line is
                <code><var>fractionReduce(SLOPE_FRAC_1[0], SLOPE_FRAC_1[1])</var></code>
                and its <code>y</code>-intercept is <code>(0, <var>YINT_1</var>).</code>
            </p>

            <p>
                According to the slope, we know the line also passes through
                <code>(0 \pink{+ <var>SLOPE_FRAC_1[1]</var>}, <var>YINT_1</var> \purple{+ <var>SLOPE_FRAC_1[0]</var>})
                    = (<var>SLOPE_FRAC_1[1]</var>, <var>YINT_1 + SLOPE_FRAC_1[0]</var>)
                </code>.
            </p>

            <div class="graphie" data-update="grid">
                graph.pointA.setCoord([0, YINT_1]);
                graph.pointB.setCoord([SLOPE_FRAC_1[1], YINT_1 + SLOPE_FRAC_1[0]]);
                graph.update();
            </div>
        </div>

        <div>
            <div data-if="STD_FORM_2">
                <p>
                    The second inequality,
                    <code>\green{<var>expr(["+", ["*", A_2, "x"], ["*", B_2, "y"]])</var><var>STD_FORM_COMP_2</var><var>C_2</var>}</code>,
                    isn't in slope-intercept form. Let's convert it:
                </p>
                <p><code>
                    \qquad\begin{eqnarray}
                    <var>expr(["+", ["*", A_2, "x"], ["*", B_2, "y"]])</var> &amp;<var>STD_FORM_COMP_2</var>&amp; <var>C_2</var> \\
                    <var>coefficient(B_2)</var>y &amp;<var>STD_FORM_COMP_2</var>&amp; <var>expr([ "+", [ "*", -A_2, "x" ], C_2 ])</var> \\
                    y &amp;<var>COMP_2</var>&amp; <var>PRETTY_SLOPE_2</var> + <var>YINT_2</var>
                    \end{eqnarray}
                </code></p>
                <p>
                    Now we see the slope of the line is
                    <code>\pink{<var>fractionReduce(SLOPE_FRAC_2[0], SLOPE_FRAC_2[1])</var>}</code>
                    and its <code>y</code>-intercept is <code>\purple{(0, <var>YINT_2</var>)}.</code>
                </p>
            </div>
            <p data-else="">
                The second inequality, <code>\green{y <var>COMP_2</var> <var>PRETTY_SLOPE_2</var> + <var>YINT_2</var>}</code>,
                is in slope-intercept form: the slope of the line is
                <code><var>fractionReduce(SLOPE_FRAC_2[0], SLOPE_FRAC_2[1])</var></code>
                and its <code>y</code>-intercept is <code>(0, <var>YINT_2</var>).</code>
            </p>

            <p>
                According to the slope, we know the line also passes through
                <code>(0 \pink{+ <var>SLOPE_FRAC_2[1]</var>}, <var>YINT_2</var> \purple{+ <var>SLOPE_FRAC_2[0]</var>})
                    = (<var>SLOPE_FRAC_2[1]</var>, <var>YINT_2 + SLOPE_FRAC_2[0]</var>)
                </code>.
            </p>

            <div class="graphie" data-update="grid">
                graph.pointC.setCoord([0, YINT_2]);
                graph.pointD.setCoord([SLOPE_FRAC_2[1], YINT_2 + SLOPE_FRAC_2[0]]);
                graph.update();
            </div>
        </div>

        <div>
            <div data-if="LESS_THAN_1">
                <p data-if="INCLUSIVE_1">
                    According to the sign of the first inequality,
                    <code>\blue{y <var>COMP_1</var> <var>PRETTY_SLOPE_1</var> + <var>YINT_1</var>}</code>,
                    its solution set lies <em>below</em> the boundary line and the line should be <em>solid</em>.
                </p><p data-else="">
                    According to the sign of the first inequality,
                    <code>\blue{y <var>COMP_1</var> <var>PRETTY_SLOPE_1</var> + <var>YINT_1</var>}</code>,
                    its solution set lies <em>below</em> the boundary line and the line should be <em>dashed</em>.
                </p>
            </div><div data-else="">
                <p data-if="INCLUSIVE_1">
                    According to the sign of the first inequality,
                    <code>\blue{y <var>COMP_1</var> <var>PRETTY_SLOPE_1</var> + <var>YINT_1</var>}</code>,
                    its solution set lies <em>above</em> the boundary line and the line should be <em>solid</em>.
                </p><p data-else="">
                    According to the sign of the first inequality,
                    <code>\blue{y <var>COMP_1</var> <var>PRETTY_SLOPE_1</var> + <var>YINT_1</var>}</code>,
                    its solution set lies <em>above</em> the boundary line and the line should be <em>dashed</em>.
                </p>
            </div>

            <div data-if="LESS_THAN_2">
                <p data-if="INCLUSIVE_2">
                    According to the sign of the second inequality,
                    <code>\green{y <var>COMP_2</var> <var>PRETTY_SLOPE_2</var> + <var>YINT_2</var>}</code>,
                    its solution set lies <em>below</em> the boundary line and the line should be <em>solid</em>.
                </p><p data-else="">
                    According to the sign of the second inequality,
                    <code>\green{y <var>COMP_2</var> <var>PRETTY_SLOPE_2</var> + <var>YINT_2</var>}</code>,
                    its solution set lies <em>below</em> the boundary line and the line should be <em>dashed</em>.
                </p>
            </div><div data-else="">
                <p data-if="INCLUSIVE_2">
                    According to the sign of the second inequality,
                    <code>\green{y <var>COMP_2</var> <var>PRETTY_SLOPE_2</var> + <var>YINT_2</var>}</code>,
                    its solution set lies <em>above</em> the boundary line and the line should be <em>solid</em>.
                </p><p data-else="">
                    According to the sign of the second inequality,
                    <code>\green{y <var>COMP_2</var> <var>PRETTY_SLOPE_2</var> + <var>YINT_2</var>}</code>,
                    its solution set lies <em>above</em> the boundary line and the line should be <em>dashed</em>.
                </p>
            </div>

            <div class="graphie" data-update="grid">
                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();
            </div>
        </div>

        <div>
            <div class="graphie" data-update="grid">
                style({ stroke: RED, fill: RED }, function() {
                    circle(POINT, 0.2);
                    label(POINT, "\\red{(" + POINT[0] + ", " + POINT[1] + ")}", "right");
                });
            </div>
            <p data-if="POINT_SOLUTION">
                We can see that the point
                <code>\red{(<var>POINT[0]</var>, <var>POINT[1]</var>)}</code>
                lies in the shaded area representing <em>both</em> inequalities,
                which means that it <em>is</em> a solution of the system represented by the graph.
            </p><p data-else="">
                We can see that the point
                <code>\red{(<var>POINT[0]</var>, <var>POINT[1]</var>)}</code>
                does not lie in the shaded area representing <em>both</em> inequalities,
                which means that it <em>is not</em> a solution of the system represented by the graph.
            </p>
        </div>
    </div>
</div>
</body>
</html>
