4 randRange(-20, 20 - GAP) LOWER_BOUND + GAP (LOWER_BOUND + UPPER_BOUND) / 2
roundTo(1, MID_POINT + randRangeNonZero(GAP * -5 + 1, GAP * 5 - 1) / 10) roundTo(1, SOLUTION % 1)
parseInt((SOLUTION).toString(), 10)

Move the orange dot to SOLUTION on the number line.

init({ range: [[LOWER_BOUND - GAP / 12, UPPER_BOUND + GAP / 12], [-1, 1]], scale: [460 / (GAP * 1.1), 40] }); style({arrows: ">"}); line([MID_POINT, 0], [UPPER_BOUND + GAP / 16, 0]); style({arrows: "->"}); line([MID_POINT, 0], [LOWER_BOUND - GAP / 16, 0]); style({arrows: ""}); for (var x = LOWER_BOUND; x <= UPPER_BOUND; x += 0.5) { if (x % 1 === 0) { line([x, -0.2], [x, 0.2]); label([x, -0.53], x, "center", { color: BLUE }); } else { line([x, -0.1], [x, 0.1]); } } addMouseLayer(); graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: 0.1, coord: [MID_POINT, 0] }); graph.movablePoint.onMove = function(x, y) { return [min(max(LOWER_BOUND, x), UPPER_BOUND), y]; };
graph.movablePoint.coord[0]
if ( guess === MID_POINT ) { return ""; } return abs( SOLUTION - guess ) < 0.001;
graph.movablePoint.setCoord( [ guess, 0 ] );

Separate the decimal from the whole number:

SOLUTION = \purple{SOLUTION_WHOLE} + \purple{SOLUTION_DECIMAL}

Because SOLUTION is positive the orange dot will be to the right of \purple{SOLUTION_WHOLE}.

Because SOLUTION is negative the orange dot will be to the left of \purple{SOLUTION_WHOLE}.

Therefore, we know SOLUTION lies between \green{SOLUTION_WHOLE} and \green{SOLUTION_WHOLE + (SOLUTION > 0 ? 1 : -1)} on the number line.

var x = SOLUTION > 0 ? SOLUTION_WHOLE : SOLUTION_WHOLE - 1; rect(x, -0.3, 1, 0.6, {fill: GREEN, fillOpacity: 0.5, stroke: "none"});
graph.movablePoint.visibleShape.toFront();

The orange dot should be shifted abs(SOLUTION_DECIMAL) to the right of SOLUTION_WHOLE.

The orange dot should be shifted abs(SOLUTION_DECIMAL) to the left of SOLUTION_WHOLE.

label([SOLUTION, 0.53], SOLUTION, "center", { color: PINK }); graph.movablePoint.moveTo(SOLUTION, 0);

The highlighted number shows where \pink{SOLUTION} is on the number line.

Move the orange dot to SOLUTION on the number line.

init({ range: [[-5, 5], [LOWER_BOUND - GAP / 12, UPPER_BOUND + GAP / 12]], scale: [40, 460 / (GAP * 1.1)] }); style({arrows: ">"}); line([0, MID_POINT], [0, UPPER_BOUND + GAP / 16]); style({arrows: "->"}); line([0, MID_POINT], [0, LOWER_BOUND - GAP / 16]); style({arrows: ""}); for (var y = LOWER_BOUND; y <= UPPER_BOUND; y += 0.5) { if (y % 1 === 0) { line([-0.2, y], [0.2, y]); label([-0.2, y], y, "left", { color: BLUE }); } else { line([-0.1, y], [0.1, y]); } } addMouseLayer(); graph.movablePoint = addMovablePoint({ constraints: { constrainX: true }, snapY: 0.1, coord: [0, MID_POINT] }); graph.movablePoint.onMove = function(x, y) { return [x, min(max(LOWER_BOUND, y), UPPER_BOUND)]; };
graph.movablePoint.coord[1]
if ( guess === MID_POINT ) { return ""; } return abs( SOLUTION - guess ) < 0.001;
graph.movablePoint.setCoord( [ 0, guess ] );

