Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

384 lines (360 sloc) 23.288 kB
<!DOCTYPE html>
<html data-require="math math-format stat graphie word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reading bar charts 3</title>
<script src="../khan-exercise.js"></script>
<style>
span.rotate {
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix( M11=0, M21=-1, M12=1, M22=0, SizingMethod="auto expand" )';
}
body.ie span.rotate {
left: 50px !important;
top: 140px !important;
}
body.debug .graphie {
outline: 0;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="NUM_STUDENTS">randFromArray([ 5, 6 ])</var>
<div data-ensure="( NUM_IMPROVED >= 3 && !IMPROVE_TIE ) || UNBIASED">
<var id="MIDTERM">$.map( new Array( NUM_STUDENTS ), function() { return randRange( 12, 20 ) * 5; } )</var>
<var id="FINAL">$.map( new Array( NUM_STUDENTS ), function() { return randRange( 12, 20 ) * 5; } )</var>
<var id="IMPROVEMENT">$.map( new Array( NUM_STUDENTS ), function( e, n ) { return FINAL[ n ] - MIDTERM[ n ]; } )</var>
<var id="NUM_IMPROVED">$.map( IMPROVEMENT, function( x ) { return x &gt; 0 ? 1 : null; }).length</var>
<var id="IMPROVE_TIE">IMPROVEMENT.slice().sort(function(a,b){return a - b;})[4] === IMPROVEMENT.slice().sort(function(a,b){return a - b;})[3]</var>
<var id="UNBIASED">false</var>
</div>
</div>
<div class="problem">
Use the following graph to answer the question below:
<div class="graphie" id="barchart">
init({
range: [ [ -2, NUM_STUDENTS * 3 + 2 ], [ -3, 12 ] ],
scale: [ 24, 24 ]
});
for ( var y = 1; y &lt;= 10; ++y ) {
label( [ 0, y ], y * 10, "left", false );
style({ stroke: "#000", strokeWidth: 1, opacity: 0.2 }, function() {
line( [ 0, y ], [ NUM_STUDENTS * 3 + 1, y ] )
});
}
for ( var index = 0; index &lt; NUM_STUDENTS; ++index ) {
style({ stroke: "none", fill: "#9ab8ed", opacity: 1.0 });
path([ [ index * 3 + 1, 0 ], [ index * 3 + 1, MIDTERM[ index ] / 10 ], [ index * 3 + 2, MIDTERM[ index ] / 10 ], [ index * 3 + 2, 0 ], [ index * 3 + 1, 0 ] ]);
style({ stroke: "none", fill: "#ffc966", opacity: 1.0 });
path([ [ index * 3 + 2, 0 ], [ index * 3 + 2, FINAL[ index ] / 10 ], [ index * 3 + 3, FINAL[ index ] / 10 ], [ index * 3 + 3, 0 ], [ index * 3 + 2, 0 ] ]);
style({ opacity: 1.0 });
label( [ index * 3 + 2, 0 ], person( index + 1 ), "below", false );
}
style({ stroke: "#000", strokeWidth: 2, opacity: 1.0 });
line( [ 0, 0 ], [ NUM_STUDENTS * 3 + 1, 0 ] );
line( [ 0, 0 ], [ 0, 10 ] );
label( [ ( NUM_STUDENTS * 3 + 1 ) / 2, -0.8 ], "&lt;b&gt;Student&lt;/b&gt;", "below", false );
$( label( [ -1.5, 5 ], "&lt;b&gt;Score (points)&lt;/b&gt;", "center", false ) ).addClass( "rotate" );
label( [ ( NUM_STUDENTS * 3 + 1 ) / 2, 10.5 ], "&lt;b&gt;Scores on Midterm and Final Exams&lt;/b&gt;", "above", false );
style({ stroke: "none", fill: "#9ab8ed", opacity: 1.0 });
path([ [ 0, -2 ], [ 0.5, -2 ], [ 0.5, -2.5 ], [ 0, -2.5 ], [ 0, -2 ] ]);
style({ stroke: "#000", strokeWidth: 2, opacity: 1.0 });
label( [ 0.5, -2.25 ], "Midterm", "right", false );
style({ stroke: "none", fill: "#ffc966", opacity: 1.0 });
path([ [ 3, -2 ], [ 3.5, -2 ], [ 3.5, -2.5 ], [ 3, -2.5 ], [ 3, -2 ] ]);
style({ stroke: "#000", strokeWidth: 2, opacity: 1.0 });
label( [ 3.5, -2.25 ], "Final", "right", false );
</div>
</div>
<div class="problems">
<div id="average">
<div class="vars" data-ensure="NUM_STUDENTS === 5">
<var id="COLUMN">randRange( 0, 1 )</var>
<var id="TEST">[ "midterm", "final exam" ][ COLUMN ]</var>
<var id="AVERAGE">COLUMN === 0 ? mean( MIDTERM ) : mean( FINAL )</var>
</div>
<p class="question">What was the average student score for the <var>TEST</var>?</p>
<div class="solution" data-forms="integer"><var>AVERAGE</var></div>
<div class="hints">
<div>
<p>Use the key to figure out which of the two bars shows the scores for the <var>TEST</var>.</p>
<div class="graphie" data-update="barchart">
style({ stroke: PINK, fill: "none", strokeWidth: 2 });
ellipse( [ COLUMN * 3 + 1.2, -2.25 ], [ 1.5, 0.5 ] );
</div>
</div>
<div>
<p>Find each of the <var>TEST</var> scores represented by the <span data-if="COLUMN === 0">blue</span><span data-else>orange</span> bars.</p>
<div data-each="NUM_STUDENTS times as INDEX">
<div class="graphie" data-update="barchart">
if ( COLUMN === 0 ) {
label( [ INDEX * 3 + 1.5, MIDTERM[ INDEX ] / 10 + 0.2 ], MIDTERM[ INDEX ], "below", false ).css({ fontWeight: "bold" });
} else {
label( [ INDEX * 3 + 2.5, FINAL[ INDEX ] / 10 + 0.2 ], FINAL[ INDEX ], "below", false ).css({ fontWeight: "bold" });
}
</div>
</div>
</div>
<p>To find the average student score, add up the individual scores and divide by the number of students.</p>
<p>
<code>
\dfrac{<var>plus.apply( null, COLUMN === 0 ? MIDTERM : FINAL )</var>}{<var>NUM_STUDENTS</var>} =
\dfrac{<var>sum( COLUMN === 0 ? MIDTERM : FINAL )</var>}{<var>NUM_STUDENTS</var>} =
<var>AVERAGE</var>
</code>
</p>
<p class="final_answer">The average student score on the <var>TEST</var> was <code><var>AVERAGE</var></code>.</p>
</div>
</div>
<div id="comp-average">
<div class="vars" data-ensure="NUM_STUDENTS === 5">
<var id="UNBIASED">true</var>
<var id="MIDTERM_AVG">mean( MIDTERM )</var>
<var id="FINAL_AVG">mean( FINAL )</var>
<var id="ANSWER">MIDTERM_AVG &gt; FINAL_AVG ? "Midterm" : ( MIDTERM_AVG &lt; FINAL_AVG ? "Final exam" : "Same on both" )</var>
</div>
<p class="question">On average, did the students do better on the midterm or the final exam?</p>
<div class="solution"><var>ANSWER</var></div>
<ul class="choices" data-category="true">
<li>Midterm</li>
<li>Final exam</li>
<li>Same on both</li>
</ul>
<div class="hints">
<div>
<p>Find each of the <span class="hint_blue">midterm scores</span> represented by the <span class="hint_blue">blue bars</span>.</p>
<div data-each="NUM_STUDENTS times as INDEX">
<div class="graphie" data-update="barchart">
label( [ INDEX * 3 + 1.5, MIDTERM[ INDEX ] / 10 + 0.2 ], MIDTERM[ INDEX ], "below", false ).css({ fontWeight: "bold" });
</div>
</div>
</div>
<p>To find the average student score on the midterm, add up the individual scores and divide by the number of students.</p>
<div>
<p><code>
\dfrac{<var>plus.apply( null, MIDTERM )</var>}{<var>NUM_STUDENTS</var>} =
\dfrac{<var>sum( MIDTERM )</var>}{<var>NUM_STUDENTS</var>} =
<var>MIDTERM_AVG</var>
</code></p>
<p>The average student score on the midterm was <code class="hint_blue"><var>MIDTERM_AVG</var></code>.</p>
</div>
<div>
<p>Find each of the <span class="hint_orange">final exam scores</span> represented by the <span class="hint_orange">orange bars</span>.</p>
<div data-each="NUM_STUDENTS times as INDEX">
<div class="graphie" data-update="barchart">
label( [ INDEX * 3 + 2.5, FINAL[ INDEX ] / 10 + 0.2 ], FINAL[ INDEX ], "below", false ).css({ fontWeight: "bold" });
</div>
</div>
</div>
<p>To find the average student score on the final exam, add up the individual scores and divide by the number of students.</p>
<div>
<p><code>
\dfrac{<var>plus.apply( null, FINAL )</var>}{<var>NUM_STUDENTS</var>} =
\dfrac{<var>sum( FINAL )</var>}{<var>NUM_STUDENTS</var>} =
<var>FINAL_AVG</var>
</code></p>
<p>The average student score on the final exam was <code class="hint_orange"><var>FINAL_AVG</var></code>.</p>
</div>
<p class="final_answer" data-if="MIDTERM_AVG > FINAL_AVG">
The average student score was higher on the <span class="hint_blue">midterm</span>
than on the <span class="hint_orange">final exam</span>.
</p>
<p class="final_answer" data-else-if="MIDTERM_AVG < FINAL_AVG">
The average student score was higher on the <span class="hint_orange">final exam</span>
than the <span class="hint_blue">midterm</span>.
</p>
<p class="final_answer" data-else>
The average student score was the same on both the <span class="hint_blue">midterm</span>
and the <span class="hint_orange">final exam</span>.
</p>
</div>
</div>
<div id="median">
<div class="vars">
<var id="COLUMN">randRange( 0, 1 )</var>
<var id="TEST">[ "midterm", "final exam" ][ COLUMN ]</var>
<var id="MEDIAN">COLUMN === 0 ? median( MIDTERM ) : median( FINAL )</var>
</div>
<p class="question">What was the median score for the <var>TEST</var>?</p>
<div class="solution"><var>MEDIAN</var></div>
<div class="hints">
<div>
<p>Use the key to figure out which of the two bars shows the scores for the <var>TEST</var>.</p>
<div class="graphie" data-update="barchart">
style({ stroke: PINK, fill: "none", strokeWidth: 2 });
ellipse( [ COLUMN * 3 + 1.2, -2.25 ], [ 1.5, 0.5 ] );
</div>
</div>
<div>
<p>Find each of the <var>TEST</var> scores represented by the <span data-if="COLUMN === 0">blue</span><span data-else>orange</span> bars.</p>
<p><code>\qquad\large{<var>toSentence( COLUMN === 0 ? MIDTERM : FINAL, "" )</var>}</code></p>
<div data-each="NUM_STUDENTS times as INDEX">
<div class="graphie" data-update="barchart">
if ( COLUMN === 0 ) {
label( [ INDEX * 3 + 1.5, MIDTERM[ INDEX ] / 10 + 0.2 ], MIDTERM[ INDEX ], "below", false ).css({ fontWeight: "bold" });
} else {
label( [ INDEX * 3 + 2.5, FINAL[ INDEX ] / 10 + 0.2 ], FINAL[ INDEX ], "below", false ).css({ fontWeight: "bold" });
}
</div>
</div>
</div>
<div>
<p>Put the <var>TEST</var> scores in order from least to greatest.</p>
<p><code>\qquad\large{<var>toSentence( sortNumbers( COLUMN === 0 ? MIDTERM : FINAL ), "" )</var>}</code></p>
</div>
<p data-if="NUM_STUDENTS % 2">Since there are an odd number of scores, the median score is just the middle score.</p>
<div data-else data-unwrap>
<p>Since there are an even number of scores, the median score is the average of the two middle scores.</p>
<p>
<code>
\dfrac{
<var>COLUMN === 0 ? sortNumbers( MIDTERM )[ NUM_STUDENTS / 2 - 1 ] : sortNumbers( FINAL )[ NUM_STUDENTS / 2 - 1 ]</var> +
<var>COLUMN === 0 ? sortNumbers( MIDTERM )[ NUM_STUDENTS / 2 ] : sortNumbers( FINAL )[ NUM_STUDENTS / 2 ]</var>
}{2} = <var>MEDIAN</var>
</code>
</p>
</div>
<p class="final_answer">The median score on the <var>TEST</var> was <code><var>MEDIAN</var></code>.</p>
</div>
</div>
<div id="mode">
<div class="vars" data-ensure="MODE">
<var id="COLUMN">randRange( 0, 1 )</var>
<var id="TEST">[ "midterm", "final exam" ][ COLUMN ]</var>
<var id="MODE">COLUMN === 0 ? mode( MIDTERM ) : mode( FINAL )</var>
</div>
<p class="question">What was the mode for the <var>TEST</var> scores?</p>
<div class="solution" data-forms="integer"><var>MODE</var></div>
<div class="hints">
<div>
<p>Use the key to figure out which of the two bars shows the scores for the <var>TEST</var>.</p>
<div class="graphie" data-update="barchart">
style({ stroke: PINK, fill: "none", strokeWidth: 2 });
ellipse( [ COLUMN * 3 + 1.2, -2.25 ], [ 1.5, 0.5 ] );
</div>
</div>
<div>
<p>Find each of the <var>TEST</var> scores represented by the <span data-if="COLUMN === 0">blue</span><span data-else>orange</span> bars.</p>
<div data-each="NUM_STUDENTS times as INDEX">
<div class="graphie" data-update="barchart">
if ( COLUMN === 0 ) {
label( [ INDEX * 3 + 1.5, MIDTERM[ INDEX ] / 10 + 0.2 ], MIDTERM[ INDEX ], "below", false ).css({ fontWeight: "bold" });
} else {
label( [ INDEX * 3 + 2.5, FINAL[ INDEX ] / 10 + 0.2 ], FINAL[ INDEX ], "below", false ).css({ fontWeight: "bold" });
}
</div>
</div>
</div>
<p>The mode is the most frequently occurring score.</p>
<div>
<p class="final_answer"><code><var>MODE</var></code> is the most frequently occurring score.</p>
<div data-each="NUM_STUDENTS times as INDEX">
<div class="graphie" data-update="barchart">
if ( COLUMN === 0 ) {
if ( MIDTERM[ INDEX ] === MODE ) {
ellipse( [ INDEX * 3 + 1.5, MIDTERM[ INDEX ] / 10 - 0.5 ], [ 0.8, 0.6 ] );
}
} else {
if ( FINAL[ INDEX ] === MODE ) {
ellipse( [ INDEX * 3 + 2.5, FINAL[ INDEX ] / 10 - 0.5 ], [ 0.8, 0.6 ] );
}
}
</div>
</div>
</div>
</div>
</div>
<div id="range">
<div class="vars">
<var id="COLUMN">randRange( 0, 1 )</var>
<var id="TEST">[ "midterm", "final exam" ][ COLUMN ]</var>
<var id="MIN">COLUMN === 0 ? Math.min.apply( null, MIDTERM ) : Math.min.apply( null, FINAL )</var>
<var id="MAX">COLUMN === 0 ? Math.max.apply( null, MIDTERM ) : Math.max.apply( null, FINAL )</var>
<var id="RANGE">MAX - MIN</var>
</div>
<p class="question">What is the range of the <var>TEST</var> scores?</p>
<div class="solution" data-forms="integer"><var>RANGE</var></div>
<div class="hints">
<p>The range is the difference between the largest value and the smallest value.</p>
<div>
<p>Use the key to figure out which of the two bars shows the scores for the <var>TEST</var>.</p>
<div class="graphie" data-update="barchart">
style({ stroke: PINK, fill: "none", strokeWidth: 2 });
ellipse( [ COLUMN * 3 + 1.2, -2.25 ], [ 1.5, 0.5 ] );
</div>
</div>
<div>
<p>Find the largest and smallest <var>TEST</var> scores represented by the <span data-if="COLUMN === 0">blue</span><span data-else>orange</span> bars.</p>
<div data-each="NUM_STUDENTS times as INDEX">
<div class="graphie" data-update="barchart">
if ( COLUMN === 0 ) {
if ( MIDTERM[ INDEX ] === MIN || MIDTERM[ INDEX ] === MAX ) {
label( [ INDEX * 3 + 1.5, MIDTERM[ INDEX ] / 10 + 0.2 ], MIDTERM[ INDEX ], "below", false ).css({ fontWeight: "bold" });
}
} else {
if ( FINAL[ INDEX ] === MIN || FINAL[ INDEX ] === MAX ) {
label( [ INDEX * 3 + 2.5, FINAL[ INDEX ] / 10 + 0.2 ], FINAL[ INDEX ], "below", false ).css({ fontWeight: "bold" });
}
}
</div>
</div>
</div>
<p>The smallest <var>TEST</var> score is <code><var>MIN</var></code>. The largest <var>TEST</var> score is <code><var>MAX</var></code>.</p>
<div>
<p>Find the range by subtracting the smallest score from the largest score.</p>
<p><code>\qquad <var>MAX</var> - <var>MIN</var> = <var>RANGE</var></code></p>
</div>
<p class="final_answer">The range of <var>TEST</var> scores is <code><var>RANGE</var></code>.</p>
</div>
</div>
<div id="midrange">
<div class="vars">
<var id="COLUMN">randRange( 0, 1 )</var>
<var id="TEST">[ "midterm", "final exam" ][ COLUMN ]</var>
<var id="MIN">COLUMN === 0 ? Math.min.apply( null, MIDTERM ) : Math.min.apply( null, FINAL )</var>
<var id="MAX">COLUMN === 0 ? Math.max.apply( null, MIDTERM ) : Math.max.apply( null, FINAL )</var>
<var id="MIDRANGE">(MAX + MIN) / 2</var>
</div>
<p class="question">What is the midrange of the <var>TEST</var> scores?</p>
<div class="solution"><var>MIDRANGE</var></div>
<div class="hints">
<p>The midrange is halfway between the largest value and the smallest value.</p>
<div>
<p>Use the key to figure out which of the two bars shows the scores for the <var>TEST</var>.</p>
<div class="graphie" data-update="barchart">
style({ stroke: PINK, fill: "none", strokeWidth: 2 });
ellipse( [ COLUMN * 3 + 1.2, -2.25 ], [ 1.5, 0.5 ] );
</div>
</div>
<div>
<p>Find the largest and smallest <var>TEST</var> scores represented by the <span data-if="COLUMN === 0">blue</span><span data-else>orange</span> bars.</p>
<div data-each="NUM_STUDENTS times as INDEX">
<div class="graphie" data-update="barchart">
if ( COLUMN === 0 ) {
if ( MIDTERM[ INDEX ] === MIN || MIDTERM[ INDEX ] === MAX ) {
label( [ INDEX * 3 + 1.5, MIDTERM[ INDEX ] / 10 + 0.2 ], MIDTERM[ INDEX ], "below", false ).css({ fontWeight: "bold" });
}
} else {
if ( FINAL[ INDEX ] === MIN || FINAL[ INDEX ] === MAX ) {
label( [ INDEX * 3 + 2.5, FINAL[ INDEX ] / 10 + 0.2 ], FINAL[ INDEX ], "below", false ).css({ fontWeight: "bold" });
}
}
</div>
</div>
</div>
<p>The smallest <var>TEST</var> score is <code><var>MIN</var></code>. The largest <var>TEST</var> score is <code><var>MAX</var></code>.</p>
<div>
<p>Find the midrange by averaging the smallest and largest scores.</p>
<p><code>\qquad \dfrac{<var>MIN</var> + <var>MAX</var>}{2} = <var>MIDRANGE</var></code></p>
</div>
<p class="final_answer">The midrange of <var>TEST</var> scores is <code><var>MIDRANGE</var></code>.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.