Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 137 lines (129 sloc) 5.181 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>
4 <meta charset="UTF-8" />
5 <title>Exploring Mean and Median</title>
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
57 style({ strokeWidth: 2, stroke: BLUE, fill: BLUE });
58 this.meanArrow = path([
59 [ 0, 0.7 ], [ 0.05, 0.7 ], [ 0, 0.6 ], [ -0.05, 0.7 ], [ 0, 0.7 ], [ 0, 1.0 ]
60 ]);
61 this.meanLabel = label( [ 0, 1.3 ], "\\text{mean}", "above", { color: BLUE });
62 this.meanValueLabel = label( [ 0, 0.8 ], "0", "above", { color: BLUE });
63
64 style({ strokeWidth: 2, stroke: GREEN, fill: GREEN });
65 this.medianArrow = path([
66 [ 0, -1.1 ], [ 0.05, -1.1 ], [ 0, -1 ], [ -0.05, -1.1 ], [ 0, -1.1 ], [ 0, -1.4 ]
67 ]);
68 this.medianLabel = label( [ 0, -1.7 ], "\\text{median}", "below", { color: GREEN });
69 this.medianValueLabel = label( [0, -1.2 ], "0", "below", { color: GREEN });
70
71 addMouseLayer();
72 this.points = [];
73 for ( var x = 0; x &lt; POINTS; x++ ) {
74 points[x] = addMovablePoint({
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;
83 jQuery.each(points, function( idx, point ) {
84 this.onMove = function( x, y ) {
85 return onMovePoint( point, x, y );
86 };
87 });
88 </div>
89 </div>
90 <div class="solution" data-type="custom">
91 <span>Move the orange dots to select your answer.</span>
92 </div>
93
94 <div class="hints">
95 <p>
96 The median is middle number. In other words there are always as many points to the
97 right of the median as to the left.
98 </p>
99 <p>
100 Try dragging the points so that half of them are to the left of
101 <span class="hint_green"><code><var>MEDIAN</var></code></span>
102 and half of them are to the right of
103 <span class="hint_green"><code><var>MEDIAN</var></code></span>.
104 <span data-if="POINTS % 2 === 0">
105 The two points in the middle should be the same distance from
106 <span class="hint_green"><code><var>MEDIAN</var></code></span>.
107 </span>
108 <span data-else>
109 The middle point should be at
110 <span class="hint_green"><code><var>MEDIAN</var></code></span>.
111 </span><br />
112 <input type="button" value="Show me an example" onClick="javascript:
113 KhanUtil.showMedianExample();
114 "></button>
115 </p>
116 <p>
117 As long as there are as many points to the left and to the right of the
118 median, the median will stay the same. But the arithmetic mean is calculated
119 using the value of every point. Try moving the points on either side of the
120 median closer and further from the median to see how the mean is affected.
121 </p>
122 <p>
123 There are a number of different ways to arrange the points so the mean is
124 <span class="hint_blue"><code><var>MEAN</var></code></span>
125 and the median is
126 <span class="hint_green"><code><var>MEDIAN</var></code></span>.
127 <input type="button" value="Show me an example" onClick="javascript:
128 KhanUtil.showMeanExample();
129 "></button>
130 </p>
131 </div>
132 </div>
133 </div>
134 </div>
135 </body>
136 </html>
Something went wrong with that request. Please try again.