Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

135 lines (128 sloc) 5.277 kB
<!DOCTYPE html>
<html data-require="math graphie word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reading bar charts 1</title>
<script data-main="../local-only/main.js" src="../local-only/require.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">
<!-- I18N: Harry Potter's Hogwarts house names -->
<var id="HOUSES">
[$._("Gryffindor"), $._("Hufflepuff"),
$._("Ravenclaw"), $._("Slytherin")]
</var>
<var id="INDEX">randRange( 0, HOUSES.length - 1 )</var>
<var id="VALUES">_.map(randRangeUnique(0, 9, HOUSES.length),
function(n) { return n * 10; })
</var>
</div>
<div class="problems">
<div>
<p class="problem">
At Hogwarts, there are four houses:
<var>toSentence(HOUSES)</var>. The bar chart below shows the
number of house points that each house received today.
</p>
<p class="question">
How many house points did <var>HOUSES[INDEX]</var> receive?
</p>
<p class="render-answer-area-here"></p>
<div class="graphie" id="barchart">
init({
range: [[-2, 14], [-3, 11.5]],
scale: [27, 30]
});
_.times(10, function(y) {
label([0, y], y * 10, "left", false);
style({
stroke: "#000",
strokeWidth: 1,
opacity: 0.2
}, function() {
line([0, y], [13, y]);
});
});
_.each(VALUES, function(value, index) {
style({ stroke: null, fill: "#9ab8ed", opacity: 1.0 });
path([[index * 3 + 1.5, 0], [index * 3 + 1.5, value / 10],
[index * 3 + 2.5, value / 10],
[index * 3 + 2.5, 0], true]);
style({ opacity: 1.0 });
label([index * 3 + 2, 0], HOUSES[index], "below", false);
});
style({ stroke: "#000", strokeWidth: 2, opacity: 1.0 });
line( [ 0, 0 ], [ 13, 0 ] );
line( [ 0, 0 ], [ 0, 10 ] );
label( [ 6.5, -0.8 ],
$._("House"),
"below", false ).css('font-weight', 'bold');
label( [ -1.5, 5 ],
"House points",
"center", false ).addClass( "rotate" )
.css('font-weight', 'bold');
label( [ 6.5, 10.5 ],
"House points earned today",
"above", false ).css('font-weight', 'bold');
</div>
<div class="solution" data-type="multiple">
<span class="sol" data-forms="integer, decimal">
<var>VALUES[INDEX]</var>
</span> house points
</div>
<div class="hints">
<div>
<p>Find the bar for <var>HOUSES[INDEX]</var>.</p>
<div class="graphie" data-update="barchart">
style({ stroke: PINK, fill: null, strokeWidth: 2 });
ellipse([INDEX * 3 + 2, -0.6], [1.5, 0.5]);
</div>
</div>
<div data-if="VALUES[INDEX] === 0">
<p>
There is no bar for <var>HOUSES[INDEX]</var>, which
means <var>HOUSES[INDEX]</var> recieved <code>0</code>
house points.
</p>
</div>
<div data-else="" data-unwrap="">
<div>
<p>
Compare the height of the bar for
<var>HOUSES[INDEX]</var> 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.5, VALUES[INDEX] / 10],
[0, VALUES[INDEX] / 10]);
</div>
</div>
<p>
<var>HOUSES[INDEX]</var> received
<code><var>VALUES[INDEX]</var></code> house points.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.