Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

184 lines (156 sloc) 10.573 kB
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers">
<head>
<title>Areas of circles and sectors</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="DIAGRAM_R">10</var>
<div data-ensure="DEGREES === round(DEGREES)">
<var id="R">randRange(2, 10)</var>
<var id="DENOMINATOR">R * randFromArray([2, 3, 4, 5, 6, 8, 9, 10, 12, 15])</var>
<var id="NUMERATOR">randRange(1, DENOMINATOR - 1)</var>
<var id="DEGREES">360 * NUMERATOR / DENOMINATOR</var>
</div>
<var id="FRACTION">fractionReduce(NUMERATOR * 2, DENOMINATOR)</var>
<var id="RADIANS">FRACTION !== '1' ? FRACTION + "\\pi" : "\\pi"</var>
<var id="USE_RADIANS">rand(2)</var>
<var id="A_C">PI * R * R</var>
<var id="A_S">DEGREES/360 * A_C</var>
<var id="PRETTY_A_C">R * R + "\\pi"</var>
<var id="PRETTY_A_S">fractionReduce(DEGREES * 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>\blue{<var>PRETTY_A_C</var>}</code> has a <span class="hint_green">sector</span>
with a central angle of
<span data-if="USE_RADIANS"><code>\purple{<var>RADIANS</var>}</code> radians</span>
<span data-else=""><code>\purple{<var>DEGREES</var>^\circ}</code></span>.
</p>
<p class="question">What is the area of the sector?</p>
<div class="render-answer-area-here"></div>
<div class="graphie" id="circle">
init({
range: [[-DIAGRAM_R - 2, DIAGRAM_R + 2], [-DIAGRAM_R - 2, DIAGRAM_R + 2]],
scale: [15, 15]
});
circle([0, 0], DIAGRAM_R, { stroke: BLUE });
arc([0, 0], DIAGRAM_R, ROTATE_ARC, ROTATE_ARC + DEGREES, true, { stroke: GREEN, fill: GREEN, "fill-opacity": 0.1 });
graph.cAngle = 180 + ((ROTATE_ARC + DEGREES) + ROTATE_ARC) / 2;
graph.aCL = label(polar(DIAGRAM_R/2, graph.cAngle), "\\blue{" + PRETTY_A_C + "}", "below");
graph.aAngle = (ROTATE_ARC * 2 + DEGREES) / 2;
graph.angle = arc([0, 0], DIAGRAM_R * 0.12, ROTATE_ARC, ROTATE_ARC + DEGREES, { stroke: PURPLE });
if (USE_RADIANS) {
label(polar(0.5, graph.aAngle), "\\purple{" + RADIANS + "}", labelDirection(graph.aAngle));
} else {
label(polar(0.5, graph.aAngle), "\\purple{" + DEGREES + "^\\circ}", labelDirection(graph.aAngle));
}
graph.aSL = label(polar(DIAGRAM_R * 0.65, graph.aAngle), "\\green{" + PRETTY_A_S + "}");
$(graph.aSL).hide();
</div>
<p class="solution" data-forms="integer, proper, improper, mixed, pi"><var>A_S</var></p>
<div class="hints">
<div data-if="USE_RADIANS" data-unwrap="">
<p>
The ratio between the sector's central angle <code>\purple{\theta}</code> and <code>2 \pi</code> radians
is equal to the ratio between the sector's area,
<code>\green{A_s}</code>, and the whole circle's area, <code>\blue{A_c}</code>.
</p>
<p><code>\dfrac{\purple{\theta}}{2 \pi} = \dfrac{\green{A_s}}{\blue{A_c}}</code></p>
<p><code>\purple{<var>RADIANS</var>} \div 2 \pi = \dfrac{\green{A_s}}{\blue{<var>PRETTY_A_C</var>}}</code></p>
</div>
<div data-else="" data-unwrap="">
<p>
The ratio between the sector's central angle <code>\purple{\theta}</code> and <code>360^\circ</code>
is equal to the ratio between the sector's area, <code>\green{A_s}</code>,
and the whole circle's area, <code>\blue{A_c}</code>.
</p>
<p><code>\dfrac{\purple{\theta}}{360^\circ} = \dfrac{\green{A_s}}{\blue{A_c}}</code></p>
<p><code>\dfrac{\purple{<var>DEGREES</var>^\circ}}{360^\circ} = \dfrac{\green{A_s}}{\blue{<var>PRETTY_A_C</var>}}</code></p>
</div>
<p><code><var>fractionReduce(NUMERATOR, DENOMINATOR)</var> = \dfrac{\green{A_s}}{\blue{<var>PRETTY_A_C</var>}}</code></p>
<p><code><var>fractionReduce(NUMERATOR, DENOMINATOR)</var> \times \blue{<var>PRETTY_A_C</var>} = \green{A_s}</code></p>
<div>
<p><code><var>PRETTY_A_S</var> = \green{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>\pink{<var>R</var>}</code> has a sector with a central angle of
<span data-if="USE_RADIANS"><code>\purple{<var>RADIANS</var>}</code> radians</span>
<span data-else=""><code>\purple{<var>DEGREES</var>^\circ}</code></span>.
</p>
<div class="graphie" data-update="circle">
$(graph.aCL).hide();
graph.r = path([[0, 0], polar(DIAGRAM_R, graph.cAngle)], { stroke: PINK });
graph.rL = label(polar(DIAGRAM_R / 2, graph.cAngle), "\\pink{" + 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>\blue{A_c} = \pi \pink{r}^2</code></p>
<div>
<p><code>\blue{A_c} = \pi (\pink{<var>R</var>})^2</code></p>
<p><code>\blue{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_green">sector</span> with area <code class="hint_green"><var>PRETTY_A_S</var></code>
and central angle of
<span data-if="USE_RADIANS"><code>\purple{<var>RADIANS</var>}</code> radians</span>
<span data-else=""><code>\purple{<var>DEGREES</var>^\circ}</code></span>.
</p>
<p class="question">What is the area of the circle?</p>
<div class="render-answer-area-here"></div>
<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">
<div data-if="USE_RADIANS" data-unwrap="">
<p>
The ratio between the sector's central angle <code>\purple{\theta}</code> and <code>2 \pi</code> radians
is equal to the ratio between the sector's area, <code>\green{A_s}</code>,
and the whole circle's area, <code>\blue{A_c}</code>.
</p>
<p><code>\dfrac{\purple{\theta}}{2 \pi} = \dfrac{\green{A_s}}{\blue{A_c}}</code></p>
<p><code>\purple{<var>RADIANS</var>} \div 2 \pi = \green{<var>PRETTY_A_S</var>} \div \blue{A_c}</code></p>
</div>
<div data-else="" data-unwrap="">
<p>
The ratio between the sector's central angle <code>\purple{\theta}</code> and <code>360^\circ</code>
is equal to the ratio between the sector's area, <code>\green{A_s}</code>,
and the whole circle's area, <code>\blue{A_c}</code>.
</p>
<p><code>\dfrac{\purple{\theta}}{360^\circ} = \dfrac{\green{A_s}}{\blue{A_c}}</code></p>
<p><code>\dfrac{\purple{<var>DEGREES</var>^\circ}}{360^\circ} = \green{<var>PRETTY_A_S</var>} \div \blue{A_c}</code></p>
</div>
<p><code><var>fractionReduce(NUMERATOR, DENOMINATOR)</var> = \green{<var>PRETTY_A_S</var>} \div \blue{A_c}</code></p>
<p><code>\blue{A_c} \times <var>fractionReduce(NUMERATOR, DENOMINATOR)</var> = \green{<var>PRETTY_A_S</var>}</code></p>
<p><code>\blue{A_c} = \green{<var>PRETTY_A_S</var>} \times <var>fractionReduce(DENOMINATOR, NUMERATOR)</var></code></p>
<div>
<p><code>\blue{A_c} = <var>PRETTY_A_C</var></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.