Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 184 lines (156 sloc) 10.573 kb
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
1 <!DOCTYPE html>
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored
2 <html data-require="math math-format graphie graphie-helpers">
3 <head>
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
4 <title>Areas of circles and sectors</title>
ac1415e @spicyj Use requirejs for module loading
spicyj authored
5 <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
6 </head>
7 <body>
8 <div class="exercise">
9 <div class="vars">
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
10 <var id="DIAGRAM_R">10</var>
11 <div data-ensure="DEGREES === round(DEGREES)">
12 <var id="R">randRange(2, 10)</var>
13 <var id="DENOMINATOR">R * randFromArray([2, 3, 4, 5, 6, 8, 9, 10, 12, 15])</var>
14 <var id="NUMERATOR">randRange(1, DENOMINATOR - 1)</var>
15 <var id="DEGREES">360 * NUMERATOR / DENOMINATOR</var>
16 </div>
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
17
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
18 <var id="FRACTION">fractionReduce(NUMERATOR * 2, DENOMINATOR)</var>
19 <var id="RADIANS">FRACTION !== '1' ? FRACTION + "\\pi" : "\\pi"</var>
20 <var id="USE_RADIANS">rand(2)</var>
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
21
22 <var id="A_C">PI * R * R</var>
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
23 <var id="A_S">DEGREES/360 * A_C</var>
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
24
a386b6c @osnr Use fractions internally in circles_and_arcs and areas_of_circles_and_se...
osnr authored
25 <var id="PRETTY_A_C">R * R + "\\pi"</var>
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
26 <var id="PRETTY_A_S">fractionReduce(DEGREES * R * R, 360) + "\\pi"</var>
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
27
28 <var id="ROTATE_ARC">randRange(0, 359)</var>
29 </div>
30
31 <div class="problems">
32 <div id="Ac-angle-to-As">
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
33 <p class="problem">
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
34 A circle with area <code>\blue{<var>PRETTY_A_C</var>}</code> has a <span class="hint_green">sector</span>
35 with a central angle of
36 <span data-if="USE_RADIANS"><code>\purple{<var>RADIANS</var>}</code> radians</span>
37 <span data-else=""><code>\purple{<var>DEGREES</var>^\circ}</code></span>.
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
38 </p>
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
39 <p class="question">What is the area of the sector?</p>
29be961 @alopatin Rearrange answer area content within some exercises
alopatin authored
40 <div class="render-answer-area-here"></div>
d53a57c @jeresig Two doctypes were being output. Only output one.
jeresig authored
41 <div class="graphie" id="circle">
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
42 init({
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
43 range: [[-DIAGRAM_R - 2, DIAGRAM_R + 2], [-DIAGRAM_R - 2, DIAGRAM_R + 2]],
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
44 scale: [15, 15]
45 });
46
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
47 circle([0, 0], DIAGRAM_R, { stroke: BLUE });
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
48
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
49 arc([0, 0], DIAGRAM_R, ROTATE_ARC, ROTATE_ARC + DEGREES, true, { stroke: GREEN, fill: GREEN, "fill-opacity": 0.1 });
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
50
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
51 graph.cAngle = 180 + ((ROTATE_ARC + DEGREES) + ROTATE_ARC) / 2;
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
52 graph.aCL = label(polar(DIAGRAM_R/2, graph.cAngle), "\\blue{" + PRETTY_A_C + "}", "below");
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
53 graph.aAngle = (ROTATE_ARC * 2 + DEGREES) / 2;
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
54
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
55 graph.angle = arc([0, 0], DIAGRAM_R * 0.12, ROTATE_ARC, ROTATE_ARC + DEGREES, { stroke: PURPLE });
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
56
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
57 if (USE_RADIANS) {
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
58 label(polar(0.5, graph.aAngle), "\\purple{" + RADIANS + "}", labelDirection(graph.aAngle));
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
59 } else {
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
60 label(polar(0.5, graph.aAngle), "\\purple{" + DEGREES + "^\\circ}", labelDirection(graph.aAngle));
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
61 }
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
62
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
63 graph.aSL = label(polar(DIAGRAM_R * 0.65, graph.aAngle), "\\green{" + PRETTY_A_S + "}");
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
64 $(graph.aSL).hide();
65 </div>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
66 <p class="solution" data-forms="integer, proper, improper, mixed, pi"><var>A_S</var></p>
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
67
68 <div class="hints">
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
69 <div data-if="USE_RADIANS" data-unwrap="">
70 <p>
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
71 The ratio between the sector's central angle <code>\purple{\theta}</code> and <code>2 \pi</code> radians
72 is equal to the ratio between the sector's area,
73 <code>\green{A_s}</code>, and the whole circle's area, <code>\blue{A_c}</code>.
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
74 </p>
75
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
76 <p><code>\dfrac{\purple{\theta}}{2 \pi} = \dfrac{\green{A_s}}{\blue{A_c}}</code></p>
77 <p><code>\purple{<var>RADIANS</var>} \div 2 \pi = \dfrac{\green{A_s}}{\blue{<var>PRETTY_A_C</var>}}</code></p>
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
78 </div>
79
80 <div data-else="" data-unwrap="">
81 <p>
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
82 The ratio between the sector's central angle <code>\purple{\theta}</code> and <code>360^\circ</code>
83 is equal to the ratio between the sector's area, <code>\green{A_s}</code>,
84 and the whole circle's area, <code>\blue{A_c}</code>.
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
85 </p>
86
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
87 <p><code>\dfrac{\purple{\theta}}{360^\circ} = \dfrac{\green{A_s}}{\blue{A_c}}</code></p>
88 <p><code>\dfrac{\purple{<var>DEGREES</var>^\circ}}{360^\circ} = \dfrac{\green{A_s}}{\blue{<var>PRETTY_A_C</var>}}</code></p>
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
89 </div>
90
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
91 <p><code><var>fractionReduce(NUMERATOR, DENOMINATOR)</var> = \dfrac{\green{A_s}}{\blue{<var>PRETTY_A_C</var>}}</code></p>
92 <p><code><var>fractionReduce(NUMERATOR, DENOMINATOR)</var> \times \blue{<var>PRETTY_A_C</var>} = \green{A_s}</code></p>
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
93
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
94 <div>
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
95 <p><code><var>PRETTY_A_S</var> = \green{A_s}</code></p>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
96 <div class="graphie" data-update="circle">
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
97 $(graph.aSL).show();
98 </div>
99 </div>
100 </div>
101 </div>
102
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
103 <div id="r-angle-to-As" data-type="Ac-angle-to-As">
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
104 <p class="problem">
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
105 A circle with radius <code>\pink{<var>R</var>}</code> has a sector with a central angle of
106 <span data-if="USE_RADIANS"><code>\purple{<var>RADIANS</var>}</code> radians</span>
107 <span data-else=""><code>\purple{<var>DEGREES</var>^\circ}</code></span>.
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
108 </p>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
109 <div class="graphie" data-update="circle">
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
110 $(graph.aCL).hide();
111
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
112 graph.r = path([[0, 0], polar(DIAGRAM_R, graph.cAngle)], { stroke: PINK });
113 graph.rL = label(polar(DIAGRAM_R / 2, graph.cAngle), "\\pink{" + R + "}", "above");
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
114 </div>
115
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
116 <div class="hints" data-apply="prependContents">
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
117 <p>First, calculate the area of the whole circle.</p>
118 <p>Then the area of the sector is some fraction of the whole circle's area.</p>
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
119 <p><code>\blue{A_c} = \pi \pink{r}^2</code></p>
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
120 <div>
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
121 <p><code>\blue{A_c} = \pi (\pink{<var>R</var>})^2</code></p>
122 <p><code>\blue{A_c} = <var>PRETTY_A_C</var></code></p>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
123 <div class="graphie" data-update="circle">
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
124 $(graph.aCL).show();
125 </div>
126 </div>
127 </div>
128 </div>
129
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
130 <div id="As-angle-to-Ac" data-type="Ac-angle-to-As">
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
131 <p class="problem">
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
132 A circle has a <span class="hint_green">sector</span> with area <code class="hint_green"><var>PRETTY_A_S</var></code>
133 and central angle of
134 <span data-if="USE_RADIANS"><code>\purple{<var>RADIANS</var>}</code> radians</span>
135 <span data-else=""><code>\purple{<var>DEGREES</var>^\circ}</code></span>.
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
136 </p>
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
137 <p class="question">What is the area of the circle?</p>
29be961 @alopatin Rearrange answer area content within some exercises
alopatin authored
138 <div class="render-answer-area-here"></div>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
139 <div class="graphie" data-update="circle">
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
140 $(graph.aCL).hide();
141 $(graph.aSL).show();
142 </div>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
143 <p class="solution" data-forms="integer, proper, improper, mixed, decimal, pi"><var>A_C</var></p>
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
144
145 <div class="hints">
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
146 <div data-if="USE_RADIANS" data-unwrap="">
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
147 <p>
148 The ratio between the sector's central angle <code>\purple{\theta}</code> and <code>2 \pi</code> radians
149 is equal to the ratio between the sector's area, <code>\green{A_s}</code>,
150 and the whole circle's area, <code>\blue{A_c}</code>.
151 </p>
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
152
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
153 <p><code>\dfrac{\purple{\theta}}{2 \pi} = \dfrac{\green{A_s}}{\blue{A_c}}</code></p>
154 <p><code>\purple{<var>RADIANS</var>} \div 2 \pi = \green{<var>PRETTY_A_S</var>} \div \blue{A_c}</code></p>
155 </div>
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
156
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
157 <div data-else="" data-unwrap="">
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
158 <p>
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
159 The ratio between the sector's central angle <code>\purple{\theta}</code> and <code>360^\circ</code>
160 is equal to the ratio between the sector's area, <code>\green{A_s}</code>,
161 and the whole circle's area, <code>\blue{A_c}</code>.
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
162 </p>
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
163
164 <p><code>\dfrac{\purple{\theta}}{360^\circ} = \dfrac{\green{A_s}}{\blue{A_c}}</code></p>
165 <p><code>\dfrac{\purple{<var>DEGREES</var>^\circ}}{360^\circ} = \green{<var>PRETTY_A_S</var>} \div \blue{A_c}</code></p>
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
166 </div>
167
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
168 <p><code><var>fractionReduce(NUMERATOR, DENOMINATOR)</var> = \green{<var>PRETTY_A_S</var>} \div \blue{A_c}</code></p>
169 <p><code>\blue{A_c} \times <var>fractionReduce(NUMERATOR, DENOMINATOR)</var> = \green{<var>PRETTY_A_S</var>}</code></p>
170 <p><code>\blue{A_c} = \green{<var>PRETTY_A_S</var>} \times <var>fractionReduce(DENOMINATOR, NUMERATOR)</var></code></p>
72628e6 @petercollingridge Merge pull request #103000 from petercollingridge/sector
petercollingridge authored
171
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
172 <div>
57f1d0b @petercollingridge Fix hint typo and colour-code hints
petercollingridge authored
173 <p><code>\blue{A_c} = <var>PRETTY_A_C</var></code></p>
0f0c630 @cbhl Clean up the exercise files using the new cleaning utility. (II)
cbhl authored
174 <div class="graphie" data-update="circle">
22d4ca2 @osnr Add new exercise: areas of circles and sectors.
osnr authored
175 $(graph.aCL).show();
176 </div>
177 </div>
178 </div>
179 </div>
180 </div>
181 </div>
cde9e9f @jeresig Re-run the exercises through the updated cleaner.
jeresig authored
182 </body>
183 </html>
Something went wrong with that request. Please try again.