Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
124 lines (113 sloc) 5.68 KB
<!DOCTYPE html>
<html data-require="math graphie word-problems interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number line 2</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="LOWER_BOUND">-5</var>
<var id="UPPER_BOUND">-1 * LOWER_BOUND</var>
<var id="NUMBER">randRangeNonZero( LOWER_BOUND, UPPER_BOUND )</var>
</div>
<div class="problems">
<div id="where-is-point">
<div class="question">
<p>Drag the orange dot to <strong><var>NUMBER</var></strong>. The distance between tick marks is 1.</p>
<div class="graphie" id="number-line">
init({
range: [ [LOWER_BOUND - 1, UPPER_BOUND + 1], [-1, 1] ]
});
line( [ LOWER_BOUND, 0 ], [ UPPER_BOUND, 0 ] );
for ( var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x++ ) {
line( [ x, -0.2 ], [ x, 0.2 ] );
}
style({ stroke: "#6495ED", strokeWidth: 3.5 });
line( [ 0, -0.2], [0, 0.2]);
label( [ 0, -0.53 ], "0", "center", { color: "#6495ED" });
addMouseLayer();
graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: 0.25 });
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"> Move the orange dot to select your answer. </span>
<div class="guess"> graph.movablePoint.coord[0] </div>
<div class="validator-function">
if ( guess === 0 ) {
return "";
}
return abs( NUMBER - guess ) &lt; 0.001;
</div>
<div class="show-guess">
graph.movablePoint.setCoord( [ guess, 0 ] );
</div>
</div>
<div class="hints">
<p>We know where 0 is on the number line because it is labeled.</p>
<p>Numbers to the left are smaller, and numbers to the right are bigger.</p>
<p>Numbers smaller than 0 are negative, and numbers bigger than 0 are positive.</p>
<div>
<div class="graphie" data-update="number-line">
style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "-&gt;" });
line( [ 0, 0 ], [ NUMBER, 0 ] );
graph.movablePoint.visibleShape.toFront();
</div>
<p>The orange dot should be <var>plural( abs( NUMBER ), "position")</var> to the <span data-if="NUMBER &lt; 0">left</span><span data-else>right</span> of 0.</p>
</div>
<div>
<div class="graphie" data-update="number-line">
label( [ NUMBER, -0.53 ], NUMBER, "center", { color: "#FFA500" });
graph.movablePoint.moveTo( NUMBER, 0 );
</div>
<p>The orange number shows where <var>NUMBER</var> is on the number line.</p>
</div>
</div>
</div>
<div id="what-is-point">
<div class="question">
<p>What number does the orange dot represent? The distance between tick marks is 1.</p>
<div class="graphie" id="number-line-2">
init({
range: [ [LOWER_BOUND - 1, UPPER_BOUND + 1], [-1, 1] ]
});
line( [ LOWER_BOUND, 0 ], [ UPPER_BOUND, 0 ] );
for ( var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x++ ) {
line( [ x, -0.2 ], [ x, 0.2 ] );
}
style({ stroke: "#6495ED", strokeWidth: 3.5 });
line( [ 0, -0.2], [0, 0.2]);
label( [ 0, -0.53 ], "0", "center", { color: "#6495ED" });
style({ stroke: "#FFA500", fill: "#FFA500" });
graph.orangeDot = circle( [ NUMBER, 0 ], 0.10 );
</div>
</div>
<div class="solution" data-forms="integer"><var>NUMBER</var></div>
<div class="hints">
<p>We know where 0 is on the number line because it is labeled.</p>
<p>Numbers to the left are smaller, and numbers to the right are bigger.</p>
<p>Numbers smaller than 0 are negative, and numbers bigger than 0 are positive.</p>
<div>
<div class="graphie" data-update="number-line-2">
style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "->" });
line( [ 0, 0 ], [ NUMBER, 0 ] );
graph.orangeDot.toFront();
</div>
<p>The orange dot is <var>plural( abs( NUMBER ), "position")</var> to the <span data-if="NUMBER < 0">left</span><span data-else>right</span> of 0.</p>
</div>
<div>
<div class="graphie" data-update="number-line-2">
label( [ NUMBER, -0.53 ], NUMBER, "center", { color: "#FFA500" });
</div>
<p>The orange dot represents the number <var>NUMBER</var>.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Something went wrong with that request. Please try again.