Skip to content
Newer
Older
100644 158 lines (150 sloc) 8.05 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>
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Exploring mean and median</title>
6 <script src="../khan-exercise.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 <!--
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;
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
43
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
44 init({
45 range: [ [LOWER_BOUND - 1, UPPER_BOUND + 1], [-3, 3] ]
46 });
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
47
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
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", {});
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
56
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
57 style({ strokeWidth: 2, stroke: BLUE, fill: BLUE, opacity: 1.0 });
58 graph.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 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
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
64 style({ strokeWidth: 2, stroke: GREEN, fill: GREEN });
65 graph.medianArrow = path([
66 [ 0, -1.1 ], [ 0.05, -1.1 ], [ 0, -1 ], [ -0.05, -1.1 ], [ 0, -1.1 ], [ 0, -1.4 ]
67 ]);
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
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
71 addMouseLayer();
72 graph.points = [];
73 for ( var x = 0; x &lt; POINTS; x++ ) {
74 graph.points[x] = addMovablePoint({
75 coord: [ x - POINTS / 2 + 0.5, 0 ],
76 constraints: { constrainY: true },
77 snapX: 0.5
78 });
79 }
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
80
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
81 graph.median = 0;
82 graph.mean = 0;
83 graph.moved = false;
84 $.each( graph.points, function( idx, point ) {
85 this.onMove = function( x, y ) {
86 graph.moved = true;
87 return onMovePoint( point, x, y, updateMeanAndMedian );
88 };
89 });
90 </div>
91 </div>
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">$.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 $.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>
113 </div>
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
114
4e4cb9b @beneater lint: tabs->spaces and jQuery->$ for exercises
beneater authored
115 <div class="hints">
116 <p>
117 The median is the middle number. In other words there are always as many points to the
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 ">
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 ">
151 </p>
152 </div>
153 </div>
154 </div>
155 </div>
c2abb10 @beneater Add exercise: Exploring mean and median
beneater authored
156 </body>
157 </html>
Something went wrong with that request. Please try again.