Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

181 lines (152 sloc) 10.43 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="FRACTION">fractionReduce(NUMERATOR * 2, DENOMINATOR)</var>
<var id="RADIANS">FRACTION !== '1' ? FRACTION + "\\pi" : "\\pi"</var>
<var id="RADIAN_VALUE">2 * NUMERATOR * Math.PI / DENOMINATOR</var>
<var id="USE_RADIANS">rand(2)</var>
<var id="CIRCLE_ANGLES">USE_RADIANS ? "2 \\pi" : "360 ^ \\circ"</var>
<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">coefficient(fractionReduce(DEGREES * 2 * R, 360)) + "\\pi"</var>
<var id="PRETTY_C">"\\blue{" + (2 * R) + "\\pi}"</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
<span data-if="USE_RADIANS"><code class="hint_pink"><var>RADIANS</var></code> radians</span>
<span data-else=""><code class="hint_pink"><var>DEGREES</var>^\circ</code></span>
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 });
if (USE_RADIANS) {
graph.angleL = label(polar(0.5, graph.aAngle), "\\pink{" + RADIANS + "}", labelDirection(graph.aAngle));
} else {
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="expression"><var>A</var></p>
<div class="hints">
<div data-if="USE_RADIANS" data-unwrap="">
<p>
The ratio between the arc's central angle <code>\pink{\theta}</code> and <code>2 \pi</code> radians is equal to the 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}}{2 \pi} = \dfrac{\red{s}}{\blue{c}}</code></p>
<p><code>\pink{<var>RADIANS</var>} \div 2 \pi = \dfrac{\red{s}}{<var>PRETTY_C</var>}</code></p>
</div>
<div data-else="" data-unwrap="">
<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>
</div>
<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">
<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
<span data-if="USE_RADIANS"><code class="hint_pink"><var>RADIANS</var></code> radians</span><span data-else=""><code class="hint_pink"><var>DEGREES</var>^\circ</code></span>.
</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>
<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">
<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">
<span data-if="USE_RADIANS">What is the central angle of the arc, in radians?</span>
<span data-else="">What is the central angle of the arc, in degrees?</span>
<div class="render-answer-area-here"></div>
</p>
<div class="graphie" data-update="circle">
$(graph.angle).hide();
$(graph.angleL).hide();
$(graph.arcL).show();
</div>
<div class="solution" data-type="multiple">
<span data-if="USE_RADIANS">
<span class="sol" data-type="expression"><var>RADIAN_VALUE</var></span>
</span><span data-else="">
<span class="sol"><var>DEGREES</var></span><code>^\circ</code>
</span>
</div>
<div class="hints">
<p data-if="USE_RADIANS">
The ratio between the arc's central angle <code class="hint_pink">\theta</code> and <code>2 \pi</code> radians is equal to the 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 data-else="">
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}}{<var>CIRCLE_ANGLES</var>} = \dfrac{\red{s}}{\blue{c}}</code></p>
<p><code>\dfrac{\pink{\theta}}{<var>CIRCLE_ANGLES</var>} = \red{<var>PRETTY_A</var>} \div <var>PRETTY_C</var></code></p>
<p><code>\dfrac{\pink{\theta}}{<var>CIRCLE_ANGLES</var>} = <var>fractionReduce(NUMERATOR, DENOMINATOR)</var></code></p>
<p><code>\pink{\theta} = <var>fractionReduce(NUMERATOR, DENOMINATOR)</var> \times <var>CIRCLE_ANGLES</var></code></p>
<div>
<p data-if="USE_RADIANS"><code>\pink{\theta} = <var>RADIANS</var></code> radians</p>
<p data-else=""><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>
Jump to Line
Something went wrong with that request. Please try again.