Permalink
Fetching contributors…
Cannot retrieve contributors at this time
344 lines (322 sloc) 16.4 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 ? i18n._("down") : i18n._("up") ) + "} \\quad", "left", { color: "purple" } );
label( [ 0, YINT + SLOPE_FRAC[0] ], SLOPE_FRAC[1] + " \\text{ " + i18n._("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>