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

107 lines (95 sloc) 4.823 kb
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Parabola intuition 1</title>
<script src="../khan-exercise.js"></script>
<style>
.info-box .mini-button {
padding: 0px 5px;
width: 20px;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="A">randRangeNonZero( -3, 3 )</var>
<var id="X1">randRangeNonZero( -5, 5 )</var>
<var id="Y1">randRangeNonZero( -5, 5 )</var>
</div>
<div class="problems">
<div>
<p class="question">Adjust the leading coefficient and vertex coordinates to make the blue parabola match the orange parabola.</p>
<p>How do these numbers affect the shape and position of a parabola?</p>
<div class="graphie" id="grid">
graphInit({
range: 10,
scale: 20,
tickStep: 1,
axisArrows: "<->"
});
// Plot the orange parabola
style({
stroke: "#FFA500",
fill: "none",
clipRect:[[-10, -10], [20, 20]],
arrows: null
});
plot(new Parabola(A, X1, Y1).graphieFunction, [-10, 10]);
style({
stroke: "#6495ED",
strokeWidth: 3,
fill: "none",
clipRect:[[-10, -10], [20, 20]],
arrows: null
});
graph.currParabola = new Parabola(1, 0, 0);
graph.currParabola.plot();
</div>
<div class="solution" data-type="custom">
<!--
There didn't seem to be an easy way to bind handlers normally after everything had loaded.
It would also be nice to press and hold.
-->
<div class="instruction">
<div id="plus-buttons">
<input type="button" class="simple-button mini-button" style="margin-left: 20px;" value="+" onclick="updateParabola(0, 0, -1)" />
<input type="button" class="simple-button mini-button" style="margin-left: 8px;" value="+" onclick="updateParabola(1, 0, 0)" />
<input type="button" class="simple-button mini-button" style="margin-left: 20px;" value="+" onclick="updateParabola(0, -1, 0)" />
</div>
<p id="equation-label" style="margin: 8px 0px 2px 0px"><code>y - 0 = 1(x - 0)^{2}</code></p>
<div id="minus-buttons" style="padding-bottom: 15px">
<input type="button" class="simple-button mini-button" style="margin-left: 20px;" value="-" onclick="updateParabola(0, 0, 1)" />
<input type="button" class="simple-button mini-button" style="margin-left: 8px;" value="-" onclick="updateParabola(-1, 0, 0)" />
<input type="button" class="simple-button mini-button" style="margin-left: 20px;" value="-" onclick="updateParabola(0, 1, 0)" />
</div>
</div>
<div class="guess">[A, X1, Y1]</div>
<div class="validator-function">
var parab = graph.currParabola;
return parab.getLeadingCoefficient() === A &amp;&amp;
parab.getVertexX() === X1 &amp;&amp;
parab.getVertexY() === Y1;
</div>
<div class="show-guess">
guess = guess.length ? guess : [1, 0, 0];
var parab = graph.currParabola;
parab.update.apply(parab, guess);
redrawParabola(false);
</div>
<div class="show-guess-solutionarea">
guess = guess.length ? guess : [1, 0, 0];
var a = guess[0],
x = guess[1],
y = guess[2];
var equation = "y - " + y + "=" + a + "(x - " + x + ")^{2}";
equation = cleanMath(equation);
$("#equation-label").html("&lt;code&gt;" + equation + "&lt;/code&gt;").tmpl();
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.