0 1 5 randRange(2, 6) randRange(1, DENOMINATOR-1) LOWER_BOUND * DENOMINATOR UPPER_BOUND * DENOMINATOR NUMERATOR

Move the \color{orange}{\text{orange dot}} to \color{orange}{fraction(NUMERATOR, DENOMINATOR)} on the number line.

init({ range: [ [LOWER_SCALED - 1, UPPER_SCALED + 1], [-1, 1] ], scale: [80, 40] }); style({arrows: ">"}); line( [ LOWER_SCALED, 0 ], [ UPPER_SCALED + 0.25, 0 ] ); style({arrows: ""}); for ( var x = LOWER_SCALED; x <= UPPER_SCALED; x++ ) { line( [ x, -0.2 ], [ x, 0.2 ] ); } style({ stroke: BLUE, strokeWidth: 3.5 }); line( [ LOWER_SCALED, -0.2], [LOWER_SCALED, 0.2]); label( [ LOWER_SCALED, -0.53 ], LOWER_BOUND, "center", { color: BLUE }); line( [ UPPER_SCALED, -0.2], [UPPER_SCALED, 0.2]); label( [ UPPER_SCALED, -0.53 ], UPPER_BOUND, "center", { color: BLUE }); addMouseLayer(); this.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: 0.25 }); movablePoint.onMove = function( x, y ) { if (x < LOWER_SCALED || UPPER_SCALED < x) { return false; // don't allow the point to move past the bounds } jQuery("#solutionarea input").val( x ); };
Move the orange dot to select your answer.

Above we've drawn the number line from 0 to 1, divided into equal pieces.

The number line is divided into DENOMINATOR equal pieces, so each piece represents fraction(1, DENOMINATOR).

style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "->" }); line( [ 0, 0 ], [ NUMERATOR, 0 ] ); movablePoint.visibleShape.toFront();

The orange dot should be shifted NUMERATOR segmentplural(NUMERATOR) over, as fraction(NUMERATOR, DENOMINATOR) = NUMERATOR*fraction(1, DENOMINATOR)

label( [ NUMERATOR, -0.83 ], fraction(NUMERATOR, DENOMINATOR), "center", { color: "#FFA500" }); movablePoint.moveTo( NUMERATOR, 0 );

The orange number shows where \color{orange}{fraction(NUMERATOR, DENOMINATOR)} is on the number line.