Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

264 lines (244 sloc) 12.577 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">jQuery.map( new Array( 5 ), function() { return randRange( 12, 20 ) * 5; } )</var>
<var id="FINAL">jQuery.map( new Array( 5 ), function() { return randRange( 12, 20 ) * 5; } )</var>
<var id="IMPROVEMENT">jQuery.map( new Array( 5 ), function( e, n ) { return FINAL[ n ] - MIDTERM[ n ]; } )</var>
<var id="NUM_IMPROVED">jQuery.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: [ 30, 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 );
jQuery( 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.