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

243 lines (223 sloc) 9.739 kb
<!DOCTYPE html>
<html data-require="math math-format graphie interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Graphing parabolas 0.5</title>
<script src="../khan-exercise.js"></script>
<style>
.plug_in > span:first-child {
width: 50px;
}
.plug_in > span {
width: 150px;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars" data-ensure=" B !== 0 || C !== 0">
<var id="A">1</var>
<var id="B">randRange( -4, 4 )</var>
<var id="C">randRange( [ -5, -7, -8, -9, -9, -9, -8, -7, -5 ][ B + 4 ], [ -3, -1, 1, 3, 5, 3, 1, -1, -3 ][ B + 4 ] )</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() {
graph.parabola = plot( function( x ) {
return coeffs[0] * x * x + coeffs[1] * x + coeffs[2];
}, [ -11, 11 ] );
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: 2,
y1: 2 * 2 + B * 2 + C,
x2: -2,
y2: -2 * -2 + B * -2 + C,
x3: 0,
y3: C
}, {
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( B - coeffs[1] ) &lt; 0.001 &amp;&amp; abs( C - 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="standard-form">
<div class="problem" data-apply="prependContents">
<p class="hint_blue">
<code>y = <var>plus( "x^2", B + "x", C )</var></code>
</p>
</div>
<div class="hints">
<div>
<p>
Create a table of <code class="hint_green">x</code> and <code class="hint_pink">y</code> values by plugging different values of
<code class="hint_green">x</code> into the equation and plot each value:
</p>
<div class="fake_header plug_in">
<span><code class="hint_green">x</code></span><span>&nbsp;</span><span><code class="hint_pink">\hphantom{= } \quad y</code></span>
</div>
</div>
<div class="fake_row plug_in" data-each="[ -2, -1, 0, 1, 2 ] as x">
<span>
<code class="hint_green"><var>x</var></code>
</span><span>
<code>\color{<var>BLUE</var>}{<var>plus( "(" + x + ")^2", B + "(" + x + ")", C )</var>}</code>
</span><span>
<code>= \quad \color{<var>PINK</var>}{<var>x * x + B * x + C</var>}</code>
</span>
<div class="graphie" data-update="grid">
var y = x * x + B * x + C;
style({
stroke: PINK,
strokeWidth: 3
}, function() {
line( [ x - 0.3, y - 0.3 ], [ x + 0.3, y + 0.3 ] ).toBack();
line( [ x - 0.3, y + 0.3 ], [ x + 0.3, y - 0.3 ] ).toBack();
});
</div>
</div>
<div>
<p class="final_answer">
There is only one graph of a parabola that passes through all of the <code>(\color{<var>GREEN</var>}{x}, \color{<var>PINK</var>}{y})</code> points we plotted.
<br /><input type="button" value="Show me" onClick="javascript:KhanUtil.currentGraph.graph.showSolution();" />
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.