Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
710 lines (627 sloc) 29.6 KB
<!DOCTYPE html>
<html data-require="math graphie graphie-3d math-format interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Solid geometry</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script type="text/javascript">
var makeSquare = function(left, width, bottom, height, color) {
KhanUtil.currentGraph.path([
[left, bottom],
[left, bottom + height],
[left + width, bottom + height],
[left + width, bottom],
true
],
{ stroke: "black", strokeWidth: 1, fill: color }
);
};
var normalize = function(vect) {
var length = Math.sqrt(vect[0] * vect[0] +
vect[1] * vect[1] +
vect[2] * vect[2]);
return _.map(vect, function(e) { return e / length; });
};
</script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="int-tripri-V">
<div class="vars">
<var id="COLOR1">"#D7ED3A"</var>
<var id="COLOR2">"#38C77F"</var>
<var id="COLOR3">"#78D0EF"</var>
<var id="COLOR4">"#F0B63A"</var>
<var id="HEIGHT">randRange(2, 5)</var>
<var id="BASE">HEIGHT * 2</var>
<var id="SIDE">"" + HEIGHT + "\\sqrt{2}"</var>
<var id="DEPTH">randRange(3, 7)</var>
<var id="XANGLE">PI / 15</var>
<var id="YANGLE">-PI / 8</var>
<var id="SCALE">5.0</var>
<var id="VERTICES">[
[-1, 0.5, 1],
[1, 0.5, 1],
[0, -0.5, 1],
[-1, 0.5, -1],
[1, 0.5, -1],
[0, -0.5, -1]
]</var>
<var id="FACES">[
{
verts: [0, 2, 1],
color: COLOR3,
lines: [[[0, -0.5, 1], [0, 0.5, 1]]],
labels: [[[0, 0, 1], HEIGHT]]
}, {
verts: [3, 4, 5],
color: COLOR3,
lines: [[[-0.03, -0.47, -1], [0.95, 0.5, -1]]],
labels: [[[0.2, -0.08, -1], SIDE]]
}, {
verts: [0, 1, 4, 3],
color: COLOR4,
lines: [[[1, 0.5, 0], [-1, 0.5, 0]]],
labels: [[[0, 0.5, 0], BASE]]
}, {
verts: [1, 2, 5, 4],
color: COLOR1,
lines: [[[0.5, 0, 1], [0.5, 0, -1]]],
labels: [[[0.5, 0, 0], DEPTH]]
}, {
verts: [0, 3, 5, 2],
color: COLOR2,
lines: [[[-1, 0.5, 0], [0, -0.5, 0]]],
labels: [[[-0.5, 0, 0], SIDE]]
}
]</var>
<var id="BASE_TEXT">i18n._("base")</var>
<var id="HEIGHT_TEXT">i18n._("height")</var>
</div>
<p class="question">
What is the volume of this object?
Drag on the object to rotate it.
</p>
<p class="render-answer-area-here"></p>
<div class="problem">
<div class="graphie" id="main">
init({range: [[-2, 2], [-2, 2]], scale: [100, 100]});
addMouseLayer();
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, YANGLE);
graph.obj.rotate(0, 1, 0, XANGLE);
graph.obj.doDraw();
var spinner;
setTimeout(function() {
spinner = setInterval(function() {
graph.obj.rotate(0, 1, 0, 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");
}
})
});
</div>
</div>
<div class="solution" data-type="multiple">
<p><span class="sol" data-type="decimal"><var>DEPTH * BASE * HEIGHT / 2</var></span> cubic units</p>
</div>
<div class="hints">
<p>The volume of a prism is the area of the base <code>\times</code> depth.</p>
<p>In this object, one of the triangles is the base.</p>
<p>The area of a triangle is
<code>\frac{1}{2}\ \text{<var>BASE_TEXT</var>} \times \text{<var>HEIGHT_TEXT</var>}</code>.
</p>
<div>
<p>Orient the triangle like this, and find the
base and height from the object:</p>
<div class="graphie" id="triangle">
init({ range: [[-2, 2], [-1.2, 1.2]], scale: [100, 100] });
path([[-1.5, -0.75], [1.5, -0.75], [0, 0.75], true],
{ stroke: "black", strokeWidth: 1, fill: COLOR3 });
path([[0, -0.75], [0, 0.75]],
{ stroke: "black", strokeDasharray: ". " });
graph.label1 = label([0, 0], "?", "right");
graph.label2 = label([-0.4, -0.75], "?", "below");
</div>
</div>
<div>
<p>
From the object, we find that the base of the triangle
is <code><var>BASE</var></code> and the height is
<code><var>HEIGHT</var></code>.
</p>
<div class="graphie" data-update="triangle">
graph.label1.remove();
graph.label2.remove();
label([0, 0], HEIGHT, "right");
label([-0.4, -0.75], BASE, "below");
</div>
</div>
<p>
The area of the triangle is then
<code>\frac{1}{2}<var>BASE</var> \times <var>HEIGHT</var>
= <var>BASE * HEIGHT / 2</var></code>.
</p>
<p>
From the object, we can then find that the depth is
<code><var>DEPTH</var></code>.
</p>
<p>
So, the final volume is
<code><var>BASE * HEIGHT / 2</var> \times <var>DEPTH</var>
= <var>BASE * HEIGHT * DEPTH / 2</var></code>
cubic units.
</p>
</div>
</div>
<div id="int-box-V" data-type="int-tripri-V">
<div class="vars" data-apply="prependContents">
<var id="LENGTH">randRange(2, 7)</var>
<var id="WIDTH">randRange(2, 7)</var>
<var id="HEIGHT">randRange(2, 7)</var>
<var id="MAX">max(max(LENGTH, WIDTH), HEIGHT)</var>
<var id="XBORD">LENGTH/MAX</var>
<var id="YBORD">WIDTH/MAX</var>
<var id="ZBORD">HEIGHT/MAX</var>
</div>
<div class="vars">
<var id="YANGLE">-PI / 8</var>
<var id="XANGLE">0</var>
<var id="VERTICES">[
[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]
]</var>
<var id="SCALE">4.0</var>
<var id="FACES">[
{
verts: [3, 2, 1, 0],
color: COLOR1,
labels: [[[XBORD, 0, ZBORD], WIDTH]]
}, {
verts: [4, 5, 6, 7],
color: COLOR1,
labels: [[[-XBORD, 0, -ZBORD], WIDTH]]
}, {
verts: [0, 1, 5, 4],
color: COLOR3,
labels: [[[-XBORD, YBORD, 0], HEIGHT]]
}, {
verts: [2, 3, 7, 6],
color: COLOR3,
labels: [[[-XBORD, -YBORD, 0], HEIGHT]]
}, {
verts: [1, 2, 6, 5],
color: COLOR2,
labels: [[[0, -YBORD, -ZBORD], LENGTH]]
}, {
verts: [3, 0, 4, 7],
color: COLOR2,
labels: [[[0, YBORD, ZBORD], LENGTH]]
}
]</var>
</div>
<p class="question">
What is the volume of this box? Drag on the box to rotate it.
</p>
<div class="solution" data-type="multiple">
<p><span class="sol" data-type="decimal"><var>LENGTH * WIDTH * HEIGHT</var></span> cubic units</p>
</div>
<div class="hints">
<p>The volume of a box is the length <code>\times</code> width <code>\times</code> height.</p>
<p>
From the figure, we can find that the lengths of the sides are
<code><var>LENGTH</var></code>, <code><var>WIDTH</var></code>, and <code><var>HEIGHT</var></code>.
</p>
<p>
<code><var>LENGTH</var> \times <var>WIDTH</var> \times <var>HEIGHT</var> =
<var>LENGTH * WIDTH * HEIGHT</var></code>
</p>
<p>So, the volume of the box is <code><var>LENGTH * WIDTH * HEIGHT</var></code> cubic units.</p>
</div>
</div>
<div id="int-box-T" data-type="int-box-V">
<p class="question">
What is the surface area of this box?
Drag on the box to rotate it.
</p>
<div class="solution" data-type="multiple">
<p><span class="sol" data-type="decimal">
<var>2 * (LENGTH * WIDTH + LENGTH * HEIGHT + WIDTH * HEIGHT)</var>
</span> square units</p>
</div>
<div class="hints">
<p>To find the surface area, find the areas
of each of the faces, and add all the areas up.</p>
<div>
<p>To see this better, let's try unwrapping the box:
<input onclick="KhanUtil.graphs.unwrap.graph.unwrap()" type="submit" value="Unwrap!"/></p>
<div class="graphie" id="unwrap">
var verts = [
[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],
[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]
];
var faces = [
{
verts: [5, 6, 2, 1],
color: COLOR2
}, {
verts: [4, 5, 1, 0],
color: COLOR3
}, {
verts: [6, 7, 3, 2],
color: COLOR3
}, {
verts: [1, 2, 9, 8],
color: COLOR1
}, {
verts: [6, 5, 10, 11],
color: COLOR1
}, {
verts: [13, 12, 3, 7],
color: COLOR2
}, {
verts: [0, 1, 5, 4],
color: COLOR3
}, {
verts: [11, 10, 5, 6],
color: COLOR1
}, {
verts: [7, 3, 12, 13],
color: COLOR2
}
];
var size = 2 * WIDTH / MAX + 2 * HEIGHT / MAX;
init({range: [[-2, 2], [-2, 2]], scale: [100, 100]});
graph.obj = make3dObject(verts);
_.each(faces, function(face) {
graph.obj.addFace(face);
});
graph.obj.setPos([0, -0.6, 5]);
graph.obj.rotate(1, 0, 0, PI / 8);
graph.obj.rotate(0, 1, 0, PI / 10);
graph.obj.setScale(8 / size);
graph.obj.doDraw();
graph.unwrapped = false;
graph.unwrap = function() {
if (graph.unwrapped) {
return;
}
graph.unwrapped = true;
var last = 0;
$({ t: 0 }).animate({ t: PI },
{
duration: 3000,
easing: "linear",
step: function(now, fx) {
verts[4][2] = verts[0][2] =
cos(now) * HEIGHT / MAX;
verts[4][1] = verts[0][1] =
WIDTH / MAX +
2 * cos((PI - now) / 2) * HEIGHT / MAX;
verts[3][2] = verts[7][2] =
cos(now) * HEIGHT / MAX;
verts[3][1] = verts[7][1] =
-WIDTH / MAX -
2 * cos((PI - now) / 2) * HEIGHT / MAX;
verts[8][2] = verts[9][2] =
cos(now) * HEIGHT / MAX;
verts[8][0] = verts[9][0] =
LENGTH / MAX +
2 * cos((PI - now) / 2) * HEIGHT / MAX;
verts[10][2] = verts[11][2] =
cos(now) * HEIGHT / MAX;
verts[10][0] = verts[11][0] =
-LENGTH / MAX -
2 * cos((PI - now) / 2) * HEIGHT / MAX;
verts[12][2] = verts[13][2] =
cos(now) * HEIGHT / MAX +
2 * sin(now) * WIDTH / MAX;
verts[12][1] = verts[13][1] =
-WIDTH / MAX -
2 * cos(PI / 2 -
now / 2) * HEIGHT / MAX +
2 * cos(now) * WIDTH / MAX;
if (now &lt; PI / 2) {
graph.obj.rotate(0, 1, 0,
-2 / 10 * (now - last));
} else {
graph.obj.rotate(1, 0, 0,
-2 / 8 * (now - last));
}
last = now;
graph.obj.doDraw();
}
});
};
</div>
</div>
<div id="unwrapped" data-unwrap="">
<div>
<p>We can group the faces together based on size and color:</p>
<div class="graphie">
var width = WIDTH + 2 + LENGTH + 2 + HEIGHT + 2;
var height = max(max(WIDTH, LENGTH), HEIGHT) + 1;
init({range: [[-1, width + 1], [-1, height + 1]],
scale: [400 / width, 400 / width]});
makeSquare(0, HEIGHT, 0, WIDTH, COLOR1);
makeSquare(1, HEIGHT, 1, WIDTH, COLOR1);
label([0.8 + HEIGHT / 2, WIDTH + 1.2],
HEIGHT, "below");
label([1.1 + HEIGHT, 1 + WIDTH / 2],
WIDTH, "left");
makeSquare(HEIGHT + 2, WIDTH, 0, LENGTH, COLOR2);
makeSquare(HEIGHT + 3, WIDTH, 1, LENGTH, COLOR2);
label([2.8 + HEIGHT + WIDTH / 2, 1.2 + LENGTH],
WIDTH, "below");
label([3.1 + HEIGHT + WIDTH, 1 + LENGTH / 2],
LENGTH, "left");
makeSquare(HEIGHT + WIDTH + 4, LENGTH, 0, HEIGHT, COLOR3);
makeSquare(HEIGHT + WIDTH + 5, LENGTH, 1, HEIGHT, COLOR3);
label([4.8 + HEIGHT + WIDTH + LENGTH / 2, 1.2 + HEIGHT],
LENGTH, "below");
label([5.1 + HEIGHT + WIDTH + LENGTH, 1 + HEIGHT / 2],
HEIGHT, "left");
</div>
</div>
<div>
<p>We can calculate the area of each
of the pieces now:</p>
<code>
2 \left(<var>WIDTH</var> \times
<var>HEIGHT</var>\right) +
2 \left(<var>LENGTH</var> \times
<var>WIDTH</var>\right) +
2 \left(<var>HEIGHT</var> \times
<var>LENGTH</var>\right)
</code>
</div>
<p>
<code>\qquad= <var>2 * WIDTH * HEIGHT</var> +
<var>2 * LENGTH * WIDTH</var> +
<var>2 * HEIGHT * LENGTH</var></code>
</p>
<p>
<code>
\qquad=
<var>2 * WIDTH * HEIGHT +
2 * LENGTH * WIDTH +
2 * HEIGHT * LENGTH</var>
</code>
</p>
<p>
So, the total surface area of the box is
<code><var>2 * WIDTH * HEIGHT + 2 * LENGTH * WIDTH + 2 * HEIGHT * LENGTH</var></code>
square units.
</p>
</div>
</div>
</div>
<div id="int-cube-V" data-type="int-box-V">
<div class="vars" data-apply="appendContents">
<var id="LENGTH">randRange(2, 7)</var>
<var id="WIDTH">LENGTH</var>
<var id="HEIGHT">LENGTH</var>
</div>
<p class="question">
What is the volume of this cube? Drag on the cube to rotate it.
</p>
<div class="hints">
<p>The volume of a box is the
length <code>\times</code>
width <code>\times</code>
height.</p>
<p>Since this is a cube, all the sides are the same length.</p>
<p>From the figure, we can find that the side length is
<code><var>WIDTH</var></code>.</p>
<p>To find the volume, we just cube this side length.</p>
<p>
<code><var>WIDTH</var>^3 =
<var>WIDTH</var> \times
<var>WIDTH</var> \times
<var>WIDTH</var> =
<var>WIDTH * WIDTH * WIDTH</var></code>
</p>
<p>So, the volume of the cube is <code><var>WIDTH * WIDTH * WIDTH</var></code> cubic units.</p>
</div>
</div>
<div id="int-cube-T" data-type="int-box-T">
<div class="vars" data-apply="appendContents">
<var id="LENGTH">randRange(2, 7)</var>
<var id="WIDTH">LENGTH</var>
<var id="HEIGHT">LENGTH</var>
</div>
<p class="question">
What is the surface area of this cube?
Drag on the cube to rotate it.
</p>
<div class="hints" data-apply="appendContents">
<div id="unwrapped" data-unwrap="">
<p>Here, we can see that all of the
six sides have the same size.</p>
<div>
<div class="graphie">
var width = WIDTH + 5;
var height = WIDTH + 2;
init({range: [[-1, width + 1], [-1, height + 1]],
scale: [300 / width, 300 / width]});
var colors = [COLOR3, COLOR3, COLOR1, COLOR1, COLOR2, COLOR2];
for (var i = 0; i &lt; 6; ++i) {
makeSquare(i, HEIGHT, i / 3, WIDTH, colors[i]);
}
label([4.8 + WIDTH / 2, 1.76 + WIDTH], WIDTH, "below");
label([5 + WIDTH, 1.66 + WIDTH / 2], WIDTH, "left");
</div>
</div>
<div>
<p>We can now calculate the total area:</p>
<code>6 \left(<var>WIDTH</var> \times
<var>WIDTH</var>\right)</code>
</div>
<p>
<code>\qquad= 6 \times <var>WIDTH * WIDTH</var></code>
</p>
<p>
<code>\qquad= <var>6 * WIDTH * WIDTH</var></code>
</p>
<p>
So, the total surface area of the cube is
<code><var>6 * WIDTH * WIDTH</var></code>
square units.
</p>
</div>
</div>
</div>
<div id="cylinder-V">
<div class="vars">
<var id="r">randRange(2, 4)</var>
<var id="h">randRange(5, 9)</var>
</div>
<div class="question">
<p>What is the volume of a cylinder with base radius
<code><var>r</var></code> and height
<code><var>h</var></code>?</p>
<p class="render-answer-area-here"></p>
<div class="graphie">
init({
range: [[-1, 4], [-2, 4]]
});
arc([1.5, 3], [1.5, 0.4], 0, 48 );
arc([1.5, 3], [1.5, 0.4], 70, 360 );
path([[0, -1], [0, 3]]);
path([[3, -1], [3, 3]]);
arc([1.5, -1], [1.5, 0.4], 0, 180, {
strokeDasharray: "- "
});
arc([1.5, -1], [1.5, 0.4], 180, 360);
path([[1.5, 3], [3, 3]]);
label([2.25, 3], r, "above");
label([3, 1], h, "right");
</div>
</div>
<div class="solution" data-type="multiple">
<p><span class="sol" data-forms="pi">
<var>Math.PI * r * r * h</var>
</span> cubic units</p>
</div>
<div class="hints">
<p>The volume of a cylinder is the area of the base <code>\times</code> height.</p>
<p>The area of a circle is <code>\pi r^2</code>.</p>
<p>So the area the base is <code>\pi \cdot <var>r</var>^2 = <var>r * r</var> \pi</code>.</p>
<p>
The height of the cylinder is <code><var>h</var></code>, so the volume is
<code><var>r * r</var>\pi \cdot <var>h</var> = <var>r * r * h</var>\pi</code> cubic units.
</p>
</div>
</div>
<div id="cylinder-T">
<div class="vars">
<var id="r">randRange( 2, 4 )</var>
<var id="h">randRange( 5, 9 )</var>
</div>
<div class="question">
<p>What is the surface area of a cylinder with
base radius <code><var>r</var></code> and
height <code><var>h</var></code>?</p>
<p class="render-answer-area-here"></p>
<div class="graphie">
init({
range: [[-1, 4], [-2, 4]]
});
arc([1.5, 3], [1.5, 0.4], 0, 48);
arc([1.5, 3], [1.5, 0.4], 70, 360);
path([[0, -1], [0, 3]]);
path([[3, -1], [3, 3]]);
arc([1.5, -1], [1.5, 0.4], 0, 180, {
strokeDasharray: "- "
});
arc([1.5, -1], [1.5, 0.4], 180, 360);
path([[1.5, 3], [3, 3]]);
label([2.25, 3], r, "above");
label([3, 1], h, "right");
</div>
</div>
<div class="solution" data-type="multiple">
<p><span class="sol" data-forms="pi">
<var>Math.PI * 2 * r * ( r + h )</var>
</span> square units</p>
</div>
<div class="hints">
<p>
The areas of the top and the base are simply the
area of a circle:
<code>\pi r^2 = \pi \cdot <var>r</var>^2 =
<var>r * r</var> \pi</code>.
</p>
<p>
The lateral surface area is the same as the
area of a rectangle with height
<code><var>h</var></code>
and width equal to the circumference of the base.
</p>
<p>
That circumference is
<code>2 \pi r = 2\pi \cdot <var>r</var> =
<var>2 * r</var>\pi</code>.
</p>
<p>
Thus, the lateral surface area is
<code>wh = <var>2 * r</var> \pi \cdot <var>h</var> =
<var>2 * r * h</var> \pi</code>.
</p>
<p>
The total surface area is
<code><var>r * r</var> \pi + <var>r * r</var> \pi +
<var>2 * r * h</var> \pi = <var>2 * r * ( r + h )</var>\pi</code>
square units.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.