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

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