randFromArray(metricUnits) "\\text{ " + UNIT_SMALL + "}"
[randRange(2, 5), randRange(2, 5), randRange(2, 5)] [randRange(1, 6), randRange(1, 6), randRange(1, 6)] DENOMINATORS[0] * DENOMINATORS[1] * DENOMINATORS[2] NUMERATORS[0] * NUMERATORS[1] * NUMERATORS[2] _.map(NUMERATORS, function(n, i) {return n / DENOMINATORS[i]; }) _.map(NUMERATORS, function(n, i) {return fractionReduce(n, DENOMINATORS[i]); }) getGCD(NUMERATORS[0], DENOMINATORS[0]) * getGCD(NUMERATORS[1], DENOMINATORS[1]) * getGCD(NUMERATORS[2], DENOMINATORS[2]) max(max(LENGTH, WIDTH), HEIGHT) LENGTH / MAX WIDTH / MAX HEIGHT / MAX "#D7ED3A" "#38C77F" "#78D0EF" "#F0B63A" HEIGHT * 2 [ [LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX], [LENGTH/MAX, WIDTH/MAX, -HEIGHT/MAX], [LENGTH/MAX, -WIDTH/MAX, -HEIGHT/MAX], [LENGTH/MAX, -WIDTH/MAX, HEIGHT/MAX], [-LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX], [-LENGTH/MAX, WIDTH/MAX, -HEIGHT/MAX], [-LENGTH/MAX, -WIDTH/MAX, -HEIGHT/MAX], [-LENGTH/MAX, -WIDTH/MAX, HEIGHT/MAX] ] 4.0 [ { verts: [3, 2, 1, 0], color: COLOR1, labels: [[[XBORD, 0, ZBORD], FRACTIONS[0] + UNIT_TEXT]] }, { verts: [4, 5, 6, 7], color: COLOR1, labels: [[[-XBORD, 0, -ZBORD], FRACTIONS[0] + UNIT_TEXT]] }, { verts: [0, 1, 5, 4], color: COLOR3, labels: [[[-XBORD, YBORD, 0], FRACTIONS[1] + UNIT_TEXT]] }, { verts: [2, 3, 7, 6], color: COLOR3, labels: [[[-XBORD, -YBORD, 0], FRACTIONS[1] + UNIT_TEXT]] }, { verts: [1, 2, 6, 5], color: COLOR2, labels: [[[0, -YBORD, -ZBORD], FRACTIONS[2] + UNIT_TEXT]] }, { verts: [3, 0, 4, 7], color: COLOR2, labels: [[[0, YBORD, ZBORD], FRACTIONS[2] + UNIT_TEXT]] } ] [ { verts: [8,9,10,11], color: "#A9A9A9" }, { verts: [12,13,14,15], color: "#A9A9A9" } ] {} {} $._("volume") $._("base") $._("height")

What is the volume of this box? Drag on the box to rotate it.

init({range: [[-2, 2], [-2, 2]], scale: [100, 100]}); addMouseLayer(); // graphing the initial object graph.obj = make3dObject(VERTICES, { scale: SCALE }); _.each(FACES, function(face) { graph.obj.addFace(face); }); graph.obj.setPos([0, 0, 5]); graph.obj.rotate(1,0 , 0, PI/3); graph.obj.rotate(0, 1, 0, 0); graph.obj.rotate(0, 0, 1, PI/8); graph.obj.doDraw(); GRAPH = graph; var spinner; setTimeout(function() { spinner = setInterval(function() { GRAPH.obj.rotate(0, 0, 1, 0.01); GRAPH.obj.doDraw(); }, 50); }, 300); var mouseTarget = mouselayer.rect(0, 0, 400, 400).attr({ fill: "#000", opacity: 0.0 }); $(mouseTarget[0]).bind("vmousedown", function(event) { event.preventDefault(); GRAPH.lastX = event.pageX; GRAPH.lastY = event.pageY; clearInterval(spinner); $(document).bind("vmousemove vmouseup", function(event) { event.preventDefault(); var dx = (event.pageX - GRAPH.lastX) / 200 * PI; var dy = (event.pageY - GRAPH.lastY) / 200 * PI; GRAPH.lastX = event.pageX; GRAPH.lastY = event.pageY; var xAxis = normalize(GRAPH.obj.perspective[1]); var yAxis = normalize(GRAPH.obj.perspective[0]); GRAPH.obj.rotate(xAxis[0], xAxis[1], xAxis[2], -dx / 2); GRAPH.obj.rotate(yAxis[0], yAxis[1], yAxis[2], -dy / 2); GRAPH.obj.doDraw(); if (event.type === "vmouseup") { $(document).unbind("vmousemove vmouseup"); } }) });

