This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
inscribed_angles_1.html
123 lines (117 loc) · 6.98 KB
/
inscribed_angles_1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html data-require="math graphie graphie-polygon interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Inscribed angles 1</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="find-angle">
<div class="vars">
<var id="START">randRange( 0, 360 )</var>
<var id="CENTRAL">randRange( 10, 80 ) * 2</var>
<var id="SUBTENDED_POINT">( START + 180 ) % 360</var>
<var id="RADIUS">4</var>
<var id="GIVEN">CENTRAL</var>
<var id="GIVEN_LABEL">"blue"</var>
<var id="ASKED_LABEL">"orange"</var>
</div>
<p class="question">If the <var>GIVEN_LABEL</var> angle measures <var>GIVEN</var> degrees, what does the <var>ASKED_LABEL</var> angle measure?</p>
<p>This is a special case where the blue and orange angles' sides share the same line. The blue angle is called a central angle, and the orange angle is called an inscribed angle.</p>
<div class="graphie" id="circle">
init({
range: [ [ -RADIUS - 1, RADIUS + 1 ], [ -RADIUS - 1, RADIUS + 1 ] ]
});
addMouseLayer();
graph.circle = new Circle( RADIUS );
style({ stroke: BLUE, fill: BLUE });
graph.circle.drawCenter();
graph.circle.drawPoint( START );
graph.circle.drawPoint( START + CENTRAL );
graph.circle.drawCentralAngle( START, START + CENTRAL );
style({ stroke: ORANGE, fill: ORANGE });
graph.circle.drawInscribedAngle( SUBTENDED_POINT, START, START + CENTRAL );
graph.circle.drawMovablePoint( SUBTENDED_POINT, START + CENTRAL, START );
</div>
<div class="solution" data-type="multiple">
<span class="sol"><var>CENTRAL / 2</var></span> degrees
</div>
<div class="hints">
<div>
<p>The green and blue angles are supplementary. Because the blue angle is <var>CENTRAL</var> degrees, the green angle must be <var>180 - CENTRAL</var> degrees.</p>
<div class="graphie" data-update="circle">
style({ stroke: GREEN }, function() {
graph.circle.drawCentralArc( START + CENTRAL, SUBTENDED_POINT );
})
</div>
</div>
<div>
<p>We know that the angles in a triangle sum to 180 degrees.</p>
<div class="graphie" data-update="circle">
style({ stroke: PINK }, function() {
graph.circle.drawInscribedArc( START + CENTRAL, SUBTENDED_POINT, START + CENTRAL + 180 );
});
</div>
<p><code>\color{<var>GREEN</var>}{\text{green angle}} + \color{<var>PINK</var>}{\text{pink angle}} + \color{<var>ORANGE</var>}{\text{orange angle}} = 180^{\circ}</code></p>
</div>
<div>
<p>The pink sides of the triangle are radii, so they must be equal.</p>
<div class="graphie" data-update="circle">
style({ stroke: PINK }, function() {
graph.circle.drawRadius( START + CENTRAL );
graph.circle.drawRadius( SUBTENDED_POINT );
});
</div>
</div>
<p>This means that the triangle is isosceles and that the base angles, or the pink and orange angles, are equal.</p>
<p><code>\color{<var>GREEN</var>}{\text{green angle}} + 2 \cdot \color{<var>ORANGE</var>}{\text{orange angle}} = 180^{\circ}</code></p>
<p><code>2 \cdot \color{<var>ORANGE</var>}{\text{orange angle}} = 180^{\circ} - \color{<var>GREEN</var>}{<var>180 - CENTRAL</var>^{\circ}}</code></p>
<p><code>2 \cdot \color{<var>ORANGE</var>}{\text{orange angle}} = \color{<var>BLUE</var>}{<var>CENTRAL</var>^{\circ}}</code></p>
<p><code>\color{<var>ORANGE</var>}{\text{orange angle}} = \dfrac{1}{2} \cdot \color{<var>BLUE</var>}{<var>CENTRAL</var>^{\circ}}</code></p>
<p><code>\color{<var>ORANGE</var>}{\text{orange angle}} = \color{<var>ORANGE</var>}{<var>CENTRAL / 2</var>^{\circ}}</code></p>
</div>
</div>
<div id="find-central-on" data-type="find-angle">
<div class="vars">
<var id="GIVEN">CENTRAL / 2</var>
<var id="GIVEN_LABEL">"orange"</var>
<var id="ASKED_LABEL">"blue"</var>
</div>
<div class="solution" data-type="multiple">
<span class="sol"><var>CENTRAL</var></span> degrees
</div>
<div class="hints">
<div>
<p>The pink sides of the triangle are radii, so they must be equal. This means the triangle is isosceles and that the base angles, or the pink and orange angles, are equal.</p>
<div class="graphie" data-update="circle">
style({ stroke: PINK }, function() {
graph.circle.drawRadius( START + CENTRAL );
graph.circle.drawRadius( SUBTENDED_POINT );
});
style({ stroke: PINK }, function() {
graph.circle.drawInscribedArc( START + CENTRAL, SUBTENDED_POINT, START + CENTRAL + 180 );
});
</div>
</div>
<div>
<p>We know that the angles in a triangle sum to 180 degrees.</p>
<div class="graphie" data-update="circle">
style({ stroke: GREEN }, function() {
graph.circle.drawCentralArc( START + CENTRAL, SUBTENDED_POINT );
})
</div>
<p><code>\color{<var>GREEN</var>}{\text{green angle}} + \color{<var>PINK</var>}{\text{pink angle}} + \color{<var>ORANGE</var>}{\text{orange angle}} = 180^{\circ}</code></p>
</div>
<p>The green and blue angles are supplementary.</p>
<p><code>\color{<var>GREEN</var>}{\text{green angle}} + \color{<var>BLUE</var>}{\text{blue angle}} = 180^{\circ}</code></p>
<p><code>\color{<var>BLUE</var>}{\text{blue angle}} = 180^{\circ} - \color{<var>GREEN</var>}{\text{green angle}} </code></p>
<p><code>\color{<var>BLUE</var>}{\text{blue angle}} = 180^{\circ} - \color{<var>GREEN</var>}{\text{<var>180 - CENTRAL</var>}^{\circ}} </code></p>
<p><code>\color{<var>BLUE</var>}{\text{blue angle}} = \color{<var>BLUE</var>}{<var>CENTRAL</var>^{\circ}} </code></p>
</div>
</div>
</div>
</div>
</body>
</html>