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

126 lines (124 sloc) 8.111 kb
<!DOCTYPE html>
<html data-require="math graphie word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reading tables 2</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script>
function fillInCorrectAnswer( schoolIndex, columnIndex, answer, color ) {
var nth = ":nth-child(" + ( columnIndex + 2 ) + ")";
$( ".fake_row" ).eq( schoolIndex ).find( "span" + nth )
.html( answer )
.css( "color", color );
}
</script>
</head>
<body>
<div class="exercise">
<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) ], [ "Alabama", "Michigan", "New York", "Wyoming" ] ][ INDEX ]</var>
<var id="COLUMNS">[ [ "3rd grade", "4th grade", "5th grade", "Total" ], [ "January", "February", "March", "Total" ], [ "1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter", "Final" ], [ "Q1", "Q2", "Q3", "Q4", "Total" ] ][ INDEX ]</var>
<var id="COL_INDEX">randRange( 0, COLUMNS.length - 1 )</var>
<var id="ROW_INDEX">randRange( 0, ROWS.length - 1 )</var>
<var id="ENROLLMENTS, ANSWER">
(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 );
}
var answer = enrollments[ ROW_INDEX ][ COL_INDEX ];
enrollments[ ROW_INDEX ][ COL_INDEX ] = "&nbsp;";
return [ enrollments, answer ];
})()
</var>
<var id="PROBLEM">[ "shows the enrollment at four different elementary schools that have 3rd through 5th grade students", "shows the number of chickens sold by four friends from January to March", "indicates the points scored by four players in a charity basketball game", "shows solar panel installations by state during the last fiscal year" ][ INDEX ]</var>
<var id="HEADER">[ "Schools", "Farmers", "Players", "States" ][ INDEX ]</var>
<var id="UNIT">[ "students", "chickens", "points", "solar panels" ][ INDEX ]</var>
<var id="HINT1">
(function() {
if ( COL_INDEX === COLUMNS.length - 1 ) {
return [ "the total number of students at " + ROWS[ ROW_INDEX ] + " Elementary School", "the total number of chickens sold by " + ROWS[ ROW_INDEX ], "the total number of points scored by " + ROWS[ ROW_INDEX ], "the total number of solar panels installed in " + ROWS [ ROW_INDEX ] ][ INDEX ];
} else {
return [ "the number of " + COLUMNS[ COL_INDEX ] + " students at " + ROWS[ ROW_INDEX ] + " Elementary School", "the number of chickens sold in " + COLUMNS[ COL_INDEX ] + " by " + ROWS[ ROW_INDEX ], "the number of points scored in the " + COLUMNS[ COL_INDEX ] + " by " + ROWS[ ROW_INDEX ], "the number of solar panels installed in " + COLUMNS[ COL_INDEX ] + " in " + ROWS[ ROW_INDEX ] ][ INDEX ];
}
})()
</var>
<var id="HINT2">[ "The total number of students at " + ROWS[ ROW_INDEX ] + " Elementary School", "The total number of chickens sold by " + ROWS[ ROW_INDEX ], "The total number of points scored by " + ROWS[ ROW_INDEX ], "The total number of solar panels installed in " + ROWS [ ROW_INDEX ] ][ INDEX ]</var>
</div>
<div class="problems">
<div>
<p>The table below <var>PROBLEM</var>, except one entry is missing.</p>
<p class="question">What number should go in the empty cell?</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">
<p>The table is missing <var>HINT1</var>.</p>
<div data-if="COL_INDEX === COLUMNS.length - 1" data-unwrap="">
<div>
<p>The table accounts for <span class="hint_orange"><var>ENROLLMENTS[ ROW_INDEX ].slice( 0, COL_INDEX ).join( "+" )</var></span> <var>UNIT</var>.</p>
<div class="graphie">
$.each( COLUMNS, function( i, c ) {
if ( i !== 0 ) {
$( ".fake_row" ).eq( ROW_INDEX ).find( "span" ).eq( i )
.css( "color", KhanUtil.ORANGE );
}
});
</div>
</div>
<div>
<p><var>HINT2</var> is simply the sum, or <span class="hint_pink"><var>ANSWER</var></span>.</p>
<div class="graphie">
fillInCorrectAnswer( ROW_INDEX, COL_INDEX, ANSWER, KhanUtil.PINK );
</div>
</div>
</div>
<div data-else="" data-unwrap="">
<div>
<p><var>HINT2</var> is <span class="hint_blue"><var>ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ]</var></span>.</p>
<div class="graphie">
$( ".fake_row" ).eq( ROW_INDEX ).find( "span" ).eq( COLUMNS.length )
.css( "color", KhanUtil.BLUE );
</div>
</div>
<div>
<p>The table already accounts for <span class="hint_orange"><var>ENROLLMENTS[ ROW_INDEX ].slice( 0, COL_INDEX ).concat( ENROLLMENTS[ ROW_INDEX ].slice( COL_INDEX + 1, COLUMNS.length - 1 ) ).join( "+" )</var> =
<var>ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ] - ANSWER</var></span> <var>UNIT</var>.</p>
<div class="graphie">
$.each( COLUMNS, function( i, c ) {
if ( i !== 0 ) {
$( ".fake_row" ).eq( ROW_INDEX ).find( "span" ).eq( i )
.css( "color", KhanUtil.ORANGE );
}
});
</div>
</div>
<p>The missing number must be the difference between <var>HINT2.slice( 0, 1 ).toLowerCase() + HINT2.slice( 1 )</var>, <span class="hint_blue"><var>ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ]</var></span>, and the values already accounted for, <span class="hint_orange"><var>ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ] - ANSWER</var></span>.</p>
<div>
<p><span class="hint_blue"><var>ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ]</var></span> - <span class="hint_orange"><var>ENROLLMENTS[ ROW_INDEX ][ COLUMNS.length - 1 ] - ANSWER</var></span> = <span class="hint_pink"><var>ANSWER</var></span></p>
<div class="graphie">
fillInCorrectAnswer( ROW_INDEX, COL_INDEX, ANSWER, KhanUtil.PINK );
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.