NUMERPRODUCT / DENOMPRODUCT `UNIT_TEXT^3`

The volume of a shape is measured by the number of one UNIT cubes which make up the shape.

The volume of a box equals width `\times` height `\times` length.

Therefore, `\text{VOLUME_TEXT} = FRACTIONS[0] \cdot FRACTIONS[1] \cdot FRACTIONS[2]`

`\qquad = \dfrac{NUMERPRODUCT / GCD}{DENOMPRODUCT / GCD} = fractionReduce(NUMERPRODUCT, DENOMPRODUCT) UNIT_TEXT^3`

[randRange(2, 5), randRange(2, 5), randRange(2, 5)] [randRange(1, 6), randRange(1, 6), randRange(1, 6)] DENOMINATORS[0] * DENOMINATORS[1] * DENOMINATORS[2] NUMERATORS[0] * NUMERATORS[1] * NUMERATORS[2] _.map(NUMERATORS, function(n, i) {return n / DENOMINATORS[i]; }) _.map(NUMERATORS, function(n, i) {return fractionReduce(n, DENOMINATORS[i]); }) getGCD(DENOMINATORS[0] * DENOMINATORS[2], DENOMINATORS[1] * NUMERATORS[0]) fractionReduce(NUMERPRODUCT, DENOMPRODUCT) max(max(LENGTH, WIDTH), HEIGHT) LENGTH/MAX WIDTH/MAX HEIGHT/MAX "#D7ED3A" "#38C77F" "#78D0EF" "#F0B63A" HEIGHT * 2 [ [LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX], [LENGTH/MAX, WIDTH/MAX, -HEIGHT/MAX], [LENGTH/MAX, -WIDTH/MAX, -HEIGHT/MAX], [LENGTH/MAX, -WIDTH/MAX, HEIGHT/MAX], [-LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX], [-LENGTH/MAX, WIDTH/MAX, -HEIGHT/MAX], [-LENGTH/MAX, -WIDTH/MAX, -HEIGHT/MAX], [-LENGTH/MAX, -WIDTH/MAX, HEIGHT/MAX] ] 4.0 [ { verts: [3, 2, 1, 0], color: COLOR1, labels: [[[XBORD, 0, ZBORD], FRACTIONS[0] + UNIT_TEXT]] }, { verts: [4, 5, 6, 7], color: COLOR1, labels: [[[-XBORD, 0, -ZBORD], FRACTIONS[0] + UNIT_TEXT]] }, { verts: [0, 1, 5, 4], color: COLOR3, labels: [[[-XBORD, YBORD, 0], "x" + UNIT_TEXT]] }, { verts: [2, 3, 7, 6], color: COLOR3, labels: [[[-XBORD, -YBORD, 0], "x" + UNIT_TEXT]] }, { verts: [1, 2, 6, 5], color: COLOR2, labels: [[[0, -YBORD, -ZBORD], FRACTIONS[2] + UNIT_TEXT]] }, { verts: [3, 0, 4, 7], color: COLOR2, labels: [[[0, YBORD, ZBORD], FRACTIONS[2] + UNIT_TEXT]] } ] [ {verts: [8,9,10,11], color: "#A9A9A9"}, {verts: [12,13,14,15], color: "#A9A9A9"} ] {} {} $._("base") $._("height")

The volume of this box is `VOL UNIT_TEXT^3`. Find `x`.

