Skip to content
Newer
Older
100644 158 lines (150 sloc) 5.87 KB
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 7, 2011
1 <!DOCTYPE html>
2 <html data-require="math graphie interactive mean-and-median">
3 <head>
65eec09 @spicyj Content-Type meta tag for libxml2 compatibility
spicyj authored Jan 4, 2012
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
fc8628d @beneater Add exercise: Exploring standard deviation 1
beneater authored Jan 9, 2012
5 <title>Exploring mean and median</title>
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 8, 2011
6 <script src="../khan-exercise.js"></script>
7 </head>
8 <body>
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 <!--
14 80% chance of getting 10 points to work with; otherwise 5. Any other
15 reasonable quantity leads to really messy means. This at least covers
16 both cases: where the median is a point, and where the median is between
17 two points. Weighted towards more problems with 10 points to make it
18 easier to get the intuition how/why the mean and median can vary.
19 -->
20 <var id="POINTS">random() &lt; 0.8 ? 10 : 5</var>
21 <var id="MEDIAN">
22 roundTo( 1, randRangeNonZero( (LOWER_BOUND + 1) * 2, (UPPER_BOUND - 1) * 2 ) / 2 )
23 </var>
24 <var id="MIN_MEAN">
25 ((POINTS / 2) * (MEDIAN + 0.5) + MEDIAN - 0.5 + (POINTS / 2 - 1) * LOWER_BOUND) / POINTS
26 </var>
27 <var id="MAX_MEAN">
28 ((POINTS / 2) * (MEDIAN - 0.5) + MEDIAN + 0.5 + (POINTS / 2 - 1) * UPPER_BOUND) / POINTS
29 </var>
30 <var id="MEAN">roundTo( 1, randRangeNonZero( MIN_MEAN * 10, MAX_MEAN * 10 ) / 10 )</var>
31 </div>
32 <div class="problems">
33 <div>
34 <div class="question">
35 <p>Arrange the <var>POINTS</var> orange points on the number line so the
36 <span class="hint_blue">arithmetic mean is <code><var>MEAN</var></code></span>
37 and the <span class="hint_green">median is <code><var>MEDIAN</var></code></span>.
38 The distance between adjacent tick marks is 1.</p>
39 <div class="graphie" id="number-line">
40 graph.targetMedian = MEDIAN;
41 graph.targetMean = MEAN;
42 graph.numPoints = POINTS;
43
44 init({
45 range: [ [LOWER_BOUND - 1, UPPER_BOUND + 1], [-3, 3] ]
46 });
47
48 style({ stroke: "#bbb" });
49 line( [ LOWER_BOUND, 0 ], [ UPPER_BOUND, 0 ] );
50 for ( var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x++ ) {
51 line( [ x, -0.2 ], [ x, 0.2 ] );
52 }
53 style({ strokeWidth: 3.5 });
54 line( [ 0, -0.2 ], [ 0, 0.2 ] );
55 label( [ 0, -0.53 ], "0", "center", {});
56
9ffc582 @beneater Add helper marks to make mean/median easier
beneater authored Nov 8, 2011
57 style({ strokeWidth: 2, stroke: BLUE, fill: BLUE, opacity: 1.0 });
3af0746 @beneater Revert tick marks; code review fixes
beneater authored Nov 8, 2011
58 graph.meanArrow = path([
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 8, 2011
59 [ 0, 0.7 ], [ 0.05, 0.7 ], [ 0, 0.6 ], [ -0.05, 0.7 ], [ 0, 0.7 ], [ 0, 1.0 ]
60 ]);
3af0746 @beneater Revert tick marks; code review fixes
beneater authored Nov 9, 2011
61 graph.meanLabel = label( [ 0, 1.3 ], "\\text{mean}", "above", { color: BLUE });
62 graph.meanValueLabel = label( [ 0, 0.8 ], "0", "above", { color: BLUE });
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 8, 2011
63
64 style({ strokeWidth: 2, stroke: GREEN, fill: GREEN });
3af0746 @beneater Revert tick marks; code review fixes
beneater authored Nov 9, 2011
65 graph.medianArrow = path([
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 8, 2011
66 [ 0, -1.1 ], [ 0.05, -1.1 ], [ 0, -1 ], [ -0.05, -1.1 ], [ 0, -1.1 ], [ 0, -1.4 ]
67 ]);
3af0746 @beneater Revert tick marks; code review fixes
beneater authored Nov 9, 2011
68 graph.medianLabel = label( [ 0, -1.7 ], "\\text{median}", "below", { color: GREEN });
69 graph.medianValueLabel = label( [0, -1.2 ], "0", "below", { color: GREEN });
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 8, 2011
70
71 addMouseLayer();
3af0746 @beneater Revert tick marks; code review fixes
beneater authored Nov 9, 2011
72 graph.points = [];
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 8, 2011
73 for ( var x = 0; x &lt; POINTS; x++ ) {
3af0746 @beneater Revert tick marks; code review fixes
beneater authored Nov 9, 2011
74 graph.points[x] = addMovablePoint({
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 8, 2011
75 coord: [ x - POINTS / 2 + 0.5, 0 ],
76 constraints: { constrainY: true },
77 snapX: 0.5
78 });
79 }
80
81 graph.median = 0;
82 graph.mean = 0;
fc8628d @beneater Add exercise: Exploring standard deviation 1
beneater authored Jan 10, 2012
83 graph.moved = false;
3af0746 @beneater Revert tick marks; code review fixes
beneater authored Nov 9, 2011
84 jQuery.each( graph.points, function( idx, point ) {
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 8, 2011
85 this.onMove = function( x, y ) {
fc8628d @beneater Add exercise: Exploring standard deviation 1
beneater authored Jan 10, 2012
86 graph.moved = true;
87 return onMovePoint( point, x, y, updateMeanAndMedian );
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 8, 2011
88 };
89 });
90 </div>
91 </div>
fc8628d @beneater Add exercise: Exploring standard deviation 1
beneater authored Jan 10, 2012
92 <div class="solution" data-type="custom">
93 <div class="instruction">
94 Move the orange dots to select your answer.
95 </div>
96 <div class="guess">jQuery.map( graph.points, function( el ) { return el.coord[0]; } )</div>
97 <div class="validator-function">
98 if ( roundTo( 1, mean( guess ) ) === MEAN &amp;&amp; roundTo( 1, median( guess ) ) === MEDIAN ) {
99 return true;
100 } else if ( graph.moved ) {
101 return false;
102 } else {
103 return "";
104 }
105 </div>
106 <div class="show-guess">
107 jQuery.each( guess, function( i, x ) {
108 onMovePoint( graph.points[i], x, 0 );
109 });
110 updateMeanAndMedian();
111 </div>
112 <div class="example">any arrangement of the orange dots so that the mean and median are correct</div>
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 8, 2011
113 </div>
114
115 <div class="hints">
116 <p>
eb60e07 @beneater Grammar nit
beneater authored Jan 3, 2012
117 The median is the middle number. In other words there are always as many points to the
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored Nov 8, 2011
118 right of the median as to the left.
119 </p>
120 <p>
121 Try dragging the points so that half of them are to the left of
122 <span class="hint_green"><code><var>MEDIAN</var></code></span>
123 and half of them are to the right of
124 <span class="hint_green"><code><var>MEDIAN</var></code></span>.
125 <span data-if="POINTS % 2 === 0">
126 The two points in the middle should be the same distance from
127 <span class="hint_green"><code><var>MEDIAN</var></code></span>.
128 </span>
129 <span data-else>
130 The middle point should be at
131 <span class="hint_green"><code><var>MEDIAN</var></code></span>.
132 </span><br />
133 <input type="button" value="Show me an example" onClick="javascript:
134 KhanUtil.showMedianExample();
135 "></button>
136 </p>
137 <p>
138 As long as there are as many points to the left and to the right of the
139 median, the median will stay the same. But the arithmetic mean is calculated
140 using the value of every point. Try moving the points on either side of the
141 median closer and further from the median to see how the mean is affected.
142 </p>
143 <p>
144 There are a number of different ways to arrange the points so the mean is
145 <span class="hint_blue"><code><var>MEAN</var></code></span>
146 and the median is
147 <span class="hint_green"><code><var>MEDIAN</var></code></span>.
148 <input type="button" value="Show me an example" onClick="javascript:
149 KhanUtil.showMeanExample();
150 "></button>
151 </p>
152 </div>
153 </div>
154 </div>
155 </div>
156 </body>
157 </html>
Something went wrong with that request. Please try again.