Permalink
Fetching contributors…
Cannot retrieve contributors at this time
149 lines (128 sloc) 8 KB
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers">
<head>
<title>Circles and arcs</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<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="ROTATE_ARC">randRange(0, 359)</var>
<var id="DIAGRAM_R">10</var>
<var id="C">2 * Math.PI * R</var>
<var id="A">NUMERATOR / DENOMINATOR * C</var>
<var id="PRETTY_A">fractionReduce(DEGREES * 2 * R, 360)</var>
<var id="PRETTY_C">"\\blue{" + (2 * R) + "}"</var>
</div>
<div class="problems">
<div id="c-angle-to-a">
<p class="problem">
A circle with circumference <code><var>PRETTY_C</var></code> has an arc with a
<code class="hint_pink"><var>DEGREES</var>^\circ</code> central angle.
</p>
<p class="question">What is the length of the arc?</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 });
path([polar(DIAGRAM_R, ROTATE_ARC + DEGREES), [0, 0], polar(DIAGRAM_R, ROTATE_ARC)], { stroke: RED, "stroke-dasharray": "." });
arc([0, 0], DIAGRAM_R, ROTATE_ARC, ROTATE_ARC + DEGREES, { stroke: RED, "stroke-dasharray": "-" });
graph.cAngle = 180 + ((ROTATE_ARC + DEGREES) + ROTATE_ARC) / 2;
graph.cL = label(polar(DIAGRAM_R, graph.cAngle), PRETTY_C, labelDirection(graph.cAngle));
graph.aAngle = (ROTATE_ARC * 2 + DEGREES) / 2;
graph.angle = arc([0, 0], DIAGRAM_R * 0.12, ROTATE_ARC, ROTATE_ARC + DEGREES, { stroke: PINK });
graph.angleL = label(polar(0.5, graph.aAngle), "\\pink{" + DEGREES + "^\\circ}", labelDirection(graph.aAngle));
graph.arcL = label(polar(DIAGRAM_R, graph.aAngle), "\\red{" + PRETTY_A + "}", labelDirection(graph.aAngle));
$(graph.arcL).hide();
</div>
<p class="solution" data-type="rational" data-simplify="optional"><var>NUMERATOR / DENOMINATOR * 2 * R</var></p>
<div class="hints">
<p>
The ratio between the arc's central angle <code>\pink{\theta}</code> and <code>360^\circ</code> is equal to the ratio between the arc length <code>\red{s}</code> and the circle's circumference <code>\blue{c}</code>.
</p>
<p><code>\dfrac{\pink{\theta}}{360^\circ} = \dfrac{\red{s}}{\blue{c}}</code></p>
<p><code>\dfrac{\pink{<var>DEGREES</var>}^\circ}{360^\circ} = \dfrac{\red{s}}{\blue{<var>PRETTY_C</var>}}</code></p>
<p><code><var>fractionReduce(NUMERATOR, DENOMINATOR)</var> = \dfrac{\red{s}}{<var>PRETTY_C</var>}</code></p>
<p><code><var>fractionReduce(NUMERATOR, DENOMINATOR)</var> \times <var>PRETTY_C</var> = \red{s}</code></p>
<div>
<p><code><var>PRETTY_A</var> = \red{s}</code></p>
<div class="graphie" data-update="circle">
$(graph.arcL).show();
</div>
</div>
</div>
</div>
<div id="r-angle-to-a" data-type="c-angle-to-a">
<div class="vars">
<var id="PRETTY_A">coefficient(fractionReduce(DEGREES * 2 * R, 360)) + "\\pi"</var>
<var id="PRETTY_C">"\\blue{" + (2 * R) + "\\pi}"</var>
</div>
<p class="problem">
A circle has a radius of <code>\blue{<var>R</var>}</code>. An arc in this circle has a central angle of
<code class="hint_pink"><var>DEGREES</var>^\circ</code>.
</p>
<div class="graphie" data-update="circle">
$(graph.cL).hide();
graph.r = path([[0, 0], polar(DIAGRAM_R, graph.cAngle)], { stroke: BLUE });
graph.rL = label(polar(DIAGRAM_R / 2, graph.cAngle), "\\blue{" + R + "}", "above");
</div>
<p class="solution" data-type="expression"><var>A</var></p>
<div class="hints" data-apply="prependContents">
<div>
<p>First, calculate the circumference of the circle.</p>
<div>
<div class="graphie" data-update="circle">
$(graph.cL).show();
</div>
<p><code>\blue{c} = 2\pi r = 2\pi (\blue{<var>R</var>}) = <var>PRETTY_C</var></code></p>
</div>
</div>
</div>
</div>
<div id="c-a-to-angle" data-type="c-angle-to-a" data-calculator="">
<p class="problem">
A circle has a circumference of <code class="hint_blue"><var>PRETTY_C</var></code>.
It has an arc of length <code class="hint_red"><var>PRETTY_A</var></code>.
</p>
<p class="question">
What is the central angle of the arc, in degrees?
</p>
<div class="render-answer-area-here"></div>
<div class="graphie" data-update="circle">
$(graph.angle).hide();
$(graph.angleL).hide();
$(graph.arcL).show();
</div>
<div class="solution" data-type="multiple">
<span class="sol"><var>DEGREES</var></span><code>^\circ</code>
</div>
<div class="hints">
<p>
The ratio between the arc's central angle <code class="hint_pink">\theta</code> and <code>360^\circ</code> is equal to the ratio between the arc length <code class="hint_red">s</code> and the circle's circumference <code class="hint_blue">c</code>.
</p>
<p><code>\dfrac{\pink{\theta}}{360^\circ} = \dfrac{\red{s}}{\blue{c}}</code></p>
<p><code>\dfrac{\pink{\theta}}{360^\circ} = \red{<var>PRETTY_A</var>} \div <var>PRETTY_C</var></code></p>
<p><code>\dfrac{\pink{\theta}}{360^\circ} = <var>fractionReduce(NUMERATOR, DENOMINATOR)</var></code></p>
<p><code>\pink{\theta} = <var>fractionReduce(NUMERATOR, DENOMINATOR)</var> \times 360^\circ</code></p>
<div>
<p><code>\pink{\theta} = <var>DEGREES</var>^\circ</code></p>
<div class="graphie" data-update="circle">
$(graph.angle).show();
$(graph.angleL).show();
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>