Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
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.