Fetching contributors…
Cannot retrieve contributors at this time
181 lines (175 sloc) 8.94 KB
<!DOCTYPE html>
<html data-require="math math-format word-problems graphie">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Identifying slope of a line</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="give-two-points" data-weight="3">
<div class="vars" data-ensure="Math.pow(Y1 - Y2, 2) + Math.pow(X1 - X2, 2) &lt; 36 &amp;&amp; Math.abs(M) !== 1">
<var id="X1">randRange(-9, 8)</var>
<var id="Y1">randRange(-9, 9)</var>
<var id="X2">randRange(X1 + 1, 9)</var>
<var id="Y2">randRange(-9, 9)</var>
<var id="M">(Y1 - Y2) / (X1 - X2)</var>
<var id="GRAPH_IN_QUESTION">randRange( 0, 1 )</var>
</div>
<p class="question">
What is the slope of the line through the points <code>(<var>X1</var>, <var>Y1</var>)</code> and <code>(<var>X2</var>, <var>Y2</var>)</code>?
</p>
<p class="render-answer-area-here"></p>
<div class="graphie" id="slope" data-if="GRAPH_IN_QUESTION">
graphInit({
range: 10,
scale: 20,
tickStep: 1,
labelStep: 1,
unityLabels: false,
labelFormat: function( s ) { return "\\small{" + s + "}"; },
axisArrows: "&lt;-&gt;"
});
line( [X1 - 19, Y1 - 19 * M], [X2 + 19, Y2 + 19 * M], {
stroke: "#888"
} );
style({ fill: PURPLE, stroke: PURPLE });
circle( [X1, Y1], 3/20 );
style({ fill: BLUE, stroke: BLUE });
circle( [X2, Y2], 3/20 );
</div>
<div class="solution"><var>(Y1 - Y2) / (X1 - X2)</var></div>
<div class="hints">
<p>
The slope of a line is the amount of change in the <code>y</code>-coordinate as the <code>x</code>-coordinate increases by one unit.
</p>
<div>
<p>The equation for the slope is:</p>
<p><code>\qquad m = \dfrac{\blue{y_2} - \purple{y_1}}{\blue{x_2} - \purple{x_1}}</code></p>
</div>
<div>
<div class="graphie" data-update="slope">
style({ fill: "", stroke: PINK });
line( [ X1, Y2 ], [ X2, Y2 ] );
style({ stroke: GREEN });
line( [ X1, Y1 ], [ X1, Y2 ] );
</div>
<div>
<p>
Substitute the values for
<code>(\purple{<var>X1</var>}, \purple{<var>Y1</var>})</code> and
<code>(\blue{<var>X2</var>}, \blue{<var>Y2</var>})</code>:
</p>
<p>
<code>\qquad m = \dfrac{\blue{<var>Y2</var>} - \purple{<var>negParens(Y1)</var>}}
{\blue{<var>X2</var>} - \purple{<var>negParens(X1)</var>}} =
\dfrac{\green{<var>Y2 - Y1</var>}}{\pink{<var>X2 - X1</var>}}</code>
</p>
</div>
</div>
<p>So, the slope <code>m</code> is <code><var>fractionReduce( Y2 - Y1, X2 - X1 )</var></code>.</p>
</div>
</div>
<div id="show-four-graphs" data-weight="2">
<div class="vars">
<var id="B">randRange( -3, 3 )</var>
<var id="M_INIT">randRange( 2, 5 )</var>
<var id="SLOPES">[
{ value: M_INIT, display: M_INIT },
{ value: -1 * M_INIT, display: "-" + M_INIT },
{ value: 1 / M_INIT, display: "\\dfrac{1}{" + M_INIT + "}" },
{ value: -1 / M_INIT, display: "-\\dfrac{1}{" + M_INIT + "}" }
]</var>
<var id="COLORS">shuffle([
{ name: i18n._("Blue"), hex: KhanUtil.BLUE },
{ name: i18n._("Purple"), hex: KhanUtil.PURPLE },
{ name: i18n._("Green"), hex: KhanUtil.GREEN },
{ name: i18n._("Pink"), hex: KhanUtil.PINK }
])</var>
<var id="WHICH">randRange( 0, 3 )</var>
<var id="DUMMY">[ 0, 1, 2, 3 ]</var>
<var id="OTHERS">_.filter(DUMMY, function(n) { return n !== WHICH; })</var>
<var id="OTHER_SLOPES">_.map(OTHERS, function(i) {
return "&lt;code&gt;\\color{" + COLORS[i].hex + "}{" + SLOPES[i].display + "}&lt;/code&gt;";
})</var>
<var id="M">SLOPES[WHICH]</var>
</div>
<p class="question">Which graph best depicts a slope of <code><var>M.display</var></code>?</p>
<p class="render-answer-area-here"></p>
<div data-each="DUMMY as index">
<div class="graphie quarter-graph">
graphInit({
range: 6,
scale: 16.9,
tickStep: 1,
labelStep: 1,
labelFormat: function( s ) { return "\\small{" + s + "}"; },
axisArrows: "&lt;-&gt;"
});
style({ stroke: COLORS[index].hex });
label([0,-6], "\\color{" + COLORS[index].hex + "}" +
"{\\text{" + COLORS[index].name + "}}", "below");
plot(function( x ) {
return ( x - 1 ) * SLOPES[index].value + B;
}, [ -11, 11 ]);
</div>
</div>
<div class="solution"><code>\quad \color{<var>COLORS[WHICH].hex</var>}{\text{<var>COLORS[WHICH].name</var>}}</code></div>
<ol class="choices" data-category="true">
<li data-each="DUMMY as index"><code>\quad \color{<var>COLORS[index].hex</var>}{\text{<var>COLORS[index].name</var>}}</code></li>
</ol>
<div class="hints">
<p style="clear: both">
A slope of <code><var>M.display</var></code> means that the <code>y</code>-coordinate changes by <code><var>M.display</var></code>
as the <code>x</code>-coordinate increases by one unit.
</p>
<div>
<p>
The <code>\color{<var>COLORS[WHICH].hex</var>}{\text{<var>COLORS[WHICH].name.toLowerCase()</var>}}</code>
graph has a slope of <code><var>M.display</var></code>.
The other graphs have slopes of <var>toSentence(OTHER_SLOPES)</var>.
</p>
</div>
</div>
</div>
<div id="slopes-zero-infinity" data-type="show-four-graphs" data-weight="1">
<div class="vars">
<var id="SLOPES">[
{ value: M_INIT, display: M_INIT },
{ value: 0, display: 0 },
{ value: 999, display: "undefined" },
{ value: 1 / M_INIT, display: "\\dfrac{1}{" + M_INIT + "}" }
]</var>
<var id="WHICH">randRange(1, 2)</var>
<var id="M">SLOPES[WHICH]</var>
</div>
<p class="question">
<span data-if="WHICH ===1">Which graph best depicts a slope of <code><var>M.display</var></code>?</span>
<span data-else="">Which graph best depicts an undefined slope?</span>
</p>
<div class="hints">
<p style="clear: both" data-if="WHICH === 1">
A slope of <code><var>M.display</var></code> means the
<code>y</code>-coordinate doesn't change at all as the <code>x</code>-coordinate changes.
</p>
<p style="clear: both" data-else="">
A vertical line has an undefined slope.
The <code>x</code>-coordinate doesn't change,
so if we try to calculate the slope between two points with
<code>m = \dfrac{\blue{y_2} - \purple{y_1}}{\blue{x_2} - \purple{x_1}}</code>,
we'll have to divide by zero!
</p>
<p data-if="WHICH === 2">
The <code>\color{<var>COLORS[WHICH].hex</var>}{\text{<var>COLORS[WHICH].name.toLowerCase()</var>}}</code>
graph depicts an undefined slope.
</p><p data-else>
The <code>\color{<var>COLORS[WHICH].hex</var>}{\text{<var>COLORS[WHICH].name.toLowerCase()</var>}}</code>
graph depicts a slope of <code><var>M.display</var></code>.
</p>
</div>
</div>
</div>
</div>
</body>
</html>