randRange(1, 4) -5 * SCALE -1 * LOWER_BOUND randRangeExclude(-5, 5, [-1, 0, 1]) * SCALE LOWER_BOUND - SCALE * 0.6 UPPER_BOUND + SCALE * 0.6 $._("orange dot")

Move the \orange{\text{ORANGE_DOT}} to \orange{NUMBER} on the number line.

init({ range: [[LOWER_BOUND - SCALE * 0.75, UPPER_BOUND + SCALE * 0.75], [-1, 1]], scale: [40 / SCALE, 40] }); line([START + 1, 0], [STOP, 0], { arrows: "->" }); line([STOP - 1, 0], [START, 0], { arrows: "->" }); for (var x = LOWER_BOUND; x <= UPPER_BOUND; x += SCALE) { line([x, -0.2], [x, 0.2]); } style({ stroke: BLUE, strokeWidth: 3.5 }); line([0, -0.2], [0, 0.2]); label([0, -0.53], "0", "center"); label([-SCALE, -0.53], "\\llap{-}" + SCALE, "center"); label([SCALE, -0.53], SCALE, "center"); addMouseLayer(); var snap = SCALE / 4; if (SCALE === 3) { snap = SCALE / 3; } graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: snap }); graph.movablePoint.onMove = function(x, y) { return [min(max(LOWER_BOUND, x), UPPER_BOUND), y]; };
graph.movablePoint.coord[0]
if ( guess === 0 ) { return ""; } return abs( NUMBER - guess ) < 0.001;
graph.movablePoint.setCoord([guess, 0]);

We know where 0 is on the number line because it is labeled.

We know each tick mark represents SCALE because -SCALE and SCALE are labeled.

Because NUMBER is negative, it will be to the left of 0.

Because NUMBER is positive, it will be to the right of 0.

style({ stroke: BLUE, fill: BLUE, strokeWidth: 3.5, arrows: "->" }); line( [ 0, 0 ], [ NUMBER, 0 ] ); graph.movablePoint.visibleShape.toFront();

Each tick mark represents SCALE, so NUMBER will be abs(round(NUMBER / SCALE)) tick marks to the left of 0.

Each tick mark represents SCALE, so NUMBER will be abs(round(NUMBER / SCALE)) tick marks to the right of 0.

label([NUMBER, -0.53], NUMBER, "center", { color: ORANGE }); graph.movablePoint.moveTo(NUMBER, 0);

The orange number shows where NUMBER is on the number line.

Move the \color{orange}{\text{ORANGE_DOT}} to \color{orange}{NUMBER} on the number line.

init({ range: [[-5, 5], [LOWER_BOUND - SCALE * 0.75, UPPER_BOUND + SCALE * 0.75]], scale: [32, 32 / SCALE] }); line([0, START + 1], [0, STOP], { arrows: "->" }); line([0, STOP - 1], [0, START], { arrows: "->" }); for (var y = LOWER_BOUND; y <= UPPER_BOUND; y += SCALE) { line([-0.2, y], [0.2, y]); } style({ stroke: BLUE, strokeWidth: 3.5 }); line([-0.2, 0], [0.2, 0]); label([-0.2, 0], "0", "left"); label([-0.2, -SCALE], "\\llap{-}" + SCALE, "left"); label([-0.2, SCALE], SCALE, "left"); addMouseLayer(); var snap = SCALE / 4; if (SCALE === 3) { snap = SCALE / 3; } graph.movablePoint = addMovablePoint({ constraints: { constrainX: true }, snapY: snap }); graph.movablePoint.onMove = function(x, y) { return [x, min(max(LOWER_BOUND, y), UPPER_BOUND)]; };
graph.movablePoint.coord[1]
if (guess === 0) { return ""; } return abs(NUMBER - guess) < 0.001;
graph.movablePoint.setCoord([0, guess]);

We know where 0 is on the number line because it is labeled.

We know each tick mark represents SCALE because -SCALE and SCALE are labeled.

Because NUMBER is negative, it will be below 0.

