Move the \orange{\text{ORANGE_DOT}} to
\orange{fraction(NUMERATOR, DENOMINATOR)} on the number line.
init({
range: [[LOWER_BOUND - 0.2 * UPPER_BOUND, UPPER_BOUND * 1.2], [-1.5, 0.5]],
scale: [360 / UPPER_BOUND, 40]
});
// Draw Number Line
style({arrows: ">"});
line([LOWER_BOUND, 0], [UPPER_BOUND + 0.1 * UPPER_BOUND, 0]);
style({arrows: "<"});
line([UPPER_BOUND, 0], [LOWER_BOUND - 0.1 * UPPER_BOUND, 0]);
style({arrows: ""});
// Draw Number Line Tick marks
for ( var x = LOWER_BOUND; x <= UPPER_BOUND; x += 1 / DENOMINATOR ) {
line( [ x, -0.2 ], [ x, 0.2 ] );
}
// Integer tick marks
style({ stroke: BLUE, strokeWidth: 3.5 });
for (var i = 0; i <= UPPER_BOUND; i++) {
line([i, -0.2], [i, 0.2]);
if (i === NUMERATOR / DENOMINATOR) {
graph.tempLabel = label([i, -0.53 ], i, "center", { color: BLUE });
} else {
label([i, -0.53 ], i, "center", { color: BLUE });
}
}
addMouseLayer();
graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: 0.25 / DENOMINATOR });
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( SOLUTION - guess ) < 0.001;
graph.movablePoint.setCoord( [ guess, 0 ] );
Above we've drawn the number line from 0 to UPPER_BOUND, divided into equal pieces.
Between 0 and 1, the number line is divided into DENOMINATOR equal pieces,
so each piece represents fraction(1, DENOMINATOR).
style({ stroke: BLUE, fill: BLUE, strokeWidth: 3.5, arrows: "->" });
line( [ 0, 0 ], [ SOLUTION, 0 ] );
graph.movablePoint.visibleShape.toFront();
So we just move the orange dot \blue{NUMERATOR} tick mark to get to
fraction(NUMERATOR, DENOMINATOR).
We move the orange dot \blue{NUMERATOR} tick marks because fraction(NUMERATOR, DENOMINATOR)
is the same as NUMERATOR copies of fraction(1, DENOMINATOR).
label( [ SOLUTION, -0.83 ], fraction(NUMERATOR, DENOMINATOR), "center", { color: ORANGE });
if (graph.tempLabel) {
graph.tempLabel.remove();
}
graph.movablePoint.moveTo( SOLUTION, 0 );
The orange number shows where \orange{fraction(NUMERATOR, DENOMINATOR)} is on the number line.