init({range: [[-2, 2], [-2, 2]], scale: [100, 100]}); addMouseLayer(); //Adding verticies for the slabs for (var i = 1; i < HEIGHT;i++ ){ VERTICES.push( [LENGTH/MAX,WIDTH/MAX,(-HEIGHT+2*i)/MAX]); VERTICES.push([-LENGTH/MAX,WIDTH/MAX,(-HEIGHT+2*i)/MAX]); VERTICES.push([-LENGTH/MAX,-WIDTH/MAX,(-HEIGHT+2*i)/MAX]); VERTICES.push([LENGTH/MAX,-WIDTH/MAX,(-HEIGHT+2*i)/MAX]); }; //Adding verticies for the cubes in one slab for (var i = 1; i < LENGTH; i++ ){ VERTICES.push( [(-LENGTH+2*i)/MAX,-WIDTH/MAX,(-HEIGHT)/MAX]); }; for (var i = 1; i < LENGTH; i++ ){ VERTICES.push( [(-LENGTH+2*i)/MAX,WIDTH/MAX,(-HEIGHT)/MAX]); }; for (var i = 1; i < WIDTH; i++ ){ VERTICES.push( [(-LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT)/MAX]); }; for (var i = 1; i < WIDTH; i++ ){ VERTICES.push( [(LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT)/MAX]); }; for (var i = 1; i < LENGTH; i++ ){ VERTICES.push( [(-LENGTH+2*i)/MAX,-WIDTH/MAX,(-HEIGHT+2)/MAX]); }; for (var i = 1; i < LENGTH; i++ ){ VERTICES.push( [(-LENGTH+2*i)/MAX,WIDTH/MAX,(-HEIGHT+2)/MAX]); }; for (var i = 1; i < WIDTH; i++ ){ VERTICES.push( [(-LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT+2)/MAX]); }; for (var i = 1; i < WIDTH; i++ ){ VERTICES.push( [(LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT+2)/MAX]); }; // graphing the initial object graph.obj = make3dObject(VERTICES, { scale: SCALE }); _.each(FACES, function(face) { graph.obj.addFace(face); }); graph.obj.setPos([0, 0, 5]); graph.obj.rotate(1,0 , 0, PI/3); graph.obj.rotate(0, 1, 0, 0); graph.obj.rotate(0, 0, 1, PI/8); graph.obj.doDraw(); GRAPH = graph; var spinner; setTimeout(function() { spinner = setInterval(function() { GRAPH.obj.rotate(0, 0, 1, 0); GRAPH.obj.doDraw(); }, 50); }, 300); var mouseTarget = mouselayer.rect(0, 0, 400, 400).attr({ fill: "#000", opacity: 0.0 }); $(mouseTarget[0]).bind("vmousedown", function(event) { GRAPH.lastX = event.pageX; GRAPH.lastY = event.pageY; clearInterval(spinner); $(document).bind("vmousemove vmouseup", function(event) { event.preventDefault(); var dx = (event.pageX - GRAPH.lastX) / 200 * PI; var dy = (event.pageY - GRAPH.lastY) / 200 * PI; GRAPH.lastX = event.pageX; GRAPH.lastY = event.pageY; var xAxis = normalize(GRAPH.obj.perspective[1]); var yAxis = normalize(GRAPH.obj.perspective[0]); GRAPH.obj.rotate(xAxis[0], xAxis[1], xAxis[2], -dx / 2); GRAPH.obj.rotate(yAxis[0], yAxis[1], yAxis[2], -dy / 2); GRAPH.obj.doDraw(); if (event.type === "vmouseup") { $(document).unbind("vmousemove vmouseup"); } }) });

`x =` HEIGHT `UNIT_TEXT`

The volume of a box equals width `\times` height `\times` length.

Therefore `VOL = FRACTIONS[0] \cdot FRACTIONS[2] \cdot x`.

`\qquadfractionReduce(NUMERATORS[0] * NUMERATORS[2], DENOMINATORS[0] * DENOMINATORS[2])x = VOL`

`\qquad x = VOL \div fractionReduce(NUMERATORS[0] * NUMERATORS[2], DENOMINATORS[0] * DENOMINATORS[2])`

`\qquad x = VOL \cdot fractionReduce(DENOMINATORS[0] * DENOMINATORS[2], NUMERATORS[0] * NUMERATORS[2]) = FRACTIONS[1]`

`\qquad x = FRACTIONS[1]`