Because NUMBER is positive, it will be above 0.

style({ stroke: BLUE, fill: BLUE, strokeWidth: 3.5, arrows: "->" }); line([0, 0], [0, NUMBER] ); graph.movablePoint.visibleShape.toFront();

Each tick mark represents SCALE, so NUMBER will be abs(round(NUMBER / SCALE)) tick marks below 0.

Each tick mark represents SCALE, so NUMBER will be abs(round(NUMBER / SCALE)) tick marks above 0.

label([-0.2, NUMBER], NUMBER, "left", { color: ORANGE }); graph.movablePoint.moveTo(0, NUMBER);

The orange number shows where NUMBER is on the number line.

Where is the blue dot on the number line?

init({ range: [[LOWER_BOUND - SCALE * 0.75, UPPER_BOUND + SCALE * 0.75], [-1, 1]], scale: [40 / SCALE, 40] }); line([START + 1, 0], [STOP, 0], { arrows: "->" }); line([STOP - 1, 0], [START, 0], { arrows: "->" }); for (var x = LOWER_BOUND; x <= UPPER_BOUND; x += SCALE) { line([x, -0.2], [x, 0.2]); } style({ strokeWidth: 3.5 }); line([0, -0.2], [0, 0.2]); label([0, -0.53], "0", "center"); label([-SCALE, -0.53], "\\llap{-}" + SCALE, "center"); label([SCALE, -0.53], SCALE, "center"); style({ stroke: BLUE, fill: BLUE }); graph.blueDot = ellipse([NUMBER, 0], [SCALE * 0.1, 0.1]); graph.questionLabel = label([NUMBER, -0.53], "{?}", "center", { color: BLUE });
NUMBER

We know where 0 is on the number line because it is labeled.

We know each tick mark represents SCALE because -SCALE and SCALE are labeled.

Because the blue dot is to the left of 0, the number will be negative.

Because the blue dot is to the right of 0, the number will be positive.

for (var x = SCALE * 2; x <= UPPER_BOUND; x += SCALE) { label([x, -0.53], x, "center"); label([-x, -0.53], "\\llap{-}" + x, "center"); } graph.questionLabel.remove(); label([NUMBER, -0.53], ("" + NUMBER).replace(/-/, "\\llap{-}"), "center", { color: BLUE });

The blue dot represents the number NUMBER.

Where is the blue dot on the number line?

init({ range: [[-5, 5], [LOWER_BOUND - SCALE * 0.75, UPPER_BOUND + SCALE * 0.75]], scale: [32, 32 / SCALE] }); line([0, START + 1], [0, STOP], { arrows: "->" }); line([0, STOP - 1], [0, START], { arrows: "->" }); for (var y = LOWER_BOUND; y <= UPPER_BOUND; y += SCALE) { line([-0.2, y], [0.2, y]); } style({ strokeWidth: 3.5 }); line([-0.2, 0], [0.2, 0]); label([-0.2, 0], "0", "left"); label([-0.2, -SCALE], "\\llap{-}" + SCALE, "left"); label([-0.2, SCALE], SCALE, "left"); style({ stroke: BLUE, fill: BLUE }); graph.blueDot = ellipse([0, NUMBER], [0.1, 0.1 * SCALE]); graph.questionLabel = label([-0.2, NUMBER], "{?}", "left", { color: BLUE });;
NUMBER

We know where 0 is on the number line because it is labeled.

We know each tick mark represents SCALE because -SCALE and SCALE are labeled.

Because the blue dot is below 0, the number will be negative.

Because the blue dot is above 0, the number will be positive.

for (var x = SCALE * 2; x <= UPPER_BOUND; x += SCALE) { label([-0.2 ,x], x, "left"); label([-0.2, -x], "\\llap{-}" + x, "left"); } graph.questionLabel.remove(); label([-0.2, NUMBER], ("" + NUMBER).replace(/-/, "\\llap{-}"), "left", { color: BLUE });

The blue dot represents the number NUMBER.