Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

114 lines (99 sloc) 5.005 kB
<!DOCTYPE html>
<html data-require="math math-format graphie word-problems interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Decimals on the number line 1</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="LOWER_BOUND">0</var>
<var id="UPPER_BOUND">1</var>
<var id="MARK_INCREMENT"> 0.1 </var>
<var id="TENTHS"> randRange(1, 9) </var>
<var id="SOLUTION"> TENTHS * MARK_INCREMENT </var>
<var id="SOLN_TXT"> localeToFixed(SOLUTION, 1) </var>
</div>
<div class="problems">
<div>
<div class="question">
<p>Move the orange dot to <code>\pink{<var>SOLN_TXT</var>}</code> on the number line.</p>
<div class="graphie" id="number-line">
init({
range: [[LOWER_BOUND - 0.1, UPPER_BOUND + 0.4], [-1, 1]],
scale: [350, 40]
});
style({arrows: "&gt;"});
line( [ 0, 0 ], [ UPPER_BOUND + 0.06, 0 ] );
style({arrows: "-&gt;"});
line( [ 0, 0 ], [ LOWER_BOUND - 0.06, 0 ] );
style({arrows: ""});
for ( var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x += MARK_INCREMENT ) {
line( [ x, -0.2 ], [ x, 0.2 ] );
}
style({ stroke: BLUE, strokeWidth: 3.5 });
line( [ LOWER_BOUND, -0.2], [LOWER_BOUND, 0.2]);
label( [ LOWER_BOUND, -0.53 ], LOWER_BOUND, "center", { color: BLUE });
line( [ UPPER_BOUND, -0.2], [UPPER_BOUND, 0.2]);
label( [ UPPER_BOUND, -0.53 ], UPPER_BOUND, "center", { color: BLUE });
addMouseLayer();
graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: 0.025 });
graph.movablePoint.onMove = function( x, y ) {
return [ min( max( LOWER_BOUND, x ), UPPER_BOUND ), y ];
};
</div>
</div>
<div class="solution" data-type="custom">
<span class="instruction"></span>
<div class="guess"> graph.movablePoint.coord[0] </div>
<div class="validator-function">
if ( guess === 0 ) {
return "";
}
return abs( SOLUTION - guess ) &lt; 0.001;
</div>
<div class="show-guess">
graph.movablePoint.setCoord( [ guess, 0 ] );
</div>
</div>
<div class="hints">
<p>
The number line is divided into <code>10</code> equal pieces between
<code><var>LOWER_BOUND</var></code> and <code><var>UPPER_BOUND</var></code>.
</p>
<div>
<div class="graphie" data-update="number-line">
var MI = MARK_INCREMENT;
for (var x = LOWER_BOUND + MI; x &lt; UPPER_BOUND - MI/2; x += MI) {
label([LOWER_BOUND + x, -0.53], localeToFixed(x, 1) , "center");
}
</div>
<p>Each piece represents a length of <code><var>commafy(MARK_INCREMENT)</var></code>.</p>
</div>
<p data-if="isSingular(TENTHS)">
Starting at <code><var>LOWER_BOUND</var></code>, we move a length of
<code>\blue{<var>commafy(MARK_INCREMENT)</var> \text{ <var>cardinalThrough20(TENTHS)</var> time}}</code>
to get to <code>\pink{<var>SOLN_TXT</var>}</code>.
</p>
<p data-else="">
Starting at <code><var>LOWER_BOUND</var></code>, we move a length of
<code>\blue{<var>commafy(MARK_INCREMENT)</var> \text{ <var>cardinalThrough20(TENTHS)</var> times}}</code>
to get to <code>\pink{<var>SOLN_TXT</var>}</code>.
</p>
<div>
<div class="graphie" data-update="number-line">
style({ stroke: BLUE, fill: BLUE, strokeWidth: 3.5, arrows: "-&gt;" });
line([0, 0], [SOLUTION, 0]);
graph.movablePoint.visibleShape.toFront();
label([TENTHS / 10, -0.53], SOLN_TXT, "center", { color: PINK });
graph.movablePoint.moveTo(SOLUTION, 0);
</div>
<p>The highlighted number shows where <code>\pink{<var>SOLN_TXT</var>}</code> is on the number line.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.