Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
127 lines (120 sloc) 5 KB
<!DOCTYPE html>
<html data-require="math math-format polynomials graphie interactive visualizing-derivatives">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Visualizing derivatives</title>
<script src="../khan-exercise.js"></script>
<style type="text/css">
.vis-deriv-hint-graph {
display: block;
float: left;
margin-right: 50px;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="INTERVAL_WIDTH">2</var>
<var id="NUM_INTERVALS">7</var>
<var id="NUM_INTERVALS_PROBLEM">2</var>
<var id="OFFSET">0</var>
<var id="PROBLEM">new VisualizingDerivativesProblem({
INTERVAL_WIDTH: INTERVAL_WIDTH,
nIntervals: NUM_INTERVALS,
nProblemIntervals: NUM_INTERVALS_PROBLEM,
offset: OFFSET,
noSolution: NO_SOLUTION,
moveDerivative: MOVE_DERIVATIVE,
fnColor: PURPLE,
derivColor: GREEN
})</var>
<var id="PROBLEM_RANGES">PROBLEM.problemRanges</var>
</div>
<div class="question">
<p>
A function <code>f(x)</code> is shown in <span data-if="MOVE_DERIVATIVE" class="hint_purple" style="font-weight: bold">purple</span><span data-else class="hint_green" style="font-weight: bold">green</span>. The <span data-if="MOVE_DERIVATIVE" class="hint_green" style="font-weight: bold">sliding green window</span><span data-else class="hint_purple" style="font-weight: bold">sliding purple window</span> may contain a section of <b><var>MOVE_DERIVATIVE ? "its derivative" : "an antiderivative of the function,"</var> <code><var>MOVE_DERIVATIVE ? "f'(x)" : "F(x)"</var></code></b>.
</p>
<p>
Where does the function in the sliding window correspond to <code><b><var>MOVE_DERIVATIVE ? "f'(x)" : "F(x)"</var></b></code>?
</p>
</div>
<div class="problem">
<div class="graphie">
sliderWindow = PROBLEM.render();
</div>
</div>
<div class="hints">
<div data-each="PROBLEM.hints() as key, value">
<var>value</var>
</div>
</div>
<div class="solution" data-type="multiple">
<div class="sol" data-type="custom" required>
<div class="instruction">
Drag the sliding window to the correct region or indicate there is no solution.
</div>
<div class="guess">
sliderWindow.getXLims()
</div>
<div class="validator-function">
if (NO_SOLUTION) {
return true;
}
return _.any(PROBLEM_RANGES, function(problemRange) {
return _.isEqual(guess, problemRange);
});
</div>
<div class="show-guess">
sliderWindow.moveTo(guess[0], 0);
</div>
</div>
<p></p>
<div>
<label>
<span class="sol no-solution" data-type="checkbox">
<var>NO_SOLUTION</var>
</span>
No solution
</label>
</div>
<div class="sol" data-type="custom" required>
<div class="guess">
_.isEqual(sliderWindow.getXLims(), sliderWindow.startRange)
&amp;&amp;
!$("#solutionarea input").eq(0).is(":checked")
</div>
<div class="validator-function">
return guess ? "" : true;
</div>
</div>
</div>
<div class="problems">
<div id="move-derivative" data-weight="3">
<div class="vars" data-apply="prependVars">
<var id="MOVE_DERIVATIVE">true</var>
<var id="NO_SOLUTION">false</var>
</div>
</div>
<div id="move-derivative-no-solution" data-weight="1">
<div class="vars" data-apply="prependVars">
<var id="MOVE_DERIVATIVE">true</var>
<var id="NO_SOLUTION">true</var>
</div>
</div>
<div id="move-antiderivative" data-weight="3">
<div class="vars" data-apply="prependVars">
<var id="MOVE_DERIVATIVE">false</var>
<var id="NO_SOLUTION">false</var>
</div>
</div>
<div id="move-antiderivative-no-solution" data-weight="1">
<div class="vars" data-apply="prependVars">
<var id="MOVE_DERIVATIVE">false</var>
<var id="NO_SOLUTION">true</var>
</div>
</div>
</div>
</div>
</body>
</html>
Something went wrong with that request. Please try again.