This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
inequalities_on_a_number_line.html
222 lines (171 loc) · 9.05 KB
/
inequalities_on_a_number_line.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Inequalities on a number line</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script>
function numberLineWithArrow( start, end, step, x, y, arrowStartX, arrowEndX, inclusive ) {
// Offset arrow appropriately in case number line's point is empty
var arrowOffsetX = 0.15;
if ( arrowStartX > arrowEndX ) {
arrowOffsetX *= -1;
}
numberLine( start, end, step, x, y );
graph = KhanUtil.currentGraph;
graph.style({ stroke: "#6495ED", fill: inclusive ? "#6495ED" : null });
graph.pt = graph.circle( [ arrowStartX, 0 ], 0.15 );
graph.style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "->" });
graph.arrow = graph.path( [ [ arrowStartX + arrowOffsetX, 0 ], [ arrowEndX, 0 ] ] );
graph.pt.toFront();
}
function numberLineWithArrowAndMistakes( label, sign, i, frac, less_than, inclusive, mistakeTypes, mistakeIndex ) {
function makeMistake( mistakeType ) {
// Various types of mistakes for number line possibilities
switch ( mistakeType.toString() ) {
case "direction":
less_than = !less_than;
break;
case "inclusion":
inclusive = !inclusive;
break;
case "positivity":
sign = sign === "-" ? "" : "-";
break;
case "quantity":
var original = i;
while (Math.abs(original) == Math.abs(i)) {
// The only quantity mistake we don't allow is a perfect reflection around the origin,
// b/c it may combine with a positivity mistake to create a correct answer.
i += KhanUtil.randRangeNonZero( -3, 3 )
}
break;
}
}
if ( mistakeTypes[mistakeIndex] !== "none" ) {
$.each( mistakeTypes, function () {
// Make at least one of each mistake, and possibly more
if ( mistakeTypes[ mistakeIndex ] == this || KhanUtil.rand( 6 ) === 0 ) {
makeMistake( this );
}
});
}
var multiplier = sign === "-" ? -1 : 1;
// Grab some random padding for left & right of number lines
var start = ( i * multiplier ) - KhanUtil.randRange(2, 6);
var end = ( i * multiplier ) + KhanUtil.randRange(2, 6);
graph = KhanUtil.currentGraph;
graph.init({
range: [ [start - 1, end + 0.5], [-1, 1] ],
scale: 36
});
// Label number line choice if necessary
if ( label ) {
graph.label( [start - 0.2, 0], "\\text{" + $.i18nDoNotTranslate("%(label)s:", {label: label}) + "}", "left" );
}
var arrowStartX = ( i + frac ) * multiplier;
var arrowEndX = less_than ? start : end;
numberLineWithArrow( start, end, null, start, null, arrowStartX, arrowEndX, inclusive );
}
</script>
</head>
<body>
<div class="exercise">
<div class="vars">
<div data-ensure="INT !== 0 || FRAC !== 0">
<var id="INT">rand( 6 ) > 0 ? randRange( 1, 9 ) : 0</var>
<var id="FRAC">rand( 3 ) > 0 ? (randRange( 1, 9 ) / 10) : 0</var>
</div>
<var id="SIGN">(INT === 0 ? "" : randFromArray(["", "-"]))</var>
<var id="REL">randFromArray([ "<", ">", "≤", "≥" ])</var>
<var id="INCLUSIVE">REL === "≤" || REL === "≥"</var>
<var id="LESS_THAN">REL === "<" || REL === "≤"</var>
<var id="VARIABLE_NAME">randVar()</var>
<var id="LINE_ERROR_TYPES">shuffle([ "direction", "inclusion", "positivity", "quantity", "none" ])</var>
<var id="CORRECT_LINE_INDEX">$.inArray( "none", LINE_ERROR_TYPES )</var>
<var id="LINE_LABELS">[ "A", "B", "C", "D", "E" ]</var>
<var id="LINE_SOLUTION">LINE_LABELS[ CORRECT_LINE_INDEX ]</var>
</div>
<div class="problems">
<div id="line_from_equation">
<p class="question">
Which graph on the number line represents <code><var>VARIABLE_NAME</var> <var>REL</var> <var>SIGN + ( INT + FRAC )</var></code>?
</p>
<div class="problem">
<div class="graphie" data-each="LINE_LABELS as index, label">
numberLineWithArrowAndMistakes(
label, SIGN, INT, FRAC, LESS_THAN, INCLUSIVE, LINE_ERROR_TYPES, index
);
</div>
</div>
<div class="solution">Graph <var>LINE_SOLUTION</var></div>
<ol class="choices" data-category="true">
<li data-each="LINE_LABELS as label">Graph <var>label</var></li>
</ol>
<div class="hints">
<div>
<p>First, draw a number line with at least a few numbers on each side of <code><var>SIGN + ( INT + FRAC )</var></code>.</p>
<div class="graphie" id="number_line_hint">
// Draw number line only
numberLineWithArrowAndMistakes(
null, SIGN, INT, FRAC, LESS_THAN, INCLUSIVE, LINE_ERROR_TYPES, CORRECT_LINE_INDEX
);
arrow.hide();
pt.hide();
</div>
</div>
<div>
<p data-if="INCLUSIVE">
Since <code><var>VARIABLE_NAME</var> <var>REL</var> <var>SIGN + ( INT + FRAC )</var></code>, draw a full circle at <code><var>SIGN + ( INT + FRAC )</var></code> to show that the inequality includes <code><var>SIGN + ( INT + FRAC )</var></code>.
</p><p data-else="">
Since <code><var>VARIABLE_NAME</var> <var>REL</var> <var>SIGN + ( INT + FRAC )</var></code>, draw an empty circle at <code><var>SIGN + ( INT + FRAC )</var></code> to show that the inequality does not include <code><var>SIGN + ( INT + FRAC )</var></code>.
</p>
<div class="graphie" data-update="number_line_hint">pt.show();</div>
</div>
<div>
<p data-if="LESS_THAN">
Now draw an arrow to the left of the circle to include all numbers less than <code><var>SIGN + ( INT + FRAC )</var></code>.
</p><p data-else="">
Now draw an arrow to the right of the circle to include all numbers greater than <code><var>SIGN + ( INT + FRAC )</var></code>.
</p>
<div class="graphie" data-update="number_line_hint">arrow.show();</div>
</div>
<p>This looks like it matches the arrow and circle from Graph <var>LINE_SOLUTION</var> above.</p>
</div>
</div>
<div id="equation_from_line">
<div class="question">
<p>Determine the inequality represented by this graph on the number line:</p>
<div class="graphie">
numberLineWithArrowAndMistakes(
null, SIGN, INT, 0, LESS_THAN, INCLUSIVE, LINE_ERROR_TYPES, CORRECT_LINE_INDEX
);
</div>
</div>
<p class="solution" data-type="multiple">
<code><var>VARIABLE_NAME</var></code>
<span class="sol" data-choices="['', '<', '>', '≤', '≥', '≠']" data-type="list">
<var>REL</var>
</span>
<span class="sol"><var>SIGN + INT</var></span>
</p>
<div class="hints">
<p data-if="LESS_THAN">
The arrow is pointing to the left of <code><var>SIGN + INT</var></code>, so everything less than <code><var>SIGN + INT</var></code> is included.
</p><p data-else="">
The arrow is pointing to the right of <code><var>SIGN + INT</var></code>, so everything greater than <code><var>SIGN + INT</var></code> is included.
</p>
<p data-if="INCLUSIVE">
The circle is filled in, so <code><var>SIGN + INT</var></code> itself is also included.
</p><p data-else="">
The circle is not filled in, so <code><var>SIGN + INT</var></code> itself is not included.
</p>
<p>
The graph represents <code><var>VARIABLE_NAME</var> <var>REL</var><var>SIGN + INT</var></code>
</p>
</div>
</div>
</div>
</div>
</body>
</html>