Permalink
Fetching contributors…
Cannot retrieve contributors at this time
324 lines (286 sloc) 15.5 KB
<!DOCTYPE html>
<html data-require="math math-format graphie expressions word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Shifting and reflecting functions</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="X_ORIG">randRangeNonZero(-4, 4)</var>
<var id="Y_ORIG">randRangeNonZero(-3, 3)</var>
<var id="GRAD">randRangeNonZero(-6, 6) / 2</var>
<var id="UP_ORIG">randRangeNonZero(-1, 1)</var>
<var id="N">randRange(0, 1)</var>
<var id="FUNC">[
function(x) { return 0.25 * UP_ORIG * pow(x + X_ORIG, 2) + Y_ORIG; },
function(x) { return 0.02 * UP_ORIG * (pow(x + X_ORIG, 3) + 10 * pow(x + X_ORIG, 2)) + Y_ORIG; }
][N]</var>
</div>
<div class="problems">
<div id="shift-x">
<div class="vars">
<var id="X_SHIFT">X_ORIG &gt; 0 ? randRange(-6, -1) : randRange(1, 6)</var>
<var id="X_COEFFICIENT">1</var>
<var id="Y_COEFFICIENT">1</var>
<var id="Y_SHIFT">0</var>
<var id="ANSWER">expr(["*", "f", ["+", "x", X_SHIFT]])</var>
</div>
<ul class="choices" data-none="true">
<li><code>f(x - <var>X_SHIFT</var>)</code></li>
<li><code>f(x) + <var>X_SHIFT</var></code></li>
<li><code>f(x) - <var>X_SHIFT</var></code></li>
</ul>
<div class="hints">
<div>
<p data-if="X_SHIFT > 0">
<span data-if="isSingular(abs(X_SHIFT))">
Function <code>\red{g(x)}</code> is shifted <code>1</code> unit left relative to <code>\blue{f(x)}</code>.
</span>
<span data-else="">
Function <code>\red{g(x)}</code> is shifted <code><var>abs(X_SHIFT)</var></code> units left relative to <code>\blue{f(x)}</code>.
</span>
</p>
<p data-else="">
<span data-if="isSingular(abs(X_SHIFT))">
Function <code>\red{g(x)}</code> is shifted <code>1</code> unit right relative to <code>\blue{f(x)}</code>.
</span>
<span data-else="">
Function <code>\red{g(x)}</code> is shifted <code><var>abs(X_SHIFT)</var></code> units right relative to <code>\blue{f(x)}</code>.
</span>
</p>
<div class="graphie" data-update="G">
style({
stroke: BLACK,
strokeWidth: 2,
arrows: "-&gt;",
});
path([[-X_ORIG, X_COEFFICIENT * Y_ORIG + Y_SHIFT], [-X_ORIG - X_SHIFT , X_COEFFICIENT * Y_ORIG + Y_SHIFT]]);
</div>
</div>
<div>
<p data-if="X_SHIFT > 0">
<span data-if="isSingular(abs(X_SHIFT))">
This means the value of <code>\red{g}</code> at a number <code>x</code> is the same as the value
of <code>\blue{f}</code> at a number <code>1</code> more than <code>x</code>.
</span>
<span data-else="">
This means the value of <code>\red{g}</code> at a number <code>x</code> is the same as the value
of <code>\blue{f}</code> at a number <code><var>abs(X_SHIFT)</var></code> more than <code>x</code>.
</span>
</p>
<p data-else="">
<span data-if="isSingular(abs(X_SHIFT))">
This means the value of <code>\red{g}</code> at a number <code>x</code> is the same as the value
of <code>\blue{f}</code> at a number <code>1</code> less than <code>x</code>.
</span>
<span data-else="">
This means the value of <code>\red{g}</code> at a number <code>x</code> is the same as the value
of <code>\blue{f}</code> at a number <code><var>abs(X_SHIFT)</var></code> less than <code>x</code>.
</span>
</p>
<p>What would this sentence look like as an equation?</p>
</div>
<p><code>g(x) = <var>ANSWER</var></code></p>
</div>
</div>
<div id="shift-y">
<div class="vars">
<var id="X_SHIFT">0</var>
<var id="X_COEFFICIENT">1</var>
<var id="Y_COEFFICIENT">1</var>
<var id="Y_SHIFT" data-ensure="abs(Y_ORIG * X_COEFFICIENT + Y_SHIFT) &lt; 8 &amp;&amp;
(Y_ORIG * X_COEFFICIENT + Y_SHIFT) * UP_ORIG * X_COEFFICIENT &lt; 7">
randRangeNonZero(-6, 6)
</var>
<var id="ANSWER">expr(["+", "f(x)", Y_SHIFT])</var>
</div>
<ul class="choices" data-none="true">
<li><code>f(x + <var>Y_SHIFT</var>)</code></li>
<li><code>f(x - <var>Y_SHIFT</var>)</code></li>
<li><code>f(x) - <var>Y_SHIFT</var></code></li>
</ul>
<div class="hints">
<div>
<p data-if="Y_SHIFT > 0">
<span data-if="isSingular(abs(Y_SHIFT))">
Function <code>\red{g(x)}</code> is shifted <code>1</code> unit up relative to <code>\blue{f(x)}</code>.
</span>
<span data-else="">
Function <code>\red{g(x)}</code> is shifted <code><var>abs(Y_SHIFT)</var></code> units up relative to <code>\blue{f(x)}</code>.
</span>
</p>
<p data-else="">
<span data-if="isSingular(abs(Y_SHIFT))">
Function <code>\red{g(x)}</code> is shifted <code>1</code> unit down relative to <code>\blue{f(x)}</code>.
</span>
<span data-else="">
Function <code>\red{g(x)}</code> is shifted <code><var>abs(Y_SHIFT)</var></code> units down relative to <code>\blue{f(x)}</code>.
</span>
</p>
<div class="graphie" data-update="G">
style({
stroke: BLACK,
strokeWidth: 2,
arrows: "-&gt;",
});
path([[-X_ORIG, X_COEFFICIENT * Y_ORIG], [-X_ORIG, X_COEFFICIENT * Y_ORIG + Y_SHIFT]]);
</div>
</div>
<div>
<p data-if="Y_SHIFT > 0">
Therefore, to find <code>\red{g(x)}</code> you can find <code>\blue{f(x)}</code>
and add <code><var>abs(Y_SHIFT)</var></code>.
</p>
<p data-else="">
Therefore, to find <code>\red{g(x)}</code> you can find <code>\blue{f(x)}</code>
and subtract <code><var>abs(Y_SHIFT)</var></code>.
</p>
</div>
<p>Therefore <code>g(x) = <var>ANSWER</var></code>.</p>
</div>
</div>
<div id="coefficient-x">
<div class="vars">
<var id="X_SHIFT">0</var>
<var id="X_COEFFICIENT">randFromArray([-1, 1]) * randFromArray([1/3, 0.5, 2, 3])</var>
<var id="Y_COEFFICIENT">1</var>
<var id="Y_SHIFT">0</var>
<var id="ANSWER">toFractionTex(X_COEFFICIENT) + "f(x)"</var>
</div>
<ul class="choices" data-none="true" data-show="4">
<li><code>f(<var>toFractionTex(1/X_COEFFICIENT)</var>x)</code></li>
<li><code>f(<var>toFractionTex(X_COEFFICIENT)</var>x)</code></li>
<li><code><var>toFractionTex(1/X_COEFFICIENT)</var>f(x)</code></li>
<li><code><var>toFractionTex(-1/X_COEFFICIENT)</var>f(x)</code></li>
<li><code><var>toFractionTex(-X_COEFFICIENT)</var>f(x)</code></li>
</ul>
<div class="hints">
<div data-if="X_COEFFICIENT < 0">
<p>
Function <code>\red{g(x)}</code> is flipped vertically compared to <code>\blue{f(x)}</code>,
so we should multiply by <code>-1</code> reflect it over the <code>x</code>-axis.
</p>
<p>
This new function, <code>\green{-f(x)}</code> is closer to <code>\red{g(x)}</code>, but they are still not equal.
What else do we need to do?
</p>
<div class="graphie" data-update="G">
style({
stroke: GREEN,
strokeDasharray: "- "
});
plot( function(x) {
return -FUNC(x);
}, [-10, 10]);
</div>
</div>
<p data-else="">
Function <code>\red{g(x)}</code> is not flipped vertically compared to <code>\blue{f(x)}</code>,
so does not have a negative coefficient.
</p>
<p data-if="abs(X_COEFFICIENT) < 1">
Function <code>\red{g(x)}</code> is compressed vertically relative to
<span data-if="X_COEFFICIENT < 0"><code>\green{-f(x)}</code></span>
<span data-else=""><code>\blue{f(x)}</code></span>,
so must be multiplied by a number with a magnitude less than <code>1</code>.
</p>
<p data-else="">
Function <code>\red{g(x)}</code> is stretched vertically relative to
<span data-if="X_COEFFICIENT < 0"><code>\green{-f(x)}</code></span>
<span data-else=""><code>\blue{f(x)}</code></span>,
so must be multiplied by a number with a magnitude greater than <code>1</code>.
</p>
<div>Therefore <code>g(x) = <var>ANSWER</var></code>.</div>
</div>
</div>
<div id="coefficient-y">
<div class="vars">
<var id="X_SHIFT">0</var>
<var id="X_COEFFICIENT">1</var>
<var id="Y_COEFFICIENT">randFromArray([-1, 1]) * randFromArray([1/3, 0.5, 2, 3])</var>
<var id="Y_SHIFT">0</var>
<var id="ANSWER">"f(" + toFractionTex(Y_COEFFICIENT) + "x)"</var>
</div>
<ul class="choices" data-none="true" data-show="4">
<li><code>f(<var>toFractionTex(1/Y_COEFFICIENT)</var>x)</code></li>
<li><code>f(<var>toFractionTex(-1/Y_COEFFICIENT)</var>x)</code></li>
<li><code>f(<var>toFractionTex(-Y_COEFFICIENT)</var>x)</code></li>
<li><code><var>toFractionTex(1/Y_COEFFICIENT)</var>f(x)</code></li>
<li><code><var>toFractionTex(Y_COEFFICIENT)</var>f(x)</code></li>
</ul>
<div class="hints">
<div data-if="Y_COEFFICIENT < 0">
<p>
Function <code>\red{g(x)}</code> is flipped horizontally compared to <code>\blue{f(x)}</code>,
so we should multiply <code>x</code> by <code>-1</code> reflect it over the <code>y</code>-axis.
</p>
<p>
This new function, <code>\green{f(-x)}</code> is closer to <code>\red{g(x)}</code>, but they are still not equal.
What else do we need to do?
</p>
<div class="graphie" data-update="G">
style({
stroke: GREEN,
strokeDasharray: "- "
});
plot( function(x) {
return FUNC(-x);
}, [-10, 10]);
</div>
</div>
<p data-if="abs(Y_COEFFICIENT) < 1">
Function <code>\red{g(x)}</code> is stretched horizontally relative to
<span data-if="Y_COEFFICIENT < 0"><code>\green{f(-x)}</code></span>
<span data-else=""><code>\blue{f(x)}</code></span>,
so must be multiplied by a number with a magnitude less than <code>1</code>.
</p>
<p data-else="">
Function <code>\red{g(x)}</code> is compressed horizontally relative to
<span data-if="Y_COEFFICIENT < 0"><code>\green{f(-x)}</code></span>
<span data-else=""><code>\blue{f(x)}</code></span>,
so must be multiplied by a number with a magnitude greater than <code>1</code>.
</p>
<div>Therefore <code>g(x) = <var>ANSWER</var></code>.</div>
</div>
</div>
</div>
<div class="problem">
<p>
<code>\red{g(x)}</code> is a transformation of <code>\blue{f(x)}</code>.
The graph below shows <code>\blue{f(x)}</code> as a solid blue line and
<code>\red{g(x)}</code> as a dotted red line.
</p>
</div>
<p class="question">
What is <code>\red{g(x)}</code> in terms of <code>\blue{f(x)}</code>?
</p>
<p class="render-answer-area-here"></p>
<div class="graphie" id="G">
graphInit({
range: 10,
scale: 20,
labelStep: 1,
axisArrows: "&lt;-&gt;"
})
style({
stroke: BLUE,
strokeWidth: 2,
arrows: null
});
plot(function(x) {
return FUNC(x);
}, [-10, 10]);
style({
stroke: RED,
strokeDasharray: '- '
});
plot(function(x) {
return X_COEFFICIENT * FUNC(Y_COEFFICIENT * x + X_SHIFT) + Y_SHIFT;
}, [-10, 10]);
</div>
<p class="solution"><code><var>ANSWER</var></code></p>
</div>
</body>
</html>