Permalink
Fetching contributors…
Cannot retrieve contributors at this time
131 lines (113 sloc) 5.61 KB
<!DOCTYPE html>
<html data-require="math math-format graphie">
<head>
<title>Recognizing conic sections</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="parabola">
<div class="vars">
<var id="A">randRangeNonZero( -30, 30 ) / 10</var>
<var id="B">randRange( -30, 30 ) / 10</var>
<var id="C">randRange( -70, 70 ) / 10</var>
<var id="FUNC">function( x ) {
return A*x*x + B*x + C;
}</var>
</div>
<div class="problem">
<div>Identify this conic section. Give the most specific name.</div>
<div class="render-answer-area-here"></div>
<div class="graphie" id="conic">
graphInit({
range: 10,
scale: 20,
tickStep: 1,
axisArrows: "&lt;-&gt;"
});
style({ stroke: "#6495ED" });
</div>
</div>
<div class="question">
<div class="graphie" data-update="conic">
plot( FUNC, [-10, 10] );
</div>
</div>
<div class="solution">Parabola</div>
<ul class="choices" data-category="true">
<li>Parabola</li>
<li>Hyperbola</li>
<li>Circle</li>
<li>Ellipse</li>
</ul>
<div class="hints">
<p>This graph has a vertex and is U-shaped. It extends to infinity on both ends.</p>
<p>That describes a <em>parabola</em>.</p>
</div>
</div>
<div id="ellipse" data-type="parabola">
<div class="vars">
<var id="A">randRangeNonZero(10, 70) / 10</var>
<var id="B" data-ensure="abs(abs(A) - abs(B)) > 1">randRangeNonZero(10, 70) / 10</var>
<var id="C">randRangeNonZero(-30, 30) / 10</var>
<var id="D">randRangeNonZero(-30, 30) / 10</var>
<var id="PARA_FUNC">function( t ) {
return [ A * cos( t ) + C, B * sin( t ) + D ];
}</var>
</div>
<div class="question">
<div class="graphie" data-update="conic">
plotParametric( PARA_FUNC, [-PI, PI] );
</div>
</div>
<div class="solution">Ellipse</div>
<div class="hints">
<p>You can see that the graph resembles a squished circle.</p>
<p>This shape is an <em>ellipse</em>.</p>
</div>
</div>
<div id="circle" data-type="ellipse">
<div class="vars" data-ensure="A &gt; 0.5">
<var id="A">randRangeNonZero( -70, 70 ) / 10</var>
<var id="B">A</var>
</div>
<div class="solution">Circle</div>
<div class="hints">
<p>This shape is perfectly round and symmetrical. All the points on it are equidistant from its center.</p>
<p>A <em>circle</em> has those properties.</p>
</div>
</div>
<div id="hyperbola" data-type="parabola">
<div class="vars">
<var id="A">randRangeNonZero( -40, 40 ) / 10</var>
<var id="B">randRangeNonZero( -40, 40 ) / 10</var>
<var id="PARA_FUNC">function( t ) {
return [ A / cos( t ), B * tan( t ) ];
}</var>
</div>
<div class="question">
<div class="graphie" data-update="conic">
// to steer clear of discontinuities,
// split up the plotting and add some buffer area away from them
plotParametric( PARA_FUNC, [-PI, -PI/2-0.1] );
plotParametric( PARA_FUNC, [-PI/2+0.1, PI/2-0.1] );
plotParametric( PARA_FUNC, [PI/2+0.1, PI] );
</div>
</div>
<div class="solution">Hyperbola</div>
<div class="hints">
<div>
<p>This graph has two asymptotes which it approaches. It's also U-shaped on each side.</p>
<div class="graphie" data-update="conic">
plot( function( x ) { return (B/A) * x; }, [-10, 10], { stroke: "gray" } );
plot( function( x ) { return (B/A) * -1 * x; }, [-10, 10], { stroke: "gray" } );
</div>
</div>
<p>This conic section is therefore a <em>hyperbola</em>.</p>
</div>
</div>
</div>
</div>
</body>
</html>