Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

344 lines (322 sloc) 16.782 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 linear equations</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="horizontal" data-type="base" data-weight="1">
<div class="vars">
<var id="YINT" data-ensure="YINT != 5">randRangeNonZero( -10, 10 )</var>
<var id="B" data-ensure="B != 1">randRangeNonZero( -5, 5 )</var>
<var id="C">B * YINT</var>
<var id="SLOPE">0</var>
<var id="X_EXAMPLE">randRange( 2, 6 )</var>
</div>
<div class="question">
<p>Graph the following equation:</p>
<p class="hint_blue">
<code><var>expr([ "*", B, "y" ])</var> = <var>C</var></code>
</p>
</div>
<div class="hints">
<div>
<p>
Solve for <code>y</code> to convert <code><var>expr([ "*", B, "y" ])</var> = <var>C</var></code>
to slope-intercept form.
</p>
</div>
<div data-if="B !== 1">
<p>
Divide both sides by <code><var>B</var></code>:
</p><p>
<code>\qquad y = \color{<var>GREEN</var>}{<var>YINT</var>}</code>
</p>
</div>
<div>
<p>
The y-intercept is <code class="hint_green"><var>YINT</var></code>,
and this equation represents a line where <strong class="hint_blue">all</strong> of the points have <code>y = <var>YINT</var></code>.
</p>
</div>
<div>
<p>
Let's pick some points where <code>y = <var>YINT</var></code>.
<code class="hint_green">(-<var>X_EXAMPLE</var>, <var>YINT</var>)</code> and <code class="hint_green">(<var>X_EXAMPLE</var>, <var>YINT</var>)</code> are both good choices.
</p><div class="graphie" data-update="grid">
style({ stroke: GREEN, fill: GREEN }, function() {
graph.exampleA = circle( [ -1 * X_EXAMPLE, YINT ], 0.2 ).toBack();
graph.exampleB = circle( [ X_EXAMPLE, YINT ], 0.2 ).toBack();
});
</div>
<p></p>
</div>
<div>
<p>
We can see that these points line up to form a horizontal line that crosses the y-axis at <code class="hint_green">(0, <var>YINT</var>)</code>.
</p>
<div class="graphie" data-update="grid">
style({ stroke: BLUE, strokeWidth: 2, strokeDasharray: "." }, function() {
plot( function( x ) {
return YINT;
}, [ -11, 11 ] ).toBack();
});
</div>
</div>
</div>
</div>
<div id="vertical" data-type="base" data-weight="1">
<div class="vars">
<var id="XINT">randRangeNonZero( -10, 10 )</var>
<var id="B" data-ensure="B != 1">randRangeNonZero( -5, 5 )</var>
<var id="C">B * XINT</var>
<var id="Y_EXAMPLE">randRange( 2, 6 )</var>
<var id="Y_EXAMPLE_2" data-ensure="Y_EXAMPLE != Y_EXAMPLE_2">randRange( 2, 6 )</var>
</div>
<div class="question">
<p>Graph the following equation:</p>
<p class="hint_blue">
<code><var>expr([ "*", B, "x" ])</var> = <var>C</var></code>
</p>
</div>
<div class="hints">
<div>
<p>
Notice that there is no <code>y</code> in this equation. Try solving for <code>x</code> and see what happens.
</p>
</div>
<div data-if="B !== 1">
<p>
Divide both sides by <code><var>B</var></code>:
</p><p>
<code>\qquad x = \color{<var>GREEN</var>}{<var>XINT</var>}</code>
</p>
</div>
<div>
<p>
This equation represents a line where <strong class="hint_blue">all</strong> of the points have <code>x = <var>XINT</var></code>.
</p>
</div>
<div>
<p>
Let's pick some points where <code>x = <var>XINT</var></code>.
<code class="hint_green">(<var>XINT</var>, -<var>Y_EXAMPLE</var>)</code>, <code class="hint_green">(<var>XINT</var>, <var>Y_EXAMPLE_2</var>)</code> and <code class="hint_green">(<var>XINT</var>, <var>Y_EXAMPLE</var>)</code> are all good choices.
</p><div class="graphie" data-update="grid">
style({ stroke: GREEN, fill: GREEN }, function() {
graph.exampleA = circle( [ XINT, -1 * Y_EXAMPLE ], 0.2 ).toBack();
graph.exampleB = circle( [ XINT, Y_EXAMPLE ], 0.2 ).toBack();
graph.exampleA = circle( [ XINT, Y_EXAMPLE_2 ], 0.2 ).toBack();
});
</div>
<p></p>
</div>
<div>
<p>
We can see that these points line up to form a vertical line that crosses the x-axis at <code class="hint_green">(<var>XINT</var>, 0)</code>.
</p>
<div class="graphie" data-update="grid">
style({ stroke: BLUE, strokeWidth: 2, strokeDasharray: "." }, function() {
line([XINT, -11], [XINT, 11]).toBack();
});
</div>
</div>
</div>
<div class="solution" data-type="custom">
<div class="guess"> [ graph.pointA.coord, graph.pointB.coord ] </div>
<div class="validator-function">
return abs(guess[0][0] - XINT) &lt; 0.001 &amp;&amp; abs(guess[1][0] - XINT) &lt; 0.001;
</div>
<div class="show-guess">
graph.pointA.setCoord( guess[0] );
graph.pointB.setCoord( guess[1] );
graph.line1.transform( true );
</div>
</div>
</div>
<div id="normal" data-type="base" data-weight="6">
<div class="vars">
<var id="SLOPE_FRAC">reduce( randRangeNonZero( -5, 5 ), randRange( 1, 5 ) )</var>
<var id="YINT">randRangeNonZero( max( -10, -10 - SLOPE_FRAC[0] ), min( 10, 10 - SLOPE_FRAC[0] ) )</var>
<var id="SLOPE">SLOPE_FRAC[0] / SLOPE_FRAC[1]</var>
<var id="PRETTY_SLOPE">SLOPE === 1 ? "" : ( SLOPE === -1 ? "-" : fraction( SLOPE_FRAC[0], SLOPE_FRAC[1], true, true ) )</var>
<var id="MULT">randRangeNonZero( -3, 3 )</var>
<var id="A">SLOPE_FRAC[0] * -MULT</var>
<var id="B">SLOPE_FRAC[1] * MULT</var>
<var id="C">SLOPE_FRAC[1] * YINT * MULT</var>
<var id="STD_FORM">random() &lt; 0.3</var>
</div>
<div class="question">
<p>Graph the following equation:</p>
<p class="hint_blue" data-if="STD_FORM">
<code><var>expr([ "+", [ "*", A, "x" ], [ "*", B, "y" ] ])</var> = <var>C</var></code>
</p>
<p class="hint_blue" data-else="">
<code>y = <var>PRETTY_SLOPE</var> x + <var>YINT</var></code>
</p>
</div>
<div class="hints">
<div data-if="STD_FORM" data-unwrap="">
<p>
Convert <code><var>expr([ "+", [ "*", A, "x" ], [ "*", B, "y" ] ])</var> = <var>C</var></code>
to slope-intercept form by solving for <code>y</code>.
</p>
<div>
<p data-if="A < 0">
Add <code><var>abs( A )</var>x</code> to both sides:
</p><p data-else="">
Subtract <code><var>abs( A )</var>x</code> from both sides:
</p><p>
<code>\qquad <var>expr( [ "*", B, "y" ] )</var> = <var>expr([ "+", [ "*", -A, "x" ], C ])</var></code>
</p>
</div>
<div data-if="B !== 1">
<p>
Divide both sides by <code><var>B</var></code>:
</p><p>
<code>\qquad y = <var>expr([ "+", "\\dfrac{" + expr([ "*", -A, "x" ]) + "}{" + B + "}", "\\dfrac{" + C + "}{" + B + "}" ])</var></code>
</p>
</div>
</div>
<div>
<p>
<code>\qquad y = \color{purple}{<var>PRETTY_SLOPE</var>} x \color{<var>GREEN</var>}{+ <var>YINT</var>}</code>
</p><p>
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>.
</p>
</div>
<div>
<p>
The y-intercept is <code class="hint_green"><var>YINT</var></code>, so the line must pass through the point <code class="hint_green">(0, <var>YINT</var>)</code>.
</p>
<div class="graphie" data-update="grid">
style({ stroke: GREEN, fill: GREEN }, function() {
graph.yint = circle( [ 0, YINT ], 0.2 ).toBack();
});
</div>
</div>
<div>
<p>
<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>
<span data-if="abs( SLOPE_FRAC[0] ) !== 1">
For every step we take we must move
<code><var>abs( SLOPE_FRAC[0] )</var></code>
positions
<span data-if="SLOPE_FRAC[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[0] )</var></code>
position
<span data-if="SLOPE_FRAC[0] < 0"><em>down</em> (because it's negative)</span><span data-else="">up</span>.</span>
<span data-if="abs( SLOPE_FRAC[1] ) !== 1">
For every step we take we must also move
<code><var>SLOPE_FRAC[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]</var></code>
position
to the right.</span>
</p>
<div class="graphie" data-update="grid">
style({
stroke: "purple",
strokeWidth: 2,
arrows: "-&gt;"
}, function() {
path([ [ 0, YINT ], [ 0, YINT + SLOPE_FRAC[0] ] ]).toBack();
path([ [ 0, YINT + SLOPE_FRAC[0] ], [ SLOPE_FRAC[1], YINT + SLOPE_FRAC[0] ] ]).toBack();
});
label( [ 0, YINT + SLOPE_FRAC[0] / 2 ], abs( SLOPE_FRAC[0] ) + " \\text{ " + ( SLOPE_FRAC[0] &lt; 0 ? $._("down") : $._("up") ) + "} \\quad", "left", { color: "purple" } );
label( [ 0, YINT + SLOPE_FRAC[0] ], SLOPE_FRAC[1] + " \\text{ " + $._("right") + "}", ( SLOPE_FRAC[0] &lt; 0 ? "below right" : "above right" ), { color: "purple" } );
graph.yint.toBack();
</div>
</div>
<div>
<p>So the line must also pass through <code class="hint_purple">(<var>SLOPE_FRAC[1]</var>, <var>YINT + SLOPE_FRAC[0]</var>)</code></p>
<div class="graphie" data-update="grid">
style({ stroke: BLUE, strokeWidth: 2, strokeDasharray: "." }, function() {
plot( function( x ) {
return x * SLOPE + YINT;
}, [ -11, 11 ] ).toBack();
});
</div>
</div>
</div>
</div>
<div id="base" data-weight="0">
<div class="vars"></div>
<div class="question"></div>
<div class="problem">
<div class="graphie" 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", "above" );
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.line1 = addMovableLineSegment({
pointA: graph.pointA,
pointZ: graph.pointB,
fixed: true,
extendLine: true
});
// A and B can't be in the same place
graph.pointA.onMove = function( x, y ) {
return ( x != graph.pointB.coord[0] || y != graph.pointB.coord[1] );
}
graph.pointB.onMove = function( x, y ) {
return ( x != graph.pointA.coord[0] || y != graph.pointA.coord[1] );
}
graph.pointA.toFront();
graph.pointB.toFront();
</div>
</div>
<div class="solution" data-type="custom">
<div class="guess"> [ graph.pointA.coord, graph.pointB.coord ] </div>
<div class="validator-function">
if (_.isEqual(guess, [[-5, 5], [5, 5]])) {
return "";
}
var slope = ( guess[1][1] - guess[0][1] ) / ( guess[1][0] - guess[0][0] );
var yint = slope * ( 0 - guess[0][0] ) + guess[0][1];
return abs( SLOPE - slope ) &lt; 0.001 &amp;&amp; abs( YINT - yint ) &lt; 0.001;
</div>
<div class="show-guess">
graph.pointA.setCoord( guess[0] );
graph.pointB.setCoord( guess[1] );
graph.line1.transform( true );
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.