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
/
functions_2.html
117 lines (99 loc) · 5.06 KB
/
functions_2.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
<!DOCTYPE html>
<html data-require="math math-format graphie">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Evaluating expressions with function notation</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script type="text/javascript">
function generateFunctionPath(end_point) {
var functionPath = [];
functionPath.push([10, end_point]);
for(var i = 9; i > -11; i--) {
var previous_point = functionPath[0][1];
if (KhanUtil.randRange(1, 10) < 3 && previous_point < 8) {
functionPath.unshift([ i, previous_point + 1 ]);
} else if (KhanUtil.randRange(1, 10) < 3 && previous_point > -8) {
functionPath.unshift([ i, previous_point - 1 ]);
} else if (KhanUtil.randRange(1, 10) < 3 && previous_point < 7) {
functionPath.unshift([ i, previous_point + 2 ]);
} else if (KhanUtil.randRange(1, 10) < 3 && previous_point > -7) {
functionPath.unshift([ i, previous_point - 2 ]);
} else {
functionPath.unshift([ i, previous_point ]);
}
}
return functionPath;
}
</script>
</head>
<body>
<div class="exercise">
<div class="vars">
<div data-ensure="END_F !== END_G">
<var id="END_F">randRange(-6, 6)</var>
<var id="END_G">randRange(-6, 6)</var>
</div>
<var id="F_PATH">generateFunctionPath(END_F)</var>
<var id="G_PATH">generateFunctionPath(END_G)</var>
<var id="F_COEF">randRangeExclude(-10, 10, [0, 1])</var>
<var id="G_COEF">randRangeExclude(-10, 10, [0, 1])</var>
<var id="CORRECT_X">randRange(-9, 9)</var>
<var id="CORRECT_Y">F_PATH[CORRECT_X + 10][1]</var>
<var id="CORRECT_GX">randRange(-9, 9)</var>
<var id="CORRECT_GY">G_PATH[CORRECT_GX + 10][1]</var>
</div>
<div class="problems">
<div>
<p class="problem">Functions <code>\blue{f}</code> and <code>\red{g}</code> are graphed.</p>
<p class="question">
<code><span data-if="F_COEF !== 1"><var>F_COEF</var> \cdot </span>f(<var>CORRECT_X</var>) +
<span data-if="G_COEF !== 1"><var>G_COEF</var> \cdot </span>g(<var>CORRECT_GX</var>) = {?}</code>
</p>
<p class="render-answer-area-here"></p>
<div class="graphie" id="graph">
graphInit({
range: 10,
scale: 20,
tickStep: 1,
labelStep: 1,
unityLabels: false,
labelFormat: function( s ) { return "\\small{" + s + "}"; },
axisArrows: "<->"
});
label([0, 10], "y", "above");
label([10, 0], "x", "right");
label([10, END_F], "y = f(x)", "right", {color: BLUE});
label([10, END_G], "y = g(x)", "right", {color: RED});
path(F_PATH, {stroke: BLUE});
path(G_PATH, {stroke: RED, "stroke-dasharray": "-"});
</div>
<p class="solution"><var>F_COEF * CORRECT_Y + G_COEF * CORRECT_GY</var></p>
</div>
</div>
<div class="hints">
<p>Find <code>\blue{f(<var>CORRECT_X</var>)}</code> and <code>\red{g(<var>CORRECT_GX</var>)}</code>.</p>
<div>
<div class="graphie" data-update="graph">
line([CORRECT_X, 0], [CORRECT_X, CORRECT_Y], { stroke: BLACK, "stroke-dasharray": "." });
circle([CORRECT_X, CORRECT_Y], 0.2, { stroke: null, fill: BLUE });
</div>
<p><code>\blue{f(<var>CORRECT_X</var>) = <var>CORRECT_Y</var>}</code></p>
</div>
<div>
<div class="graphie" data-update="graph">
line([CORRECT_GX, 0], [CORRECT_GX, CORRECT_GY], { stroke: BLACK, "stroke-dasharray": "." });
circle([CORRECT_GX, CORRECT_GY], 0.2, { stroke: null, fill: RED });
</div>
<p><code>\red{g(<var>CORRECT_GX</var>) = <var>CORRECT_GY</var>}</code></p>
</div>
<p><code>
<span data-if="F_COEF !== 1"><var>F_COEF</var> \cdot </span>\blue{f(<var>CORRECT_X</var>)} +
<span data-if="G_COEF !== 1"><var>G_COEF</var> \cdot </span>\red{g(<var>CORRECT_GX</var>)} =
<var>coefficient(F_COEF)</var>(\blue{<var>CORRECT_Y</var>}) + <var>coefficient(G_COEF)</var>(\red{<var>CORRECT_GY</var>})
</code></p>
<p><code>= <var>F_COEF * CORRECT_Y</var> + <var>G_COEF * CORRECT_GY</var></code></p>
<p><code>= <var>F_COEF * CORRECT_Y + G_COEF * CORRECT_GY</var></code></p>
</div>
</div>
</body>
</html>