Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…
Cannot retrieve contributors at this time
82 lines (77 sloc) 3.45 KB
<!DOCTYPE html>
<html data-require="math graphie word-problems interactive">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number line</title>
<script src="../khan-exercise.js"></script>
<div class="exercise">
<div class="vars">
<var id="LOWER_BOUND">0</var>
<var id="UPPER_BOUND">10</var>
<var id="NUMBER">randRangeNonZero( LOWER_BOUND, UPPER_BOUND )</var>
<div class="problems">
<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">
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" });
graph.movablePoint = addMovablePoint({ constraints: { constrainY: true } });
graph.movablePoint.onMove = function( x, y ) {
var newx = round(x);
if (abs(newx - x) &lt; 0.25) {
x = newx;
return [min(max(LOWER_BOUND, x), UPPER_BOUND), y];
<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 class="show-guess">
graph.movablePoint.setCoord([guess, 0]);
<div class="hints">
<p>We know where 0 is on the number line because it is labeled.</p>
<p>As you move to the right, the numbers get bigger.</p>
<div class="graphie" data-update="number-line">
style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "-&gt;" });
line([0, 0], [NUMBER, 0]);
<p>The orange dot should be <var>plural(abs(NUMBER), "tick mark")</var> to the <span data-if="NUMBER &lt; 0">left</span><span data-else>right</span> of 0.</p>
<div class="graphie" data-update="number-line">
label([NUMBER, -0.53], NUMBER, "center", {color: "#FFA500"});
graph.movablePoint.moveTo(NUMBER, 0);
<p>The orange number shows where <var>NUMBER</var> is on the number line.</p>
Jump to Line
Something went wrong with that request. Please try again.