3 randFromArray([3, 4, 6, 8]) randRangeUnique(1, DENOMINATOR, NUM_ITEMS) NUMERATORS.slice().sort() NUMS_SORTED.join(",") $.map(NUMS_SORTED, function(el) { return "\\dfrac{" + el + "}{" + DENOMINATOR + "}"; }).join(",") createSorter() [["blue", BLUE], ["green", GREEN], ["purple", PURPLE]]

Order the following fractions from least to greatest:

- N `\dfrac{N}{DENOMINATOR}`

SORTER.init("sortable")

Drag the fractions left and right so they are in order from least to greatest
SORTER.getContent()
if (SORTER.hasAttempted) { return guess.join(",") === SORTED_LIST; } else { return ""; }
SORTER.setContent(guess);

Each fraction has a denominator of `DENOMINATOR`. We can show this by dividing a whole into `DENOMINATOR` equal-sized pieces of `\dfrac{1}{DENOMINATOR}`.

init({ range: [[-2, 1], [-1,1]], scale: [50,50] }); piechart([0, DENOMINATOR], [GREEN, "#bbb"], 1);
The numerator tells us how many of the `DENOMINATOR` pieces are shaded.

init({ range: [[-2, 1], [-1,1]], scale: [50,50] }); piechart([numer, DENOMINATOR - numer], [COLORS[i][1], "#bbb"], 1); label([-2,0], "\\" + COLORS[i][0] + "{\\dfrac{" + numer + "}{" + DENOMINATOR + "}}=", "right")

So we just order the numerators.

The fractions from least to greatest are:

`ANSWER`.

randFromArray([3, 4, 6, 8]) randRange(1, DENOMINATOR) randRangeExclude(1, DENOMINATOR, [NUMERATOR_1]) NUMERATOR_1 < NUMERATOR_2 ? "<" : ">"

Compare.

`\dfrac{NUMERATOR_1}{DENOMINATOR}` ____ `\dfrac{NUMERATOR_2}{DENOMINATOR}`

`SOLUTION`

- `<`
- `>`
- `=`

Both fractions have a denominator of `DENOMINATOR`. We can show this by dividing a whole into `DENOMINATOR` equal-sized pieces of `\dfrac{1}{DENOMINATOR}`.

init({ range: [[-2, 1], [-1, 1]], scale: [50, 50] }); piechart([0, DENOMINATOR], [GREEN, "#bbb"], 1);

The numerator tells us how many of the `DENOMINATOR` pieces are shaded.

init({ range: [[0, 8], [-1, 1]], scale: [50, 50] }); piechart([NUMERATOR_1, DENOMINATOR-NUMERATOR_1], [GREEN, "#bbb"], 1, false, 2); piechart([NUMERATOR_2, DENOMINATOR-NUMERATOR_2], [PURPLE, "#bbb"], 1, false, 7); label([0, 0], "\\green{\\dfrac{" + NUMERATOR_1 + "}{" + DENOMINATOR + "}}=", "right") label([5, 0], "\\purple{\\dfrac{" + NUMERATOR_2 + "}{" + DENOMINATOR + "}}=", "right")

So, we just need to compare the numerators.

`\green{\dfrac{NUMERATOR_1}{DENOMINATOR}} SOLUTION \purple{\dfrac{NUMERATOR_2}{DENOMINATOR}}`

randFromArray([2, 3, 4, 6, 8]) randRange(1, 10) randRangeExclude(1, 10, [NUMERATOR_1]) ceil(max(NUMERATOR_1, NUMERATOR_2) / DENOMINATOR) randFromArray(["A", "B"])

Which number line correctly shows `\dfrac{NUMERATOR_1}{DENOMINATOR}` and `\dfrac{NUMERATOR_2}{DENOMINATOR}`?

