This repository has been archived by the owner on May 11, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 863
/
visualizing_derivatives.html
126 lines (120 loc) · 5 KB
/
visualizing_derivatives.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!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)
&&
!$("#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>