Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

264 lines (244 sloc) 16.11 kb
<!DOCTYPE html>
<html data-require="math math-format graphie word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reading bar charts 2</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.BasicImage(rotation=3)";
}
body.ie span.rotate {
left: 60px !important;
top: 140px !important;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<div data-ensure="( NUM_IMPROVED >= 3 && !IMPROVE_TIE ) || UNBIASED">
<var id="MIDTERM">$.map( new Array( 5 ), function() { return randRange( 12, 20 ) * 5; } )</var>
<var id="FINAL">$.map( new Array( 5 ), function() { return randRange( 12, 20 ) * 5; } )</var>
<var id="IMPROVEMENT">$.map( new Array( 5 ), 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">
<p>Use the following graph to answer the question below:</p>
<div class="graphie" id="barchart">
init({
range: [ [ -2, 17 ], [ -3, 11 ] ],
scale: [ 27, 30 ]
});
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 ], [ 16, y ] )
});
}
for ( var index = 0; index &lt; 5; ++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 ], [ 16, 0 ] );
line( [ 0, 0 ], [ 0, 10 ] );
label( [ 8, -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( [ 8, 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="most-improved">
<div class="vars">
<var id="BEST_IMPROVEMENT">Math.max.apply( Math, IMPROVEMENT )</var>
<var id="MOST_IMPROVED_IDX">_.indexOf( IMPROVEMENT, BEST_IMPROVEMENT )</var>
<var id="MOST_IMPROVED">person( MOST_IMPROVED_IDX + 1 )</var>
</div>
<p class="question">Which student's score improved the most between the midterm and final exams?</p>
<div class="solution"><var>MOST_IMPROVED</var></div>
<ul class="choices" data-category="true">
<li><var>person( 1 )</var></li>
<li><var>person( 2 )</var></li>
<li><var>person( 3 )</var></li>
<li><var>person( 4 )</var></li>
<li><var>person( 5 )</var></li>
</ul>
<div class="hints">
<div data-each="5 times as INDEX">
<div data-if="IMPROVEMENT[ INDEX ] > 0">
<p><var>person( INDEX + 1 )</var>'s final exam bar is taller than <var>his( INDEX + 1 )</var>
midterm bar, so <var>person( INDEX + 1 )</var> improved <var>his( INDEX + 1 )</var> score. <var>His( INDEX + 1 )</var> midterm score was
<code><var>MIDTERM[ INDEX ]</var></code> and <var>his( INDEX + 1 )</var> final exam score was <code><var>FINAL[ INDEX ]</var></code>, so
<var>he( INDEX + 1 )</var> improved by <code><var>IMPROVEMENT[ INDEX ]</var></code> points.</p>
<div class="graphie" data-update="barchart">
style({ stroke: GREEN, strokeWidth: 2, arrows: "-&gt;" });
line( [ INDEX * 3 + 1.5, MIDTERM[ INDEX ] / 10 ], [ INDEX * 3 + 2.5, FINAL[ INDEX ] / 10 ] );
label( [ INDEX * 3 + 1.5, MIDTERM[ INDEX ] / 10 + 0.2 ], MIDTERM[ INDEX ], "below", false ).css({ fontWeight: "bold" });
label( [ INDEX * 3 + 2.5, FINAL[ INDEX ] / 10 - 0.2 ], FINAL[ INDEX ], "above", false ).css({ fontWeight: "bold" });
</div>
</div>
<div data-else-if="IMPROVEMENT[ INDEX ] < 0">
<p><var>person( INDEX + 1 )</var>'s final exam bar is shorter than <var>his( INDEX + 1 )</var>
midterm bar, so <var>person( INDEX + 1 )</var> did not improve <var>his( INDEX + 1 )</var> score.</p>
<div class="graphie" data-update="barchart">
style({ stroke: "grey", strokeWidth: 2, arrows: "-&gt;" });
line( [ INDEX * 3 + 1.5, MIDTERM[ INDEX ] / 10 ], [ INDEX * 3 + 2.5, FINAL[ INDEX ] / 10 ] );
</div>
</div>
<div data-else>
<p><var>person( INDEX + 1 )</var>'s final exam bar is the same height as <var>his( INDEX + 1 )</var>
midterm bar, so <var>person( INDEX + 1 )</var> did not improve <var>his( INDEX + 1 )</var> score.</p>
</div>
</div>
<p>
<var>MOST_IMPROVED</var> improved <var>his( MOST_IMPROVED_IDX + 1 )</var> score the most, scoring <code><var>BEST_IMPROVEMENT</var></code> more points
on <var>his( MOST_IMPROVED_IDX + 1 )</var> final exam than on <var>his( MOST_IMPROVED_IDX + 1 )</var> midterm.
</p>
</div>
</div>
<div id="difference">
<div class="vars">
<var id="INDEX" data-ensure="IMPROVEMENT[ INDEX ] > 0">randRange( 0, 4 )</var>
<var id="STUDENT">person( INDEX + 1 )</var>
</div>
<p class="question">By how many points did <var>STUDENT</var>'s score improve from the midterm to the final exam?</p>
<div class="solution" data-type="multiple">
<p><span style="padding-right: 5px" class="sol" data-forms="integer"><var>IMPROVEMENT[ INDEX ]</var></span> points</p>
</div>
<div class="hints">
<div>
<p>Find the two bars for <var>STUDENT</var>.</p>
<div class="graphie" data-update="barchart">
style({ stroke: PINK, fill: "none", strokeWidth: 2 });
ellipse( [ INDEX * 3 + 2, -0.6 ], [ 1.2, 0.5 ] );
</div>
</div>
<div>
<p>
Compare the height of <var>STUDENT</var>'s blue bar to the scale on the left to find <var>his( INDEX + 1 )</var> midterm score.
<span data-if="MIDTERM[ INDEX ] % 10 === 5">
The bar's height is halfway between <code><var>MIDTERM[ INDEX ] - 5</var></code> and <code><var>MIDTERM[ INDEX ] + 5</var></code>, so
</span>
<var>STUDENT</var> earned <code class="hint_blue"><var>MIDTERM[ INDEX ]</var></code> points on the midterm.
</p>
<div class="graphie" data-update="barchart">
style({ stroke: BLUE, strokeWidth: 2, arrows: "-&gt;", strokeDasharray: "-" });
line( [ INDEX * 3 + 1, MIDTERM[ INDEX ] / 10 ], [ 0, MIDTERM[ INDEX ] / 10 ] );
</div>
</div>
<div>
<p>
Compare the height of <var>STUDENT</var>'s orange bar to the scale on the left to find <var>his( INDEX + 1 )</var> final exam score.
<span data-if="FINAL[ INDEX ] % 10 === 5">
The bar's height is halfway between <code><var>FINAL[ INDEX ] - 5</var></code> and <code><var>FINAL[ INDEX ] + 5</var></code>, so
</span>
<var>STUDENT</var> earned <code class="hint_orange"><var>FINAL[ INDEX ]</var></code> points on the final exam.
</p>
<div class="graphie" data-update="barchart">
style({ stroke: ORANGE, strokeWidth: 2, arrows: "-&gt;", strokeDasharray: "-" });
line( [ INDEX * 3 + 2, FINAL[ INDEX ] / 10 ], [ 0, FINAL[ INDEX ] / 10 ] );
</div>
</div>
<p>
Subtract the midterm score from the final exam score to find out how much <var>STUDENT</var> improved.
</p>
<p>
<code>\color{ORANGE}{<var>FINAL[ INDEX ]</var>} - \color{#6495ED}{<var>MIDTERM[ INDEX ]</var>} = <var>IMPROVEMENT[ INDEX ]</var></code>, so
<var>STUDENT</var> improved by <code><var>IMPROVEMENT[ INDEX ]</var></code> points from the midterm to the final exam.
</p>
</div>
</div>
<div id="reading">
<div class="vars">
<var id="INDEX">randRange( 0, 4 )</var>
<var id="STUDENT">person( INDEX + 1 )</var>
<var id="COLUMN">randRange( 0, 1 )</var>
<var id="TEST">[ "midterm", "final exam" ][ COLUMN ]</var>
<var id="ANSWER">COLUMN === 0 ? MIDTERM[ INDEX ] : FINAL[ INDEX ]</var>
</div>
<p class="question">How many points did <var>STUDENT</var> earn on the <var>TEST</var>?</p>
<div class="solution" data-type="multiple">
<p><span style="padding-right: 5px" class="sol" data-forms="integer"><var>ANSWER</var></span> points</p>
</div>
<div class="hints">
<div>
<p>Find the two bars for <var>STUDENT</var>.</p>
<div class="graphie" data-update="barchart">
style({ stroke: PINK, fill: "none", strokeWidth: 2 });
ellipse( [ INDEX * 3 + 2, -0.6 ], [ 1.2, 0.5 ] );
</div>
</div>
<div>
<p>Use the key to figure out which of the two bars shows the score 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>Compare the height of <var>STUDENT</var>'s <span data-if="COLUMN === 0">blue</span><span data-else>orange</span> bar to the scale on the left.</p>
<div class="graphie" data-update="barchart">
style({ stroke: PINK, strokeWidth: 2, arrows: "-&gt;", strokeDasharray: "-" });
line( [ INDEX * 3 + 1 + COLUMN, ANSWER / 10 ], [ 0, ANSWER / 10 ] );
</div>
</div>
<p data-if="ANSWER % 10 === 5">
The bar's height is halfway between <code><var>ANSWER - 5</var></code> and <code><var>ANSWER + 5</var></code>, so
<var>STUDENT</var> earned <code><var>ANSWER</var></code> points on the <var>TEST</var>.
</p>
<p data-else>
<var>STUDENT</var> earned <code><var>ANSWER</var></code> points on the <var>TEST</var>.
</p>
</div>
</div>
<div id="num-improved">
<p class="question">How many students improved their scores from the midterm to the final exam?</p>
<div class="solution" data-type="multiple">
<p><span style="padding-right: 5px" class="sol" data-forms="integer"><var>NUM_IMPROVED</var></span> students</p>
</div>
<div class="hints">
<div data-each="5 times as INDEX">
<div data-if="IMPROVEMENT[ INDEX ] > 0">
<p><var>person( INDEX + 1 )</var>'s final exam bar is taller than <var>his( INDEX + 1 )</var>
midterm bar, so <var>person( INDEX + 1 )</var> improved <var>his( INDEX + 1 )</var> score.</p>
<div class="graphie" data-update="barchart">
style({ stroke: "grey", strokeWidth: 2, arrows: "-&gt;" });
line( [ INDEX * 3 + 1.5, MIDTERM[ INDEX ] / 10 ], [ INDEX * 3 + 2.5, FINAL[ INDEX ] / 10 ] );
</div>
</div>
<div data-else-if="IMPROVEMENT[ INDEX ] < 0">
<p><var>person( INDEX + 1 )</var>'s final exam bar is shorter than <var>his( INDEX + 1 )</var>
midterm bar, so <var>person( INDEX + 1 )</var> did not improve <var>his( INDEX + 1 )</var> score.</p>
</div>
<div data-else>
<p><var>person( INDEX + 1 )</var>'s final exam bar is the same height as <var>his( INDEX + 1 )</var>
midterm bar, so <var>person( INDEX + 1 )</var> did not improve <var>his( INDEX + 1 )</var> score.</p>
</div>
</div>
<p>Count the number of students who improved their scores.</p>
<p><code><var>NUM_IMPROVED</var></code> students improved their scores from the midterm to the final exam.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.