Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 158 lines (150 sloc) 5.996 kb
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
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
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
fc8628d @beneater Add exercise: Exploring standard deviation 1
beneater authored
5 <title>Exploring mean and median</title>
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
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
57 style({ strokeWidth: 2, stroke: BLUE, fill: BLUE, opacity: 1.0 });
3af0746 @beneater Revert tick marks; code review fixes
beneater authored
58 graph.meanArrow = path([
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
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
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
63
64 style({ strokeWidth: 2, stroke: GREEN, fill: GREEN });
3af0746 @beneater Revert tick marks; code review fixes
beneater authored
65 graph.medianArrow = path([
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
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
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
70
71 addMouseLayer();
3af0746 @beneater Revert tick marks; code review fixes
beneater authored
72 graph.points = [];
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
73 for ( var x = 0; x &lt; POINTS; x++ ) {
3af0746 @beneater Revert tick marks; code review fixes
beneater authored
74 graph.points[x] = addMovablePoint({
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
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
83 graph.moved = false;
3af0746 @beneater Revert tick marks; code review fixes
beneater authored
84 jQuery.each( graph.points, function( idx, point ) {
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
85 this.onMove = function( x, y ) {
fc8628d @beneater Add exercise: Exploring standard deviation 1
beneater authored
86 graph.moved = true;
87 return onMovePoint( point, x, y, updateMeanAndMedian );
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
88 };
89 });
90 </div>
91 </div>
fc8628d @beneater Add exercise: Exploring standard deviation 1
beneater authored
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
113 </div>
114
115 <div class="hints">
116 <p>
eb60e07 @beneater Grammar nit
beneater authored
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
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();
04a2ad0 @spicyj Validation fixes :)
spicyj authored
135 ">
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
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();
04a2ad0 @spicyj Validation fixes :)
spicyj authored
150 ">
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
151 </p>
152 </div>
153 </div>
154 </div>
155 </div>
156 </body>
157 </html>
Something went wrong with that request. Please try again.