Separate the decimal from the whole number:

SOLUTION = \purple{SOLUTION_WHOLE} + \purple{SOLUTION_DECIMAL}

Because SOLUTION is positive the orange dot will be above \purple{SOLUTION_WHOLE}.

Because SOLUTION is negative the orange dot will be below \purple{SOLUTION_WHOLE}.

Therefore, we know SOLUTION lies between \green{SOLUTION_WHOLE} and \green{SOLUTION_WHOLE + (SOLUTION > 0 ? 1 : -1)} on the number line.

var y = SOLUTION > 0 ? SOLUTION_WHOLE : SOLUTION_WHOLE - 1; rect(-0.3, y, 0.6, 1, {fill: GREEN, fillOpacity: 0.5, stroke: "none"});
graph.movablePoint.visibleShape.toFront();

The orange dot should be shifted abs(SOLUTION_DECIMAL) above SOLUTION_WHOLE.

The orange dot should be shifted abs(SOLUTION_DECIMAL) below SOLUTION_WHOLE.

label([0.2, SOLUTION], SOLUTION, "right", { color: PINK }); graph.movablePoint.moveTo(0, SOLUTION);

The highlighted number shows where \pink{SOLUTION} is on the number line.

2 randRange(-10, 10 - GAP) LOWER_BOUND + GAP (LOWER_BOUND + UPPER_BOUND) / 2
roundTo(2, MID_POINT + randRangeNonZero(GAP * -5 + 1, GAP * 5 - 1) / 20) roundTo(2, SOLUTION % 1)
parseInt((SOLUTION).toString(), 10)

Move the orange dot to SOLUTION on the number line.

init({ range: [[LOWER_BOUND - GAP / 12, UPPER_BOUND + GAP / 12], [-1, 1]], scale: [460 / (GAP * 1.1), 40] }); style({arrows: ">"}); line([MID_POINT, 0], [UPPER_BOUND + GAP / 16, 0]); style({arrows: "->"}); line([MID_POINT, 0], [LOWER_BOUND - GAP / 16, 0]); style({arrows: ""}); for (var x = LOWER_BOUND; x <= UPPER_BOUND + 0.001; x += 0.1) { if (round(x * 10) % 5 === 0) { line([x, -0.2], [x, 0.2]); label([x, -0.53], roundTo(2, x), "center", { color: BLUE }); } else { line([x, -0.1], [x, 0.1]); } } addMouseLayer(); graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: 0.05, coord: [MID_POINT, 0] }); graph.movablePoint.onMove = function(x, y) { return [min(max(LOWER_BOUND, x), UPPER_BOUND), y]; };
2 randRange(-10, 10 - GAP) LOWER_BOUND + GAP (LOWER_BOUND + UPPER_BOUND) / 2
roundTo(2, MID_POINT + randRangeNonZero(GAP * -5 + 1, GAP * 5 - 1) / 20) roundTo(2, SOLUTION % 1)
parseInt((SOLUTION).toString(), 10)

Move the orange dot to SOLUTION on the number line.

init({ range: [[-5, 5], [LOWER_BOUND - GAP / 12, UPPER_BOUND + GAP / 12]], scale: [40, 460 / (GAP * 1.1)] }); style({arrows: ">"}); line([0, MID_POINT], [0, UPPER_BOUND + GAP / 16]); style({arrows: "->"}); line([0, MID_POINT], [0, LOWER_BOUND - GAP / 16]); style({arrows: ""}); for (var y = LOWER_BOUND; y <= UPPER_BOUND + 0.001; y += 0.1) { if (round(y * 10) % 5 === 0) { line([-0.2, y], [0.2, y]); label([-0.2, y], roundTo(1, y), "left", { color: BLUE }); } else { line([-0.1, y], [0.1, y]); } } addMouseLayer(); graph.movablePoint = addMovablePoint({ constraints: { constrainX: true }, snapY: 0.05, coord: [0, MID_POINT] }); graph.movablePoint.onMove = function(x, y) { return [x, min(max(LOWER_BOUND, y), UPPER_BOUND)]; };