Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

121 lines (99 sloc) 6.598 kB
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers">
<head>
<title>Areas of circles and sectors</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="ANGLE">randRange(5, 355)</var>
<var id="R">randRange(5, 10)</var>
<var id="C">2 * Math.PI * R</var>
<var id="PRETTY_C">2 * R + "\\pi"</var>
<var id="S">ANGLE/360 * C</var>
<var id="PRETTY_S">fractionReduce(ANGLE * C, 360) + "\\pi"</var>
<var id="A_C">PI * R * R</var>
<var id="A_S">ANGLE/360 * A_C</var>
<var id="PRETTY_A_C">R * R + "\\pi"</var>
<var id="PRETTY_A_S">fractionReduce(ANGLE * R * R, 360) + "\\pi"</var>
<var id="ROTATE_ARC">randRange(0, 359)</var>
</div>
<div class="problems">
<div id="Ac-angle-to-As">
<p class="problem">A circle with area <code class="hint_blue"><var>PRETTY_A_C</var></code> has a <span class="hint_orange">sector</span> with a <code class="hint_purple"><var>ANGLE</var>^\circ</code> central angle.</p>
<p class="question">What is the area of the sector?</p>
<div class="graphie" id="circle">
init({
range: [[-R - 2, R + 2], [-R - 2, R + 2]],
scale: [15, 15]
});
circle([0, 0], R, { stroke: BLUE });
arc([0, 0], R, ROTATE_ARC, ROTATE_ARC + ANGLE, true, { stroke: ORANGE, fill: ORANGE, "fill-opacity": 0.1 });
graph.cAngle = 180 + ((ROTATE_ARC + ANGLE) + ROTATE_ARC) / 2;
graph.aCL = label(polar(R/2, graph.cAngle), "\\color{"+BLUE+"}{"+PRETTY_A_C+"}", "below");
graph.aAngle = (ROTATE_ARC * 2 + ANGLE) / 2;
graph.angle = arc([0, 0], R * 0.12, ROTATE_ARC, ROTATE_ARC + ANGLE, { stroke: PURPLE });
graph.angleL = label([0, 0], "\\color{"+PURPLE+"}{"+ANGLE+"^\\circ}", labelDirection(graph.aAngle));
graph.aSL = label(polar(R/2, graph.aAngle), "\\color{"+ORANGE+"}{"+PRETTY_A_S+"}");
$(graph.aSL).hide();
graph.arcL = label(polar(R, graph.aAngle), "\\color{"+ORANGE+"}{"+PRETTY_S+"}", labelDirection(graph.aAngle));
$(graph.arcL).hide();
</div>
<p class="solution" data-forms="integer, proper, improper, mixed, pi"><var>A_S</var></p>
<div class="hints">
<p>The ratio between the sector's central angle <code class="hint_purple">\theta</code> and <code>360^\circ</code> equals the ratio between the sector's area, <code class="hint_orange">A_s</code>, and the whole circle's area, <code class="hint_blue">A_c</code>.</p>
<p><code>\dfrac{\theta}{360^\circ} = \dfrac{A_s}{A_c}</code></p>
<p><code>\dfrac{<var>ANGLE</var>^\circ}{360^\circ} = \dfrac{A_s}{<var>PRETTY_A_C</var>}</code></p>
<div>
<p><code><var>PRETTY_A_S</var> = A_s</code></p>
<div class="graphie" data-update="circle">
$(graph.aSL).show();
</div>
</div>
</div>
</div>
<div id="r-angle-to-As" data-type="Ac-angle-to-As">
<p class="problem">A circle with radius <code class="hint_blue"><var>R</var></code> has a sector with a <code class="hint_purple"><var>ANGLE</var>^\circ</code> central angle.</p>
<div class="graphie" data-update="circle">
$(graph.aCL).hide();
graph.r = path([[0, 0], polar(R, graph.cAngle)], { stroke: BLUE });
graph.rL = label(polar(R/2, graph.cAngle), "\\color{"+BLUE+"}{"+R+"}", "above");
</div>
<div class="hints" data-apply="prependContents">
<p>First, calculate the area of the whole circle.</p>
<p>Then the area of the sector is some fraction of the whole circle's area.</p>
<p><code>A_c = \pi r^2</code></p>
<div>
<p><code>A_c = \pi (<var>R</var>)^2</code></p>
<p><code>A_c = <var>PRETTY_A_C</var></code></p>
<div class="graphie" data-update="circle">
$(graph.aCL).show();
</div>
</div>
</div>
</div>
<div id="As-angle-to-Ac" data-type="Ac-angle-to-As">
<p class="problem">A circle has a <span class="hint_orange">sector</span> with area <code class="hint_orange"><var>PRETTY_A_S</var></code> and central angle <code class="hint_purple"><var>ANGLE</var>^\circ</code>.</p>
<p class="question">What is the area of the circle?</p>
<div class="graphie" data-update="circle">
$(graph.aCL).hide();
$(graph.aSL).show();
</div>
<p class="solution" data-forms="integer, proper, improper, mixed, decimal, pi"><var>A_C</var></p>
<div class="hints">
<p>The ratio between the sector's central angle <code class="hint_purple">\theta</code> and <code>360^\circ</code> equals the ratio between the sector's area, <code class="hint_orange">A_s</code>, and the whole circle's area, <code class="hint_blue">A_c</code>.</p>
<p><code>\dfrac{\theta}{360^\circ} = \dfrac{A_s}{A_c}</code></p>
<p><code>\dfrac{<var>ANGLE</var>^\circ}{360^\circ} = \dfrac{<var>PRETTY_A_S</var>}{A_c}</code></p>
<div>
<p><code><var>PRETTY_A_C</var> = A_c</code></p>
<div class="graphie" data-update="circle">
$(graph.aCL).show();
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.