Permalink
Fetching contributors…
Cannot retrieve contributors at this time
194 lines (183 sloc) 10.5 KB
<!DOCTYPE html>
<html data-require="math math-format expressions graphie">
<head>
<meta charset="UTF-8" />
<title>Converting between point-slope and standard form</title>
<script src="../khan-exercise.js"></script>
<style type="text/css">
#answer_area input[type=text] {
width: 30px;
}
</style>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="standard-to-point-slope" data-weight="2">
<div class="vars">
<var id="A">randRangeNonZero( -5, 5 )</var>
<!-- -3 and 3 are excluded from the range in order to ensure that the slope is a terminating decimal. -->
<var id="B">randRangeExclude( -5, 5, [ -3, 0, 3 ] )</var>
<var id="C">randRangeNonZero( -5, 5 )</var>
<var id="X1">[ -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5 ]</var>
<var id="Y1">$.map( X1, function( x ){ return ( C - A * x ) / B; } )</var>
<var id="HINT_X1">randRange( -5, 5 )</var>
<var id="HINT_Y1">( C - A * HINT_X1 ) / B</var>
<var id="SLOPE">-A / B</var>
<var id="Y_INTERCEPT">C / B</var>
</div>
<p class="question">Convert the following equation from standard form to point-slope.</p>
<code><var>expr([ '*', A, 'x' ])</var> + <var>expr([ '*', B, 'y' ])</var> = <var>C</var></code>
<!-- Custom validation is used to allow for x to be any value. If we allowed a finite range for x, then we could have a set of solutions.-->
<div class="solution" data-type="custom">
<div class="instruction">
<p><code>y - \space</code><input id="solution_y" type="text"></input><code> \quad = \quad</code><input id="solution_m" type="text"></input><code>(x - \space</code><input id="solution_x" type="text"></input><code>)</code></p>
</div>
<div class="guess">
[ $( '#solution_x' ).val(), $( '#solution_y' ).val(), $( '#solution_m' ).val() ]
</div>
<div class="validator-function">
var answer_x = guess[ 0 ];
var answer_y = guess[ 1 ];
var answer_slope = guess[ 2 ];
return abs( ( ( C - A * answer_x ) / B ) - answer_y ) &lt; 0.001 &amp;&amp; abs( answer_slope - SLOPE ) &lt; 0.001;
</div>
<div class="show-guess-solutionarea">
$( '#solution_x' ).val( guess[ 0 ] );
$( '#solution_y' ).val( guess[ 1 ] );
$( '#solution_m' ).val( guess[ 2 ] );
</div>
<p class="example">integers, like <code>6</code></p>
<p class="example"><em>simplified proper</em> fractions, like <code>3/5</code></p>
<p class="example"><em>simplified improper</em> fractions, like <code>7/4</code></p>
<p class="example">and/or <em>exact</em> decimals, like <code>0.75</code></p>
<p class="example">pay attention to the sign of each number you enter to be sure the entire equation is correct</p>
</div>
<div class="hints">
<div>
<p>Point-slope form is:</p>
<p><code>\qquad y - \color{<var>BLUE</var>}{y_{1}} = \color{<var>PINK</var>}{m}(x-\color{<var>BLUE</var>}{x_{1}})</code></p>
<p><code>\qquad</code>where <code class="hint_pink">m</code> is the slope and <code class="hint_blue">(x_{1}, y_{1})</code> is any point on the line.</p>
</div>
<div>
<p>Find the slope of the line:</p>
<p><code>\color{<var>PINK</var>}{m} = -\dfrac{A}{B} = -\dfrac{<var>A</var>}{<var>B</var>} = \color{<var>PINK</var>}{<var>SLOPE</var>}</code></p>
</div>
<p>
We can pick any point we want on the line by plugging in any value for <code class="hint_blue">x_{1}</code>.
For example, let's choose <code class="hint_blue"><var>HINT_X1</var></code>.
</p>
<div>
<p>
Plug in <code class="hint_blue"><var>HINT_X1</var></code> as the value of <code>x</code> in the original equation in order to get
<code class="hint_blue">y_{1}</code>.
</p>
<p><code><var>A</var>\color{<var>BLUE</var>}{(<var>HINT_X1</var>)} <span data-if="B > 0">+</span><span data-else>-</span>
<span data-if="abs( B ) !== 1"><var>abs( B )</var></span>\color{<var>BLUE</var>}{y_1} = <var>C</var></code></p>
</div>
<p><code class="hint_blue">y_1 = <var>( -A * HINT_X1 + C ) / B</var></code></p>
<div>
<p class="final_answer">Thus, the equation can be written in point-slope form as:</p>
<p><code>\qquad y - \color{<var>BLUE</var>}{(<var>HINT_Y1</var>)} = \color{<var>PINK</var>}{<var>SLOPE</var>}(x - \color{<var>BLUE</var>}{(<var>HINT_X1</var>)})</code></p>
<p><code>\qquad <var>plus( "y", -HINT_Y1 )</var> = <span data-if="SLOPE < 0">-</span><span data-if="abs( SLOPE ) !== 1">
<var>abs( SLOPE )</var></span>( <var>plus( "x", -HINT_X1 )</var> )</code></p>
</div>
<div>
<p>Behold the magic of math! The given point <code>(<var>HINT_X1</var>,<var>HINT_Y1</var>)</code> is on the line with slope <code><var>SLOPE</var></code>!</p>
<div class="graphie" id="grid">
graphInit({
range: 10,
scale: 20,
axisArrows: "&lt;-&gt;",
tickStep: 1,
labelStep: 1
});
style({ stroke: BLUE, fill: BLUE });
plot(function( x ) {
return x * SLOPE + Y_INTERCEPT;
}, [ -10, 10 ]);
circle([HINT_X1,HINT_Y1], .25);
</div>
</div>
</div>
</div>
<div id="point-slope-to-standard" data-weight="2">
<div class="vars">
<var id="X1">randRangeNonZero( -5, 5 )</var>
<var id="Y1">randRangeNonZero( -5, 5 )</var>
<var id="SLOPE">randRangeNonZero( -5, 5 )</var>
<var id="A">SLOPE &lt; 0 ? -SLOPE : SLOPE</var>
<var id="B">SLOPE &lt; 0 ? 1 : -1</var>
<var id="C">SLOPE &lt; 0 ? Y1 - SLOPE * X1 : SLOPE * X1 - Y1</var>
<var id="Y_INTERCEPT">C / B</var>
</div>
<p class="question">Convert the following equation from point-slope to standard form.</p>
<p>
<code>y - <var>Y1</var> = <span data-if="abs( SLOPE ) !== 1"><var>SLOPE</var></span>
<span data-if="SLOPE === -1">-</span>( x - <var>X1</var> )</code>
</p>
<p>
In other words, rewrite the equation in the form <code>Ax + By = C</code>. Assume <code>A</code> is positive.
</p>
<div class="solution" data-type="multiple">
<p>
<span class="sol" data-fallback="1"><var>A</var></span><code>\space x \space + \space </code>
<span class="sol" data-fallback="1"><var>B</var></span><code>\space y \quad = \quad </code>
<span class="sol"><var>C</var></span>
</p>
<div class="example">three integers to complete the standard form equation</div>
<div class="example">assume that <code>A</code> is positive</div>
</div>
<div class="hints">
<div data-if="SLOPE !== 1">
<p>Distribute the <code><var>SLOPE</var></code> on the right side of the equation.</p>
<p><code><var>expr([ '+', "y", -1 * Y1 ])</var> =
<var>expr([ '*', SLOPE, "x" ])</var> - <var>SLOPE * X1</var></code></p>
</div>
<div>
<p>Move the <code><var>expr([ '*', SLOPE, "x" ])</var></code> term to the left side of the equation.</p>
<p><code><var>expr([ '*', -SLOPE, "x" ])</var> + y - <var>Y1</var> = <var>-SLOPE * X1</var> </code></p>
</div>
<div>
<p>Move the constant of <code><var>-1 * Y1</var></code> to the right side of the equation.</p>
<p><code><var>expr([ '*', -SLOPE, "x" ])</var> + y = <var>( -SLOPE * X1 ) + Y1</var> </code></p>
</div>
<div data-if="SLOPE >= 0">
<p>Multiply both sides by <code>-1</code>.</p>
<p><code><var>expr([ '*', SLOPE, "x" ])</var> - y = <var>-Y1 + ( SLOPE * X1 )</var></code></p>
</div>
<p class="final_answer">The equation is now in standard form.</p>
<div>
<p>Behold the magic of math! The line
<code>
<span data-if="SLOPE >= 0">
<var>expr([ '*', SLOPE, "x" ])</var> - y = <var>-Y1 + ( SLOPE * X1 )</var>
</span>
<span data-else>
<var>expr([ '*', -SLOPE, "x" ])</var> + y = <var>( -SLOPE * X1 ) + Y1</var>
</span>
</code>
has a slope of <code><var>SLOPE</var></code> and passes through the point
<code>(<var>X1</var>,<var>Y1</var>)</code>.
These values were given in the initial equation written in point slope form.</p>
<div class="graphie" id="grid">
graphInit({
range: 10,
scale: 20,
axisArrows: "&lt;-&gt;",
tickStep: 1,
labelStep: 1
});
style({ stroke: BLUE, fill: BLUE });
plot( function( x ) {
return x * SLOPE + Y_INTERCEPT;
}, [ -10, 10 ] );
circle( [ X1, Y1 ], .25 );
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>