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

131 lines (113 sloc) 5.741 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>
Jump to Line
Something went wrong with that request. Please try again.