Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 194 lines (186 sloc) 9.055 kb
c2abb10 Ben Eater Add exercise: Exploring mean and median
beneater authored
1 <!DOCTYPE html>
cde9e9f John Resig Re-run the exercises through the updated cleaner.
jeresig authored
2 <html data-require="math graphie interactive mean-and-median">
3 <head>
0f0c630 Michael Chang 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
5 <title>Exploring mean and median</title>
ac1415e Ben Alpert Use requirejs for module loading
spicyj authored
6 <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
c2abb10 Ben Eater Add exercise: Exploring mean and median
beneater authored
7 </head>
8 <body>
4e4cb9b Ben Eater 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 Ben Eater 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 Ben Eater 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 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
25 </var>
26 <var id="MIN_MEAN">
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
29 </var>
30 <var id="MAX_MEAN">
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
36 </var>
37 </div>
38 <div class="problems">
39 <div>
40 <div class="question">
3530641 Ben Eater 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 John Resig Clean up the exercise files using the new cleaning utility.
jeresig authored
43 is <code><var>MEAN</var></code></span><br> and the
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
46 The distance between adjacent tick marks is 1.</p>
d53a57c John Resig Two doctypes were being output. Only output one.
jeresig authored
47 <div class="graphie" id="number-line">
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
48 graph.targetMedian = MEDIAN;
49 graph.targetMean = MEAN;
50 graph.numPoints = POINTS;
c2abb10 Ben Eater Add exercise: Exploring mean and median
beneater authored
51
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
52 init({
3530641 Ben Eater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
53 range: [
064281e Ben Eater Fix up exercises that are too wide for tutorials
beneater authored
54 [LOWER_BOUND - 0.3, UPPER_BOUND + 0.2],
3530641 Ben Eater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
55 [-3, 3]],
56 scale: 35
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
57 });
c2abb10 Ben Eater Add exercise: Exploring mean and median
beneater authored
58
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
59 style({ stroke: "#bbb" });
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
63 }
64 style({ strokeWidth: 3.5 });
3530641 Ben Eater 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 Ben Eater Add exercise: Exploring mean and median
beneater authored
67
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
74 graph.meanArrow = path([
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
77 ]);
de19411 Emily Eisenberg 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 Ben Eater 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 Ben Eater Add exercise: Exploring mean and median
beneater authored
84
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
85 style({ strokeWidth: 2, stroke: GREEN, fill: GREEN });
86 graph.medianArrow = path([
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
89 ]);
de19411 Emily Eisenberg Manually i18nize all of the minor exercises
xymostech authored
90 graph.medianLabel = label([0, -1.7],
91 "\\text{" + $._("median") + "}",
3530641 Ben Eater 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 Ben Eater Add exercise: Exploring mean and median
beneater authored
95
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
96 addMouseLayer();
97 graph.points = [];
3530641 Ben Eater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
98 for (var x = 0; x &lt; POINTS; x++) {
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
99 graph.points[x] = addMovablePoint({
3530641 Ben Eater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
100 coord: [x - POINTS / 2 + 0.5, 0],
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
101 constraints: { constrainY: true },
102 snapX: 0.5
103 });
104 }
c2abb10 Ben Eater Add exercise: Exploring mean and median
beneater authored
105
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
106 graph.median = 0;
107 graph.mean = 0;
108 graph.moved = false;
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
111 graph.moved = true;
3530641 Ben Eater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
112 return onMovePoint(point, x, y,
113 updateMeanAndMedian);
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
114 };
115 });
116 </div>
117 </div>
0f0c630 Michael Chang Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
118 <div class="solution" data-type="custom">
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
119 <div class="instruction">
120 </div>
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
124 <div class="validator-function">
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
127 return true;
3530641 Ben Eater Add a <br /> to exploring_mean_and_median question #FIXIT
beneater authored
128 } else if (graph.moved) {
4e4cb9b Ben Eater 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 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
137 });
138 updateMeanAndMedian();
139 </div>
140 </div>
c2abb10 Ben Eater Add exercise: Exploring mean and median
beneater authored
141
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
142 <div class="hints">
143 <p>
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
147 </p>
148 <p>
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
154 <span data-if="POINTS % 2 === 0">
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
158 </span>
e9807ff John Resig Clean up the exercise files using the new cleaning utility.
jeresig authored
159 <span data-else="">
4e4cb9b Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
160 The middle point should be at
3530641 Ben Eater 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 John Resig Clean up the exercise files using the new cleaning utility.
jeresig authored
163 </span><br>
de19411 Emily Eisenberg 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
168 </p>
169 <p>
3530641 Ben Eater 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
176 </p>
177 <p>
3530641 Ben Eater 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 Emily Eisenberg 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 Ben Eater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
187 </p>
188 </div>
189 </div>
190 </div>
191 </div>
cde9e9f John Resig Re-run the exercises through the updated cleaner.
jeresig authored
192 </body>
193 </html>
Something went wrong with that request. Please try again.