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

283 lines (270 sloc) 16.883 kb
<!DOCTYPE html>
<html data-require="math math-format expressions graphie">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Equations of parallel and perpendicular lines</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars"></div>
<div class="problems">
<div id="perpendicular-graph" data-weight="2">
<div class="vars">
<var id="M">randRangeNonZero( -3, 3 ) / randRange( 1, 3 )</var>
<var id="M_SIGN">M &gt; 0 ? "" : "-"</var>
<var id="M_PERP_SIGN">M &gt; 0 ? "-" : ""</var>
<var id="M_FRAC">decimalFraction( M, "true", "true" )</var>
<var id="M_PERP_FRAC">decimalFraction( -1 / M, "true", "true" )</var>
<var id="B">randRange( -5, 5 )</var>
<var id="X" data-ensure="abs( ( -1 / M ) * X ) &lt;= 12">randRange( 2, 8 ) * randRangeNonZero( -1, 1 )</var>
<var id="Y" data-ensure="abs( Y - ( -1 / M ) * X ) &lt; 10">randRange( 2, 8 ) * randRangeNonZero( -1, 1 )</var>
<var id="LINE_TYPE">"perpendicular"</var>
</div>
<div class="question">
<p>
Find the slope and y-intercept of the line that is <code>\green{\text{<var>LINE_TYPE</var>}}</code> to <code>\blue{y =
<span data-if="abs( M_FRAC ) !== 1"><var>M_FRAC</var></span>
<span data-else=""><var>M_SIGN</var></span>x
<span data-if="B !== 0">+ <var>B</var></span>}</code> and passes through the point <code>\red{(<var>X</var>, <var>Y</var>)}</code>.
</p>
<p class="render-answer-area-here"></p>
<div class="graphie" id="grid">
graphInit({
range: [[-10, 10], [-10, 10]],
scale: [18, 18],
tickStep: 1,
labelStep: 1,
unityLabels: false,
labelFormat: function( s ) { return "\\small{" + s + "}"; },
axisArrows: "&lt;-&gt;"
});
plot(function( x ) {
return ( M * x + B );
}, [-10, 10], {
stroke: BLUE
});
circle( [X, Y], 1/4, {
stroke: "none",
fill: "#ff0000"
} );
</div>
</div>
<div class="solution" data-type="multiple">
<p><code>m</code> = <span class="sol short40"><var>-1 / M</var></span></p>
<p><code>b</code> = <span class="sol short40"><var>Y - ( -1 / M * X )</var></span></p>
</div>
<div class="hints">
<p>Lines are considered perpendicular if their slopes are negative reciprocals of each other.</p>
<div>
<p>The slope of the blue line is <code>\blue{<var>M_FRAC</var>}</code>, and its negative reciprocal is <code>\green{<var>M_PERP_FRAC</var>}</code>.</p>
<p>Thus, the equation of our perpendicular line will be of the form <code>\green{y = <span data-if="abs( M_PERP_FRAC ) !== 1"><var>M_PERP_FRAC</var></span><span data-else=""><var>M_PERP_SIGN</var></span>x + b}</code>.</p>
</div>
<div>
<p>We can plug our point, <code>(<var>X</var>, <var>Y</var>)</code>, into this equation to solve for <code>\green{b}</code>, the y-intercept.</p>
<p data-if="M !== -1"><code><var>Y</var> = \green{<span data-if="abs( M_PERP_FRAC ) !== 1"><var>M_PERP_FRAC</var></span><span data-else=""><var>M_PERP_SIGN</var></span>}(<var>X</var>) + \green{b}</code></p>
</div>
<div>
<p><code><var>Y</var> = <var>decimalFraction( -1 / M * X, "true", "true" )</var> + \green{b}</code></p>
<p><code><var>Y</var> - <var>decimalFraction( -1 / M * X, "true", "true" )</var> = \green{b} = <var>decimalFraction( Y - ( -1 / M * X ), "true", "true" )</var></code></p>
</div>
<div>
<p>
The equation of the perpendicular line is <code>\green{y =
<span data-if="abs(M_PERP_FRAC) !== 1"><var>M_PERP_FRAC</var></span>
<span data-else=""><var>M_PERP_SIGN</var></span>x
<span data-if="Y - (-1 / M * X) !== 0"> + <var>decimalFraction( Y - ( -1 / M * X ), "true", "true" )</var></span>}</code>.
</p>
<p>
So <code>\green{m = <var>decimalFraction( -1 / M, "true", "true" )</var>}</code> and
<code>\green{b = <var>decimalFraction( Y - ( -1 / M * X ), "true", "true" )</var>}</code>.
</p>
<div class="graphie" data-update="grid">
plot(function( x ) {
return ( -1 / M * x + ( Y - ( -1 / M * X ) ) );
}, [-10, 10], {
stroke: GREEN
});
</div>
</div>
</div>
</div>
<div id="parallel-graph" data-type="perpendicular-graph" data-weight="2">
<div class="vars">
<var id="LINE_TYPE">"parallel"</var>
<var id="X" data-ensure="abs( M * X ) &lt;= 12">randRange( 2, 8 ) * randRangeNonZero( -1, 1 )</var>
<var id="Y" data-ensure="abs( Y - M * X ) &lt; 10 &amp;&amp; abs( Y - M * X - B ) &gt;= 1">randRange( 2, 8 ) * randRangeNonZero( -1, 1 )</var>
</div>
<div class="solution" data-type="multiple">
<p><code>m</code> = <span class="sol short40"><var>M</var></span></p>
<p><code>b</code> = <span class="sol short40"><var>Y - M * X </var></span></p>
</div>
<div class="hints">
<div>
<p>Parallel lines have the same slope.</p>
<p>The slope of the blue line is <code>\blue{<var>M_FRAC</var>}</code>, so the equation of our parallel line will be of the form <code>\green{y = <span data-if="abs( M_FRAC ) !== 1"><var>M_FRAC</var></span><span data-else=""><var>M_SIGN</var></span>x + b}</code>.</p>
</div>
<div>
<p>We can plug our point, <code>(<var>X</var>, <var>Y</var>)</code>, into this equation to solve for <code>\green{b}</code>, the y-intercept.</p>
<p data-if="M !== 1"><code><var>Y</var> = \green{<span data-if="abs( M_FRAC ) !== 1"><var>M_FRAC</var></span><span data-else=""><var>M_SIGN</var></span>}(<var>X</var>) + \green{b}</code></p>
</div>
<div>
<p><code><var>Y</var> = <var>decimalFraction( M * X, "true", "true" )</var> + \green{b}</code></p>
<p><code><var>Y</var> - <var>decimalFraction( M * X, "true", "true" )</var> = \green{b} = <var>decimalFraction( Y - M * X, "true", "true" )</var></code></p>
</div>
<div>
<p>The equation of the parallel line is <code>\green{y =
<span data-if="abs(M_FRAC) !== 1"><var>M_FRAC</var></span>
<span data-else=""><var>M_SIGN</var></span>x
<span data-if="Y - (M * X) !== 0"> + <var>decimalFraction( Y - M * X, "true", "true" )</var></span>}</code>.
</p>
<p>
So <code>\green{m = <var>decimalFraction( M, "true", "true" )</var>}</code> and
<code>\green{b = <var>decimalFraction( Y - M * X, "true", "true" )</var>}</code>.
</p>
<div class="graphie" data-update="grid">
plot(function( x ) {
return ( M * x + ( Y - M * X ) );
}, [-10, 10], {
stroke: GREEN
});
</div>
</div>
</div>
</div>
<div id="compare-lines" data-ensure="abs( A1 ) !== abs( B1 ) &amp;&amp; abs( A2 ) !== abs( B2 )" data-weight="0">
<div class="vars">
<var id="A1">randRangeNonZero( -5, 5 )</var>
<var id="B1">randRangeNonZero( -5, 5 )</var>
<var id="C1">randRangeNonZero( -5, 5 )</var>
<var id="F">randRangeNonZero( -5, 5 )</var>
<var id="A2">A1 * F</var>
<var id="B2">B1 * F</var>
<var id="C2">C1 * F</var>
<var id="EQ1">expr(["+", ["*", A1, "x"], ["*", B1, "y"]]) + " = " + C1</var>
<var id="EQ2">expr(["+", ["*", A2, "x"], ["*", B2, "y"]]) + " = " + C2</var>
</div>
<div class="question">
<p>What do the following two equations represent?</p>
<p><code><var>EQ1</var></code></p>
<p><code><var>EQ2</var></code></p>
</div>
<div class="solution">Equal lines</div>
<ul class="choices" data-category="true">
<li>Equal lines</li>
<li>Parallel lines</li>
<li>Perpendicular lines</li>
<li>None of the above</li>
</ul>
<div class="hints">
<div>
<div class="graphie" id="grid">
init({
range: [[-10, 10], [-10, 10]],
scale: [20, 20]
});
grid( [-10, 10], [-10, 10], {
stroke: "#ccc"
});
style({
stroke: "#888",
strokeWidth: 2,
arrows: "-&gt;"
});
path( [ [-10, 0], [10, 0] ] );
path( [ [0, -10], [0, 10] ] );
style({
stroke: "#6495ED",
arrows: null
});
plot( function( x ) {
return ( C1 / B1 ) - ( A1 / B1 ) * x;
}, [-10, 10]);
</div>
<p>Putting the first equation in <code>y = mx + b</code> form gives:</p>
<p><code><var>expr(["+", ["*", A1, "x"], ["*", B1, "y"]]) + " = " + C1</var></code></p>
<p><code><var>expr(["*", B1, "y"]) + " = " + expr(["+", ["*", (-1 * A1), "x"], C1])</var></code></p>
<p data-if="B1 !== 1"><code><var>"y = " + fractionReduce( -A1, B1 ) + "x + " + fractionReduce( C1, B1 )</var></code></p>
</div>
<div>
<div class="graphie" data-update="grid">
plot( function( x ) {
return ( C2 / B2 ) - ( A2 / B2 ) * x;
}, [-10, 10]);
</div>
<p>Putting the second equation in <code>y = mx + b</code> form gives:</p>
<p><code><var>expr(["+", ["*", A2, "x"], ["*", B2, "y"]]) + " = " + C2</var></code></p>
<p><code><var>expr(["*", B2, "y"]) + " = " + expr(["+", ["*", (-1 * A2), "x"], C2])</var></code></p>
<p data-if="B2 !== 1"><code><var>"y = " + fractionReduce( -A2, B2 ) + "x + " + fractionReduce( C2, B2 )</var></code></p>
</div>
<p data-if="A1 / B1 === A2 / B2">So the two equations describe equal lines.</p>
</div>
</div>
<div id="different-lines" data-type="compare-lines">
<div class="vars" data-ensure="A1 / B1 !== A2 / B2 &amp;&amp; A1 / B1 !== -B2 / A2">
<var id="A1">randRangeNonZero( -5, 5 )</var>
<var id="A2">randRangeNonZero( -5, 5 )</var>
<var id="B1">randRangeNonZero( -5, 5 )</var>
<var id="B2">randRangeNonZero( -5, 5 )</var>
<var id="C1">randRangeNonZero( -5, 5 )</var>
<var id="C2">randRangeNonZero( -5, 5 )</var>
<var id="EQ1">expr(["+", ["*", A1, "x"], ["*", B1, "y"]]) + " = " + C1</var>
<var id="EQ2">expr(["+", ["*", A2, "x"], ["*", B2, "y"]]) + " = " + C2</var>
</div>
<div class="solution">None of the above</div>
<div class="hints" data-apply="appendContents">
<p>The slopes are not the same, so the lines are not equal or parallel. The slopes are not negative inverses of each other, so the lines are not perpendicular. The correct answer is none of the above.</p>
</div>
</div>
<div id="same-line" data-type="compare-lines">
<div class="vars">
<var id="A1">randRangeNonZero( -5, 5 )</var>
<var id="B1">randRangeNonZero( -5, 5 )</var>
<var id="C1">randRangeNonZero( -5, 5 )</var>
<var id="F">randRangeNonZero( -5, 5 )</var>
<var id="A2">A1 * F</var>
<var id="B2">B1 * F</var>
<var id="C2">C1 * F</var>
<var id="EQ1">expr(["+", ["*", A1, "x"], ["*", B1, "y"]]) + " = " + C1</var>
<var id="EQ2">expr(["+", ["*", A2, "x"], ["*", B2, "y"]]) + " = " + C2</var>
</div>
<div class="solution">Equal lines</div>
</div>
<div id="parallel" data-type="compare-lines">
<div class="vars" data-ensure="C1 * F !== C2 &amp;&amp; C1 * B2 !== C2 * B1">
<var id="A1">randRangeNonZero( -5, 5 )</var>
<var id="B1">randRangeNonZero( -5, 5 )</var>
<var id="C1">randRangeNonZero( -5, 5 )</var>
<var id="F">randRangeNonZero( -5, 5 )</var>
<var id="A2">A1 * F</var>
<var id="B2">B1 * F</var>
<var id="C2">randRange( -5, 5 )</var>
<var id="EQ1">expr(["+", ["*", A1, "x"], ["*", B1, "y"]]) + " = " + C1</var>
<var id="EQ2">expr(["+", ["*", A2, "x"], ["*", B2, "y"]]) + " = " + C2</var>
</div>
<div class="solution">Parallel lines</div>
<div class="hints" data-apply="appendContents">
<p>The slopes are equal, and the y-intercepts are different, so the lines are parallel.</p>
</div>
</div>
<div id="perpendicular" data-type="compare-lines">
<div class="vars">
<var id="A1">randRangeNonZero( -5, 5 )</var>
<var id="B1">randRangeNonZero( -5, 5 )</var>
<var id="C1">randRangeNonZero( -5, 5 )</var>
<var id="F">randRange( 1, 5 )</var>
<var id="A2"> -1 * B1 * F</var>
<var id="B2">A1 * F</var>
<var id="C2">randRangeNonZero( -5, 5 )</var>
<var id="EQ1">expr(["+", ["*", A1, "x"], ["*", B1, "y"]]) + " = " + C1</var>
<var id="EQ2">expr(["+", ["*", A2, "x"], ["*", B2, "y"]]) + " = " + C2</var>
</div>
<div class="solution">Perpendicular lines</div>
<div class="hints" data-apply="appendContents">
<p>The slopes are negative inverses of each other, so the lines are perpendicular.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.