Permalink
Fetching contributors…
Cannot retrieve contributors at this time
161 lines (159 sloc) 9.46 KB
<!DOCTYPE html>
<html data-require="math word-problems graphie">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reading tables 1</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div>
<div class="vars">
<var id="INDEX">randRange( 0, 3 )</var>
<var id="ROWS">[
[ school(1), school(2), school(3), school(4) ],
[ person(1), person(2), person(3), person(4) ],
[ person(1), person(2), person(3), person(4) ],
[ i18n._("Alabama"), i18n._("Michigan"), i18n._("New York"), i18n._("Wyoming") ]
][ INDEX ]</var>
<var id="COLUMNS">[
[ i18n._("3rd grade"), i18n._("4th grade"), i18n._("5th grade"), i18n._("Total") ],
[ i18n._("January"), i18n._("February"), i18n._("March"), i18n._("Total") ],
[ i18n._("1st Quarter"), i18n._("2nd Quarter"), i18n._("3rd Quarter"), i18n._("4th Quarter"), i18n._("Total") ],
[ i18n._("Q1"), i18n._("Q2"), i18n._("Q3"), i18n._("Q4"), i18n._("Total") ] ][ INDEX ]</var>
<var id="ENROLLMENTS">
(function() {
var enrollments = [];
var classMin = [ 60, 0, 2, 20 ][ INDEX ];
var classMax = [ 80, 6, 10, 40 ][ INDEX ];
for ( var i = 0; i &lt; ROWS.length; i++ ) {
var enroll = randRange( classMin, classMax, COLUMNS.length - 1 );
var total = 0;
$.each( enroll, function( i, e ) {
total += e;
} );
enroll.push( total );
enrollments.push( enroll );
}
return enrollments;
})()
</var>
<var id="COL_INDEX">randRange( 0, COLUMNS.length - 1 )</var>
<var id="ROW_INDEX">randRange( 0, ROWS.length - 1 )</var>
<var id="ANSWER">ENROLLMENTS[ ROW_INDEX ][ COL_INDEX ]</var>
<var id="PROBLEM">[
i18n._("shows the enrollment at four different elementary schools that have 3rd through 5th grade students"),
i18n._("shows the number of chickens sold by four farmers from January to March"),
i18n._("indicates the points scored by four players in a charity basketball game"),
i18n._("shows solar panel installations by state during the last fiscal year")
][ INDEX ]</var>
<var id="QUESTION">(function() {
if ( COL_INDEX === COLUMNS.length - 1 ) {
var dict = {name: ROWS[ROW_INDEX]};
return [
i18n._("How many students does %(name)s Elementary School have in total?", dict),
i18n._("How many chickens did %(name)s sell in total?", dict),
i18n._("How many points did %(name)s have in total?", dict),
i18n._("How many total solar panels were installed last year in %(name)s?", dict)
][ INDEX ];
} else {
return [
i18n._("How many %(grade)s students does %(name)s Elementary School have?", {grade: COLUMNS[COL_INDEX], name: ROWS[ROW_INDEX]}),
i18n._("How many chickens did %(name)s sell in %(month)s?", {name: ROWS[ROW_INDEX], month: COLUMNS[COL_INDEX]}),
i18n._("How many points did %(name)s score in the %(time_period)s?", {name: ROWS[ROW_INDEX], time_period: COLUMNS[COL_INDEX]}),
i18n._("How many solar panels were installed in %(state)s in %(time_period)s?", {state: ROWS[ROW_INDEX], time_period: COLUMNS[COL_INDEX]})
][ INDEX ];
}
})()
</var>
<var id="HEADER">[
i18n._("Schools"),
i18n._("Farmers"),
i18n._("Players"),
i18n._("States")
][ INDEX ]</var>
<var id="UNIT">[
i18n._("students"),
i18n._("chicken(s)"),
i18n._("points"),
i18n._("solar panels")
][ INDEX ]</var>
<var id="ROW_HINT">[
i18n._("the student enrollment at %(name)s", {name: ROWS[ROW_INDEX]}),
i18n._("the number of chickens sold by %(name)s", {name: ROWS[ROW_INDEX]}),
i18n._("the number of points scored by %(name)s", {name: ROWS[ROW_INDEX]}),
i18n._("the number of solar panels installed in %(state)s", {state: ROWS[ROW_INDEX]})
][ INDEX ]</var>
<var id="COL_HINT">
(function() {
if ( COL_INDEX === COLUMNS.length - 1 ) {
return [
i18n._("the total number of students at each school"),
i18n._("the total number of chickens sold by each person"),
i18n._("the total number of points scored by each person"),
i18n._("the total number of solar panels installed in each state")
][ INDEX ];
} else {
return [
i18n._("the number of %(grade)s students at each school", {grade: COLUMNS[COL_INDEX]}),
i18n._("the number of chickens sold in %(month)s", {month: COLUMNS[COL_INDEX]}),
i18n._("the number of points scored in the %(time_period)s", {time_period: COLUMNS[COL_INDEX]}),
i18n._("the number of solar panels installed in %(time_period)s" + COLUMNS[ COL_INDEX ], {time_period: COLUMNS[COL_INDEX]})
][ INDEX ];
}
})()
</var>
<var id="FINAL_HINT">[
i18n._("There are %(num)s %(grade)s students at %(school_name)s.", {num: ANSWER, grade: COLUMNS[COL_INDEX], school_name: ROWS[ROW_INDEX]}),
(COL_INDEX === COLUMNS.length - 1 ?
i18n.ngettext("%(name)s sold %(num)s chicken in total.",
"%(name)s sold %(num)s chickens in total.", ANSWER, {name: ROWS[ROW_INDEX]}) :
i18n.ngettext("%(name)s sold %(num)s chicken in %(month)s.",
"%(name)s sold %(num)s chickens in %(month)s.", ANSWER, {name: ROWS[ROW_INDEX], month: COLUMNS[COL_INDEX]})),
(COL_INDEX === COLUMNS.length - 1 ?
i18n._("%(name)s scored %(num)s points in total.", {name: ROWS[ROW_INDEX], num: ANSWER}) :
i18n._("%(name)s scored %(num)s points in the %(time_period)s.", {name: ROWS[ROW_INDEX], num: ANSWER, time_period: COLUMNS[COL_INDEX]})),
(COL_INDEX === COLUMNS.length - 1 ?
i18n._("There were %(num)s solar panels installed in %(state)s last year.", {num: ANSWER, state: ROWS[ROW_INDEX]}) :
i18n._("There were %(num)s solar panels installed in %(state)s in %(month)s.", {num: ANSWER, state: ROWS[ROW_INDEX], month: COLUMNS[COL_INDEX]}))
][ INDEX ]</var>
</div>
<p>The table below <var>PROBLEM</var>.</p>
<p class="question"><var>QUESTION</var></p>
<div class="fake_header reading-tables">
<span><var>HEADER</var></span><span data-each="COLUMNS as i, column"><var>column</var></span>
</div>
<div class="fake_row reading-tables" data-each="ROWS as i, row">
<span><var>row</var></span><span data-each="ENROLLMENTS[i] as j, enrollment"><var>enrollment</var></span>
</div>
<div class="solution" data-type="multiple">
<span class="sol" data-forms="integer" style="padding-right: 5px"><var>ANSWER</var></span> <var>UNIT</var>
</div>
<div class="hints">
<div>
<p>The blue row shows <var>ROW_HINT</var>.</p>
<div class="graphie">
$( ".fake_row" ).eq( ROW_INDEX ).find( "span" )
.css( "background", KhanUtil.BLUE );
</div>
</div>
<div>
<p>The orange column shows <var>COL_HINT</var>.</p>
<div class="graphie">
var nth = ":nth-child(" + ( COL_INDEX + 2 ) + ")";
$( ".fake_row span" + nth )
.css( "background", KhanUtil.ORANGE );
$( ".fake_header span" + nth )
.css( "background", KhanUtil.ORANGE );
$( ".fake_row" ).eq( ROW_INDEX ).find( "span" + nth )
.css( "background", "#aaa" );
</div>
</div>
<p><var>FINAL_HINT</var></p>
</div>
</div>
</div>
</div>
</body>
</html>