Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 194 lines (186 sloc) 9.055 kB
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
1 <!DOCTYPE html>
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored
2 <html data-require="math graphie interactive mean-and-median">
3 <head>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
5 <title>Exploring mean and median</title>
ac1415e @spicyj Use requirejs for module loading
spicyj authored
6 <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
7 </head>
8 <body>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
9 <div class="exercise">
10 <div class="vars">
11 <var id="LOWER_BOUND">-7</var>
12 <var id="UPPER_BOUND">-1 * LOWER_BOUND</var>
13 <!--
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
14 80% chance of getting 10 points to work with; otherwise 5. Any
15 other reasonable quantity leads to really messy means. This at
16 least covers both cases: where the median is a point, and
17 where the median is between two points. Weighted towards more
18 problems with 10 points to make it easier to get the intuition
19 how/why the mean and median can vary.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
20 -->
21 <var id="POINTS">random() &lt; 0.8 ? 10 : 5</var>
22 <var id="MEDIAN">
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
23 roundTo(1, randRangeNonZero((LOWER_BOUND + 1) * 2,
24 (UPPER_BOUND - 1) * 2) / 2)
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
25 </var>
26 <var id="MIN_MEAN">
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
27 ((POINTS / 2) * (MEDIAN + 0.5) + MEDIAN - 0.5 +
28 (POINTS / 2 - 1) * LOWER_BOUND) / POINTS
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
29 </var>
30 <var id="MAX_MEAN">
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
31 ((POINTS / 2) * (MEDIAN - 0.5) + MEDIAN + 0.5 +
32 (POINTS / 2 - 1) * UPPER_BOUND) / POINTS
33 </var>
34 <var id="MEAN">
35 roundTo(1, randRangeNonZero(MIN_MEAN * 10, MAX_MEAN * 10) / 10)
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
36 </var>
37 </div>
38 <div class="problems">
39 <div>
40 <div class="question">
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
41 <p>Arrange the <var>POINTS</var> orange points on the
42 number line so the <span class="hint_blue">arithmetic mean
e9807ff @jeresig Clean up the exercise files using the new cleaning utility.
jeresig authored
43 is <code><var>MEAN</var></code></span><br> and the
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
44 <span class="hint_green">median is
45 <code><var>MEDIAN</var></code></span>.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
46 The distance between adjacent tick marks is 1.</p>
d53a57c @jeresig Two doctypes were being output. Only output one.
jeresig authored
47 <div class="graphie" id="number-line">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
48 graph.targetMedian = MEDIAN;
49 graph.targetMean = MEAN;
50 graph.numPoints = POINTS;
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
51
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
52 init({
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
53 range: [
064281e @beneater Fix up exercises that are too wide for tutorials
beneater authored
54 [LOWER_BOUND - 0.3, UPPER_BOUND + 0.2],
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
55 [-3, 3]],
56 scale: 35
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
57 });
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
58
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
59 style({ stroke: "#bbb" });
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
60 line([LOWER_BOUND, 0], [UPPER_BOUND, 0]);
61 for (var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x++) {
62 line([x, -0.2], [x, 0.2]);
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
63 }
64 style({ strokeWidth: 3.5 });
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
65 line([0, -0.2], [0, 0.2]);
66 label([0, -0.53], "0", "center", {});
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
67
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
68 style({
69 strokeWidth: 2,
70 stroke: BLUE,
71 fill: BLUE,
72 opacity: 1.0
73 });
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
74 graph.meanArrow = path([
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
75 [0, 0.7], [0.05, 0.7], [0, 0.6],
76 [-0.05, 0.7], [0, 0.7], [0, 1.0]
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
77 ]);
de19411 @xymostech Manually i18nize all of the minor exercises
xymostech authored
78 graph.meanLabel = label([0, 1.3],
79 // I18N: "mean" as in "average"
80 "\\text{" + $._("mean") + "}",
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
81 "above", { color: BLUE });
82 graph.meanValueLabel = label([0, 0.8], "0",
83 "above", { color: BLUE });
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
84
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
85 style({ strokeWidth: 2, stroke: GREEN, fill: GREEN });
86 graph.medianArrow = path([
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
87 [0, -1.1], [0.05, -1.1], [0, -1],
88 [-0.05, -1.1], [0, -1.1], [0, -1.4]
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
89 ]);
de19411 @xymostech Manually i18nize all of the minor exercises
xymostech authored
90 graph.medianLabel = label([0, -1.7],
91 "\\text{" + $._("median") + "}",
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
92 "below", { color: GREEN });
93 graph.medianValueLabel = label([0, -1.2], "0",
94 "below", { color: GREEN });
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
95
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
96 addMouseLayer();
97 graph.points = [];
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
98 for (var x = 0; x &lt; POINTS; x++) {
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
99 graph.points[x] = addMovablePoint({
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
100 coord: [x - POINTS / 2 + 0.5, 0],
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
101 constraints: { constrainY: true },
102 snapX: 0.5
103 });
104 }
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
105
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
106 graph.median = 0;
107 graph.mean = 0;
108 graph.moved = false;
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
109 $.each(graph.points, function(idx, point) {
110 this.onMove = function(x, y) {
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
111 graph.moved = true;
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
112 return onMovePoint(point, x, y,
113 updateMeanAndMedian);
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
114 };
115 });
116 </div>
117 </div>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
118 <div class="solution" data-type="custom">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
119 <div class="instruction">
120 </div>
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
121 <div class="guess">$.map(graph.points, function(el) {
122 return el.coord[0];
123 })</div>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
124 <div class="validator-function">
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
125 if (roundTo(1, mean(guess)) === MEAN &amp;&amp;
126 roundTo(1, median(guess)) === MEDIAN) {
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
127 return true;
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
128 } else if (graph.moved) {
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
129 return false;
130 } else {
131 return "";
132 }
133 </div>
134 <div class="show-guess">
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
135 $.each(guess, function(i, x) {
136 onMovePoint(graph.points[i], x, 0);
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
137 });
138 updateMeanAndMedian();
139 </div>
140 </div>
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
141
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
142 <div class="hints">
143 <p>
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
144 The median is the middle number. In other words there
145 are always as many points to the right of the median
146 as to the left.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
147 </p>
148 <p>
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
149 Try dragging the points so that half of them are to
150 the left of <span class="hint_green">
151 <code><var>MEDIAN</var></code></span> and half of them
152 are to the right of <span class="hint_green">
153 <code><var>MEDIAN</var></code></span>.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
154 <span data-if="POINTS % 2 === 0">
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
155 The two points in the middle should be the same
156 distance from <span class="hint_green">
157 <code><var>MEDIAN</var></code></span>.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
158 </span>
e9807ff @jeresig Clean up the exercise files using the new cleaning utility.
jeresig authored
159 <span data-else="">
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
160 The middle point should be at
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
161 <span class="hint_green">
162 <code><var>MEDIAN</var></code></span>.
e9807ff @jeresig Clean up the exercise files using the new cleaning utility.
jeresig authored
163 </span><br>
de19411 @xymostech Manually i18nize all of the minor exercises
xymostech authored
164 <a class="simple-button" onclick="javascript:
165 KhanUtil.showMedianExample();">
166 Show me an example
167 </a>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
168 </p>
169 <p>
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
170 As long as there are as many points to the left and to
171 the right of the median, the median will stay the same.
172 But the arithmetic mean is calculated using the value
173 of every point. Try moving the points on either side
174 of the median closer and further from the median to
175 see how the mean is affected.
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
176 </p>
177 <p>
3530641 @beneater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
178 There are a number of different ways to arrange the
179 points so the mean is <span class="hint_blue">
180 <code><var>MEAN</var></code></span> and the median is
181 <span class="hint_green">
182 <code><var>MEDIAN</var></code></span>.
de19411 @xymostech Manually i18nize all of the minor exercises
xymostech authored
183 <a class="simple-button" onclick="javascript:
184 KhanUtil.showMeanExample();">
185 Show me an example
186 </a>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
187 </p>
188 </div>
189 </div>
190 </div>
191 </div>
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored
192 </body>
193 </html>
Something went wrong with that request. Please try again.