Permalink
Fetching contributors…
Cannot retrieve contributors at this time
342 lines (317 sloc) 15.1 KB
<!DOCTYPE html>
<html data-require="math math-format graphie interactive subhints">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Graphing parabolas in all forms</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars" data-ensure="A * H * H + K !== 0">
<var id="A">randRangeNonZero(-5, 5)</var>
<var id="H">randRangeNonZero(-5, 5)</var>
<var id="K">randRangeNonZero(-5, 5)</var>
<var id="A_DISP">A === 1 ? "" : A === -1 ? "-" : A</var>
<var id="X1">H + 1</var>
<var id="Y1">A * (X1 - H) * (X1 - H) + K</var>
<var id="X2">H - 1</var>
<var id="Y2">A * (X2 - H) * (X2 - H) + K</var>
</div>
<p class="question">Graph the following equation:</p>
<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.pointC = addMovablePoint({
coord: [ 0, 5 ],
snapX: 0.5,
snapY: 0.5,
normalStyle: {
stroke: KhanUtil.BLUE,
fill: KhanUtil.BLUE
}
});
// returns true if the three points don't form a parabola (that opens vertically)
graph.invalid = function( p1, p2, p3 ) {
return ( ( p1[ 0 ] - p2[ 0 ] ) * ( p1[ 0 ] - p3[ 0 ] ) * ( p2[ 0 ] - p3[ 0 ] ) === 0 );
};
// Fits a parabola to 3 points
graph.fitParabola = function( p1, p2, p3 ) {
var denom = (p1[0] - p2[0]) * (p1[0] - p3[0]) * (p2[0] - p3[0]);
if ( denom !== 0 ) {
var A = (p3[0] * (p2[1] - p1[1]) + p2[0] * (p1[1] - p3[1]) + p1[0] * (p3[1] - p2[1])) / denom;
var B = ((p3[0] * p3[0]) * (p1[1] - p2[1]) + (p2[0] * p2[0]) * (p3[1] - p1[1]) + (p1[0] * p1[0]) * (p2[1] - p3[1])) / denom;
var C = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
return [ A, B, C ];
} else {
return [ 0, 0, 0 ];
}
};
// A and B can't be in the same place
graph.pointA.onMove = function( x, y ) {
if ( graph.invalid( [ x, y ], graph.pointB.coord, graph.pointC.coord ) ) {
return false;
}
graph.pointA.coord = [ x, y ];
graph.drawParabola();
};
graph.pointB.onMove = function( x, y ) {
if ( graph.invalid( graph.pointA.coord, [ x, y ], graph.pointC.coord ) ) {
return false;
}
graph.pointB.coord = [ x, y ];
graph.drawParabola();
};
graph.pointC.onMove = function( x, y ) {
if ( graph.invalid( graph.pointA.coord, graph.pointB.coord, [ x, y ] ) ) {
return false;
}
graph.pointC.coord = [ x, y ];
graph.drawParabola();
};
graph.parabola = bogusShape;
graph.drawParabola = function() {
graph.parabola.remove();
var coeffs = graph.fitParabola( graph.pointA.coord, graph.pointB.coord, graph.pointC.coord );
style({
stroke: KhanUtil.BLUE
}, function() {
// Plot the parabola
var a = coeffs[0], b = coeffs[1], c = coeffs[2];
graph.parabola = parabola(a, b, c);
graph.parabola.toBack();
});
};
graph.drawParabola();
graph.showSolution = function() {
$( "html, body" ).animate({
scrollTop: $( ".question" ).offset().top
}, {
duration: 500,
easing: "swing",
complete: function() {
var coords = {
x1: graph.pointA.coord[0],
y1: graph.pointA.coord[1],
x2: graph.pointB.coord[0],
y2: graph.pointB.coord[1],
x3: graph.pointC.coord[0],
y3: graph.pointC.coord[1]
};
$( coords ).delay( 100 ).animate({
x1: X1,
y1: Y1,
x2: X2,
y2: Y2,
x3: H,
y3: K
}, {
duration: 500,
easing: "linear",
step: function( now, fx ) {
coords[ fx.prop ] = now;
graph.pointA.setCoord([ coords.x1, coords.y1 ]);
graph.pointB.setCoord([ coords.x2, coords.y2 ]);
graph.pointC.setCoord([ coords.x3, coords.y3 ]);
graph.drawParabola();
}
});
}
});
};
</div>
</div>
<div class="solution" data-type="custom">
<div class="instruction">
Drag the three points to graph the equation.
</div>
<div class="guess">[graph.pointA.coord, graph.pointB.coord, graph.pointC.coord]</div>
<div class="validator-function">
var coeffs = graph.fitParabola(graph.pointA.coord, graph.pointB.coord, graph.pointC.coord);
if (coeffs[0] === 0 &amp;&amp; coeffs[1] === 0 &amp;&amp; coeffs[2] === 5) {
return "";
}
return abs(A - coeffs[0]) &lt; 0.001 &amp;&amp; abs((-2 * A * H) - coeffs[1]) &lt; 0.001 &amp;&amp; abs((A * H * H + K) - coeffs[2]) &lt; 0.001;
</div>
<div class="show-guess">
graph.pointA.setCoord(guess[0]);
graph.pointB.setCoord(guess[1]);
graph.pointC.setCoord(guess[2]);
graph.drawParabola();
</div>
</div>
<div class="problems">
<div id="vertex-form">
<div class="problem" data-apply="prependContents">
<p class="hint_blue">
<code>\qquad y = <var>A_DISP</var>(x - <var>H</var>)^2 + <var>K</var></code>
</p>
</div>
</div>
<div id="standard-form">
<div class="problem" data-apply="prependContents">
<p class="hint_blue">
<code>y = <var>A_DISP</var>x^2 + <var>-2 * A * H</var>x + <var>A * H * H + K</var></code>
</p>
</div>
<div class="hints" data-apply="prependContents">
<p>
We could try plugging in some different <code>x</code>-values, but instead of guessing it might be easier to
convert the equation to vertex form.
</p>
<div>
<p>
Convert the equation to vertex form by completing the square.
[<a href="#" class="show-subhint" data-subhint="complete-square">Show me how</a>]
</p>
<div class="subhint" id="complete-square">
<p>First, move the constant term to the left side of the equation:</p>
<p><code>\qquad
\begin{eqnarray}
y &amp;=&amp; <var>A</var>x^2 + <var>-2 * A * H</var>x + <var>A * H * H + K</var> \\ \\
y + <var>-A * H * H - K</var> &amp;=&amp; <var>A</var>x^2 + <var>-2 * A * H</var>x
\end{eqnarray}
</code></p>
<div data-if="A !== 1">
<p>Next, we can factor out a <code><var>A</var></code> from the right side:</p>
<p><code>\qquad
y + <var>-A * H * H - K</var> = <var>A_DISP</var>(x^2 + <var>-2 * H</var>x)
</code></p>
</div>
<p>
We can complete the square by taking half of the coefficient of our <code>x</code> term, squaring it, and adding it to both sides of the equation.
The coefficient of our <code>x</code> term is <code><var>-2 * H</var></code>, so half of it would be <code><var>-H</var></code>,
and squaring that gives us <code class="hint_blue"><var>H * H</var></code>. <span data-if="A !== 1">Because we're adding the <code><var>H * H</var></code>
inside the parentheses on the right where it's being multiplied by <code><var>A</var></code>, we need to add <code class="hint_blue"><var>A * H * H</var></code>
to the left side to make sure we're adding the same thing to both sides.</span>
</p>
<p><code>\qquad
\begin{eqnarray}
y + <var>-A * H * H - K</var> &amp;=&amp; <var>A_DISP</var>(x^2 + <var>-2 * H</var>x) \\ \\
y + <var>-A * H * H - K</var> + \blue{<var>A * H * H</var>} &amp;=&amp; <var>A_DISP</var>(x^2 + <var>-2 * H</var>x + \blue{<var>H * H</var>}) \\ \\
y - <var>K</var> &amp;=&amp; <var>A_DISP</var>(x^2 + <var>-2 * H</var>x + <var>H * H</var>)
\end{eqnarray}
</code></p>
<p>Now we can rewrite the expression in parentheses as a squared term:</p>
<p><code>\qquad
y - <var>K</var> = <var>A_DISP</var>(x - <var>H</var>)^2
</code></p>
<p>Move the constant term to the right side of the equation. Now the equation is in vertex form:</p>
<p><code>\qquad
y = <var>A_DISP</var>(x - <var>H</var>)^2 + <var>K</var>
</code></p>
</div>
<p><code>\qquad y = <var>A_DISP</var>(x - <var>H</var>)^2 + <var>K</var></code></p>
</div>
</div>
</div>
</div>
<div class="hints">
<div>
<p>When the equation is written in vertex form like this, the vertex is the point <code class="hint_green">(h, k)</code>:</p>
<p><code>\qquad y = a(x - \green{h})^2 + \green{k}</code></p>
</div>
<div>
<p><code>\qquad y = <var>A_DISP</var>(x - \green{<var>H</var>})^2 + \green{<var>K</var>}</code></p>
<p>Examining our equation, we can see the vertex of the parabola is at <code class="hint_green">(<var>H</var>, <var>K</var>)</code>.</p>
<div class="graphie" data-update="grid">
style({
stroke: GREEN,
strokeWidth: 3
}, function() {
line( [ H - 0.3, K - 0.3 ], [ H + 0.3, K + 0.3 ] ).toBack();
line( [ H - 0.3, K + 0.3 ], [ H + 0.3, K - 0.3 ] ).toBack();
});
</div>
</div>
<p>To find another point on the parabola, we can try plugging an <code>x</code> value into the equation.</p>
<div>
<p>
Since the vertex is at <code class="hint_green">x = <var>H</var></code>, let's try one unit to the right and evaluate
the equation at <code class="hint_pink">x = <var>X1</var></code>.
</p>
<p><code>\qquad
\begin{eqnarray}
<var>A_DISP</var>(\pink{x} - <var>H</var>)^2 + <var>K</var> &amp;=&amp; y \\ \\
<var>A_DISP</var>(\pink{<var>X1</var>} - <var>H</var>)^2 + <var>K</var> &amp;=&amp; \pink{<var>Y1</var>}
\end{eqnarray}
</code></p>
<p>Another point on the parabola is <code class="hint_pink">(<var>X1</var>, <var>Y1</var>)</code>
</p><div class="graphie" data-update="grid">
style({
stroke: PINK,
strokeWidth: 3
}, function() {
line( [ X1 - 0.3, Y1 - 0.3 ], [ X1 + 0.3, Y1 + 0.3 ] ).toBack();
line( [ X1 - 0.3, Y1 + 0.3 ], [ X1 + 0.3, Y1 - 0.3 ] ).toBack();
});
</div>
</div>
<div>
<p>A parabola has an <span class="hint_green">axis of symmetry</span> that passes through its vertex.</p>
<div class="graphie" data-update="grid">
style({
stroke: GREEN,
strokeDasharray: "-"
}, function() {
line( [ H, -11 ], [ H, 11 ] ).toBack();
});
</div>
</div>
<div>
<p>
Because the parabola is symmetric, we can reflect the point <code class="hint_pink">(<var>X1</var>, <var>Y1</var>)</code>
across the <span class="hint_green">axis of symmetry</span> to get another point,
<code class="hint_orange">(<var>X2</var>, <var>Y2</var>)</code>, that must
also be on the parabola.
</p>
<div class="graphie" data-update="grid">
style({
stroke: ORANGE,
strokeWidth: 3
}, function() {
line( [ X2 - 0.3, Y2 - 0.3 ], [ X2 + 0.3, Y2 + 0.3 ] ).toBack();
line( [ X2 - 0.3, Y2 + 0.3 ], [ X2 + 0.3, Y2 - 0.3 ] ).toBack();
});
</div>
</div>
<div>
<p class="final_answer">
There is only one graph of a parabola that passes through all three points we found.
<br><input onclick="javascript:KhanUtil.currentGraph.graph.showSolution();" type="button" value="Show me">
</p>
</div>
</div>
</div>
</body>
</html>