Permalink
Fetching contributors…
Cannot retrieve contributors at this time
122 lines (107 sloc) 6.15 KB
<!DOCTYPE html>
<html data-require="math graphie interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Domain and range from graph</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="ANIM_SPEED">1500</var>
<var id="DOMAIN">[ randRange( -9, -1 ), randRange( 1, 9 ) ]</var>
<var id="FUNCTION_PATH">
(function() {
var functionPath = [];
var prev;
var push = function( val ) {
prev = val;
functionPath.push( prev );
};
push([ DOMAIN[0], randRange( -5, 5 ) ]);
for( var i = DOMAIN[0]+1; i &lt;= DOMAIN[1]; i++ ) {
if ( abs( randRangeNonZero( -10, 10 ) &lt; 2 ) &amp;&amp; prev[1] &lt; 8 ) {
push([i, prev[1]+1]);
} else if ( abs( randRangeNonZero( -10, 10 ) &lt; 2 ) &amp;&amp; prev[1] &gt; -8 ) {
push([i, prev[1]-1]);
} else if ( abs( randRangeNonZero( -10, 10 ) &lt; 2 ) &amp;&amp; prev[1] &lt; 7 ) {
push([i, prev[1]+2]);
} else if ( abs( randRangeNonZero( -10, 10 ) &lt; 3 ) &amp;&amp; prev[1] &gt; -7 ) {
push([i, prev[1]-2]);
} else {
push([i, prev[1]]);
}
}
return functionPath;
})()
</var>
<var id="RANGE">
(function() {
var values = $.map( FUNCTION_PATH, function( p ) { return p[1]; } );
return [ min.apply( null, values ), max.apply( null, values ) ];
})()
</var>
</div>
<div class="problems">
<div id="domain">
<p class="question">The function <code>f(x)</code> is graphed; what is its domain?</p>
<p class="render-answer-area-here"></p>
<div class="graphie" id="graph">
graphInit({
range: 10,
scale: 20,
axisArrows: "&lt;-&gt;",
tickStep: 1,
labelStep: 1,
unityLabels: false,
labelFormat: function( s ) { return "\\small{" + s + "}"; }
});
graph.fn_path = path( FUNCTION_PATH, { stroke: BLUE } );
circle( FUNCTION_PATH[0], 0.15, { stroke: "none", fill: BLUE } );
circle( FUNCTION_PATH[ FUNCTION_PATH.length - 1], 0.15, { stroke: "none", fill: BLUE } );
</div>
<p class="solution" data-type="multiple"><span class="sol short40" data-forms="integer"><var>DOMAIN[0]</var></span><code>\;\le x\le\;</code><span class="sol short40" data-forms="integer"><var>DOMAIN[1]</var></span></p>
<div class="hints">
<p>For what values of <code>x</code> does <code>f(x)</code> have a value?</p>
<div>
<p>Look at the horizontal axis as if it were a number line.</p>
<div class="graphie" data-update="graph">
var domain_path = graph.fn_path.clone();
var tmp_path = path( $.map( FUNCTION_PATH, function( p ) { return [[ p[0], 0 ]]; }), { stroke: "none" } );
domain_path.animate( { path: tmp_path.attrs.path, "stroke-width": 4, stroke: GREEN }, ANIM_SPEED, "ease-in-out");
circle( [ FUNCTION_PATH[0][0], 0 ], 0.3, { stroke: "none", fill: GREEN, "fill-opacity": 0 } )
.animate( { "fill-opacity": 1.0 }, ANIM_SPEED, "ease-in-out" );
circle( [ FUNCTION_PATH[ FUNCTION_PATH.length - 1 ][0], 0 ], 0.3, { stroke: "none", fill: GREEN, "fill-opacity": 0 } )
.animate( { "fill-opacity": 1.0 }, ANIM_SPEED, "ease-in-out" );
tmp_path.remove();
</div>
</div>
<p><code><var>DOMAIN[0]</var>\le x\le <var>DOMAIN[1]</var></code></p>
</div>
</div>
<div id="range" data-type="domain">
<p class="question">The function <code>f(x)</code> is graphed; what is its range?</p>
<p class="render-answer-area-here"></p>
<p class="solution" data-type="multiple"><span class="sol short40"><var>RANGE[0]</var></span><code>\;\le f(x)\le\;</code><span class="sol short40"><var>RANGE[1]</var></span></p>
<div class="hints">
<p>What values can <code>f(x)</code> have?</p>
<div>
<p>Look at the vertical axis as if it were a number line.</p>
<div class="graphie" data-update="graph">
var range_path = graph.fn_path.clone();
var tmp_path = path( $.map( FUNCTION_PATH, function( p ) { return [[ 0, p[1] ]]; }), { stroke: "none" } );
range_path.animate( { path: tmp_path.attrs.path, "stroke-width": 4, stroke: GREEN }, ANIM_SPEED, "ease-in-out");
circle( [ 0, RANGE[0] ], 0.3, { stroke: "none", fill: GREEN, "fill-opacity": 0 } )
.animate( { "fill-opacity": 1.0 }, ANIM_SPEED, "ease-in-out" );
circle( [ 0, RANGE[1] ], 0.3, { stroke: "none", fill: GREEN, "fill-opacity": 0 } )
.animate( { "fill-opacity": 1.0 }, ANIM_SPEED, "ease-in-out" );
tmp_path.remove();
</div>
</div>
<p><code><var>RANGE[0]</var>\le f(x)\le <var>RANGE[1]</var></code></p>
</div>
</div>
</div>
</div>
</body>
</html>