Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
230 lines (202 sloc) 11.3 KB
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Parabola intuition 2</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="drag">
<div class="vars">
<div data-ensure="X1 !== 0 || Y1 !== 0 || A !== 0.25">
<var id="X1">randRangeNonZero(-10, 10) / 2</var>
<var id="VERTEX_Y">randRangeNonZero(-10, 10) / 2</var>
<div data-ensure="Y1 !== DIR_Y">
<var id="DIR_Y">randRangeNonZero(-16, 16) / 2</var>
<var id="Y1">0.5 * (VERTEX_Y + DIR_Y)</var>
</div>
<var id="A">0.25 / (Y1 - DIR_Y)</var>
</div>
<var id="PRETTY_A">fractionReduce.apply(KhanUtil, toFraction(A, 0.001))</var>
<var id="PRETTY_X1">fractionReduce.apply(KhanUtil, toFraction(X1, 0.001))</var>
<var id="PRETTY_Y1">fractionReduce.apply(KhanUtil, toFraction(Y1, 0.001))</var>
<var id="PRETTY_FOCUS_Y">fractionReduce.apply(KhanUtil, toFraction(VERTEX_Y, 0.001))</var>
<var id="PRETTY_DIR_Y">fractionReduce.apply(KhanUtil, toFraction(DIR_Y, 0.001))</var>
</div>
<p class="question">
Drag the <span class="hint_orange">focus</span> and <span class="hint_orange">directrix</span> to define a
<span class="hint_blue">parabola</span> with the equation:
</p>
<p><code>\qquad y - <var>PRETTY_Y1</var> = <var>PRETTY_A</var>(x - <var>PRETTY_X1</var>)^2</code>.</p>
<div class="graphie" id="grid">
graph.A = A;
graph.X1 = X1;
graph.Y1 = Y1;
graphInit({
range: 10,
scale: 20,
tickStep: 1,
labelStep: 1,
axisArrows: "&lt;-&gt;"
});
addMouseLayer();
graph.directrix = addMovableLineSegment({
coordA: [0, -1],
coordZ: [1, -1],
snapY: 0.25,
vertical: false,
extendLine: true,
normalStyle: {
"stroke": KhanUtil.ORANGE,
"stroke-width": 2
},
highlightStyle: {
"stroke": KhanUtil.ORANGE,
"stroke-width": 4
}
});
graph.directrix.onMove = function(x, y) {
var oldK = graph.currParabola.getDirectrixK();
var coord = this.coordA[1];
graph.currParabola.deltaFocusDirectrix(0, 0, coord - oldK);
graph.updateValues();
};
graph.vertex = addMovablePoint({
coordX: 0,
coordY: 1,
snapX: 0.25,
snapY: 0.25,
});
graph.vertex.onMove = function(coordX, coordY) {
var x = coordX - graph.currParabola.getFocusX();
var y = coordY - graph.currParabola.getFocusY();
graph.currParabola.deltaFocusDirectrix(x, y, 0);
graph.updateValues();
};
style({
stroke: BLUE,
strokeWidth: 3,
fill: "none",
clipRect:[[-10, -10], [20, 20]],
arrows: null
});
graph.updateValues = function() {
redrawParabola();
var x = graph.currParabola.getVertexX();
var y = graph.currParabola.getVertexY();
var xText = x &gt; 0 ? "" : "+";
var yText = y &gt; 0 ? "" : "+";
xText += fractionReduce.apply(KhanUtil, toFraction(-x, 0.001));
yText += fractionReduce.apply(KhanUtil, toFraction(-y, 0.001));
var a = fractionReduce.apply(KhanUtil, toFraction(graph.currParabola.getLeadingCoefficient(), 0.001));
$("#focus-x-label").html("&lt;code&gt;{}" + xText + "&lt;/code&gt;").tex();
$("#focus-y-label").html("&lt;code&gt;{}" + yText + "&lt;/code&gt;").tex();
$("#directrix-label").html("&lt;code&gt;" + a + "&lt;/code&gt;").tex();
};
graph.currParabola = new Parabola(0.25, 0, 0);
graph.currParabola.plot();
graph.setXCoordinate = function() {
graph.vertex.moveTo(X1, graph.currParabola.getFocusY());
};
graph.setSolution = function() {
graph.setXCoordinate();
graph.vertex.moveTo(X1, graph.currParabola.getFocusY());
var k = DIR_Y - graph.currParabola.getDirectrixK();
graph.directrix.coordA = [0, DIR_Y];
graph.directrix.coordZ = [0, DIR_Y];
graph.directrix.transform();
graph.currParabola.deltaFocusDirectrix(0, 0, k);
graph.vertex.moveTo(graph.currParabola.getFocusX(), VERTEX_Y);
}
</div>
<div class="solution" data-type="custom">
<div class="instruction">
<div>
Drag the focus and directrix on the graph to match the equation.
</div><p>
Equation of the parabola:<br>
<code>y</code><span id="focus-y-label"><code>{}+0</code></span>
<code>{}={}</code><span id="directrix-label"><code>\dfrac{1}{4}</code></span>
<code>(x</code><span id="focus-x-label"><code>{}+0</code></span><code>)^2</code>
</p>
</div>
<div class="guess">[
graph.currParabola.getVertexX(),
graph.currParabola.getVertexY(),
graph.currParabola.getLeadingCoefficient()
]</div>
<div class="validator-function">
if (guess[0] === 0 &amp;&amp; guess[1] === 0 &amp;&amp; guess[2] === 0.25) {
return "";
}
return (abs(guess[0] - X1) &lt; 0.001) &amp;&amp; (abs(guess[1] - Y1) &lt; 0.001) &amp;&amp; (abs(guess[2] - A) &lt; 0.001);
</div>
</div>
<div class="hints">
<p>The equation is in the form <code>y - y_1 = a(x - x_1)^2</code>.</p>
<p data-if="A > 0">
The leading coefficient, <code>a</code>, in the equation is <code><var>PRETTY_A</var></code>, which is positive.
Therefore the parabola is upward opening.
</p>
<p data-else="">
The leading coefficient, <code>a</code>, in the equation is <code><var>PRETTY_A</var></code>, which is negative.
Therefore the parabola is downward opening.
</p>
<p>The value of <code>x_1</code> is <code><var>PRETTY_X1</var></code>, what does this number mean for the parabola?</p>
<div data-if="A > 0">
<p>The minimum value of <code><var>PRETTY_A</var>(x - <var>PRETTY_X1</var>)^2</code> occurs when
<code>(x - <var>PRETTY_X1</var>)^2 = 0</code>.</p>
<p>Therefore the vertex of the parabola is at <code>x = <var>PRETTY_X1</var></code>.</p>
</div>
<div data-else="">
<p>The maximum value of <code><var>PRETTY_A</var>(x - <var>PRETTY_X1</var>)^2</code> occurs when
<code>(x - <var>PRETTY_X1</var>)^2 = 0</code>.</p>
<p>Therefore the vertex of the parabola is at <code>x = <var>PRETTY_X1</var></code>.</p>
</div>
<div>
<div>
The focus of the parabola has the same <code>x</code>-coordinate as the vertex,
so move the focus horizontally, so its <code>x</code>-coordinate is <code><var>PRETTY_X1</var></code>.
</div>
<div>
<a class="simple-button" href="javascript:void(0)"
onclick="javascript: graph = KhanUtil.currentGraph.graph; graph.setXCoordinate();">Show me</a>
</div>
</div>
<div>
<p>At <code>x = <var>PRETTY_X1</var></code>, then <code>y - <var>PRETTY_Y1</var> = 0</code>.</p>
<p>
Therefore, the vertex of the parabola is at <code>y = <var>PRETTY_Y1</var></code>.
The focus and directrix should be an equal distance above and below this value.
</p>
</div>
<p>
The number in the denominator of <code>a</code> is twice the distance between the directrix to the focus.
Therefore, the focus and directrix are separated by <code><var>1 / (2 * abs(A))</var></code> units.
</p>
<p data-if="A > 0">
The focus is therefore <code><var>1 / (4 * A)</var></code> units above the vertex,
and the directrix is <code><var>1 / (4 * A)</var></code> units below the vertex.
</p>
<p data-else="">
The focus is therefore <code><var>1 / (4 * -A)</var></code> units below the vertex,
and the directrix is <code><var>1 / (4 * -A)</var></code> units above the vertex.
</p>
<div>
<div>
The focus is at <code>(<var>PRETTY_X1</var>, <var>PRETTY_FOCUS_Y</var>)</code>
and the directrix is at <code>y = <var>PRETTY_DIR_Y</var></code>.
</div>
<div>
<a class="simple-button" href="javascript:void(0)"
onclick="javascript: graph = KhanUtil.currentGraph.graph; graph.setSolution();">Show me</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Something went wrong with that request. Please try again.