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

124 lines (113 sloc) 5.816 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>
Jump to Line
Something went wrong with that request. Please try again.