init({ range: [[-0.15, 1.1], [0, 7]], scale: [400, 25] }); var tick = 0.25; var labels = [ 0, "\\dfrac{" + NUMERATOR_1 + "}{" + DENOMINATOR + "}", "\\dfrac{" + NUMERATOR_2 + "}{" + DENOMINATOR + "}" ]; var drawNumberLine = function(y, name, numbers) { // Seems this only adds an arrow to one end line([-0.05, y], [1.05, y], { arrows: "<->" }); line([1.05, y], [-0.05, y], { arrows: "<->" }); label([-0.1, y], name); for (var i = 0; i < numbers.length; i++) { var x = numbers[i] / DENOMINATOR / MAX_NUM; line([x, y - tick], [x, y + tick]); label([x, y - 0.2], labels[i], "below"); } }; if (SOLUTION === "A") { drawNumberLine(6, "A", [0, NUMERATOR_1, NUMERATOR_2]); drawNumberLine(2, "B", [0, NUMERATOR_2, NUMERATOR_1]); } else { drawNumberLine(6, "A", [0, NUMERATOR_2, NUMERATOR_1]); drawNumberLine(2, "B", [0, NUMERATOR_1, NUMERATOR_2]); }
Number line `SOLUTION`

- Number line `A`
- Number line `B`

We can draw a number line showing each whole divided into `DENOMINATOR` equal lengths of `\dfrac{1}{DENOMINATOR}`.

init({ range: [[-0.1, 1.1], [-1, 1]], scale: [400, 25] }); var y = -0.5; line([-0.05, y], [1.05, y], { arrows: "<->" }); line([1.05, y], [-0.05, y], { arrows: "<->" }); var tick = 0.25; for (var i = 0; i <= MAX_NUM * DENOMINATOR; i++) { var x = i / DENOMINATOR / MAX_NUM; if (i % DENOMINATOR === 0) { label([x, y], roundTo(1, i / DENOMINATOR), "above"); line([x, y - tick], [x, y + tick], { strokeWidth: 3 }); } else { line([x, y - tick], [x, y + tick], { strokeWidth: 2 }); } }

We move `\dfrac{1}{DENOMINATOR}` on the number line `\blue{NUMERATOR_1}` time to reach `\blue{\dfrac{NUMERATOR_1}{DENOMINATOR}}`.

We move `\dfrac{1}{DENOMINATOR}` on the number line `\blue{NUMERATOR_1}` times to reach `\blue{\dfrac{NUMERATOR_1}{DENOMINATOR}}`.

var yScale = 1 / 10; // Scaling so the arcs have reasonable proportions init({ range: [[-0.1, 1.1], [-2/8, 1.5 * yScale]], scale: [400, 25 / yScale] }); var y = 0; line([-0.05, y], [1.05, y], { arrows: "<->" }); line([1.05, y], [-0.05, y], { arrows: "<->" }); var tick = 0.25 * yScale; for (var i = 0; i <= MAX_NUM * DENOMINATOR; i++) { var x = i / DENOMINATOR / MAX_NUM; if (i % DENOMINATOR === 0) { label([x, y], roundTo(1, i / DENOMINATOR), "above"); line([x, y - tick], [x, y + tick], { strokeWidth: 3 }); } else { line([x, y - tick], [x, y + tick], { strokeWidth: 2 }); } } var r = 1 / DENOMINATOR / MAX_NUM / 2; for (var i = 0; i < NUMERATOR_1; i++) { var x = (i + 0.5) * r * 2; if (i < NUMERATOR_1 - 1) { arc([x, y], r, 180, 0, { stroke: BLUE }); } else { curvyArrow([x, y], r, "bottom", true, { stroke: BLUE }); } } // Fraction var x = NUMERATOR_1 / DENOMINATOR / MAX_NUM; label([x, y - 0.2 * yScale], "\\blue{\\dfrac{" + NUMERATOR_1 + "}{" + DENOMINATOR + "}}", "below");

We move `\dfrac{1}{DENOMINATOR}` on the number line `\pink{NUMERATOR_2}` time to reach `\pink{\dfrac{NUMERATOR_2}{DENOMINATOR}}`.

We move `\dfrac{1}{DENOMINATOR}` on the number line `\pink{NUMERATOR_2}` times to reach `\pink{\dfrac{NUMERATOR_2}{DENOMINATOR}}`.

var yScale = 1 / 10; // Scaling so the arcs have reasonable proportions init({ range: [[-0.1, 1.1], [-2/8, 1.5 * yScale]], scale: [400, 25 / yScale] }); var y = 0; line([-0.05, y], [1.05, y], { arrows: "<->" }); line([1.05, y], [-0.05, y], { arrows: "<->" }); var tick = 0.25 * yScale; for (var i = 0; i <= MAX_NUM * DENOMINATOR; i++) { var x = i / DENOMINATOR / MAX_NUM; if (i % DENOMINATOR === 0) { label([x, y], roundTo(1, i / DENOMINATOR), "above"); line([x, y - tick], [x, y + tick], { strokeWidth: 3 }); } else { line([x, y - tick], [x, y + tick], { strokeWidth: 2 }); } } var r = 1 / DENOMINATOR / MAX_NUM / 2; for (var i = 0; i < NUMERATOR_2; i++) { var x = (i + 0.5) * r * 2; if (i < NUMERATOR_2 - 1) { arc([x, y], r, 180, 0, { stroke: PINK }); } else { curvyArrow([x, y], r, "bottom", true, { stroke: PINK }); } } // Fraction var x = NUMERATOR_1 / DENOMINATOR / MAX_NUM; label([x, y - 0.2 * yScale], "\\blue{\\dfrac{" + NUMERATOR_1 + "}{" + DENOMINATOR + "}}", "below"); var x = NUMERATOR_2 / DENOMINATOR / MAX_NUM; label([x, y - 0.2 * yScale], "\\pink{\\dfrac{" + NUMERATOR_2 + "}{" + DENOMINATOR + "}}", "below");

Number line `SOLUTION` is correct.