Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
226 lines (213 sloc) 12.9 KB
<!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 3</title>
<script src="../khan-exercise.js"></script>
<script>
/**
* Computes arc start and end angles that will guarantee an
* "inner arc" so that the arc is always less than 180 degrees.
*/
function innerArc( start, end ) {
var delta = ( end - start + 360 ) % 360;
if ( delta >= 180 ) {
return {
start: end,
end: start
};
}
return {
start: start,
end: end
};
}
</script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="find-inscribed-outside">
<div class="vars">
<var id="START">randRange( 0, 360 )</var>
<var id="CENTRAL">randRange( 10, 80 ) * 2</var>
<var id="SUBTENDED_POINT">randFromArray([
randRange( START + CENTRAL + 5, START + 180 - 5 ),
randRange( START + CENTRAL + 180 + 5, START + 360 - 5 )
]) % 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 center of the circle is outside the inscribed orange angle. The blue angle is called a central 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>What do we know about the angles formed by the dashed diameter shown above?</p>
<div class="graphie" data-update="circle">
style({stroke: BLUE, "stroke-dasharray": "-"}, function() {
graph.circle.drawChord( SUBTENDED_POINT, SUBTENDED_POINT + 180 );
});
</div>
</div>
<div>
<p>From the previous inscribed angles exercises, we know the following about the green and pink angles.</p>
<p><code>\color{<var>GREEN</var>}{\text{green angle}} = \dfrac{1}{2} \cdot \color{<var>PINK</var>}{\text{pink angle}}</code></p>
<div class="graphie" data-update="circle">
style({stroke: BLUE, fill: BLUE}, function() {
graph.circle.drawPoint( SUBTENDED_POINT + 180 );
});
style({stroke: PINK});
var arc = innerArc( START, ( SUBTENDED_POINT + 180 ) % 360 );
graph.central = graph.circle.drawCentralAngle( arc.start, arc.end, 0.7 );
style({stroke: GREEN});
graph.inscribed = graph.circle.drawInscribedAngle( SUBTENDED_POINT, arc.start, arc.end, 0.7 );
</div>
</div>
<div>
<p>We can see another pair of these special case inscribed and central angles, with the same relationship between green and pink angles.</p>
<div class="graphie" data-update="circle">
graph.central.arc.animate({opacity: 0.4});
graph.central.radii[0].remove();
graph.central.radii[1].remove();
graph.inscribed.arc.animate({opacity: 0.4});
graph.inscribed.chords[0].remove();
graph.inscribed.chords[1].remove();
var arc = innerArc( START + CENTRAL, ( SUBTENDED_POINT + 180 ) % 360 );
style({stroke: PINK});
graph.central = graph.circle.drawCentralAngle( arc.start, arc.end, 0.9 );
style({stroke: GREEN});
graph.inscribed = graph.circle.drawInscribedAngle( SUBTENDED_POINT, arc.start, arc.end, 0.9 );
</div>
</div>
<div>
<p>Looking at the picture, we can see the following is true:</p>
<p><code>\color{<var>GREEN</var>}{\text{small green angle}} + \color{<var>ORANGE</var>}{\text{orange angle}} = \color{<var>GREEN</var>}{\text{big green angle}}</code></p>
<div class="graphie" data-update="circle">
graph.central.arc.animate({opacity: 0.4});
graph.central.radii[0].remove();
graph.central.radii[1].remove();
graph.inscribed.arc.animate({opacity: 0.4});
graph.inscribed.chords[0].remove();
graph.inscribed.chords[1].remove();
</div>
</div>
<div>
<p>Substituting what we know about green and pink angles, we get the following:</p>
<p><code>\dfrac{1}{2} \cdot \color{<var>PINK</var>}{\text{small pink angle}} + \color{<var>ORANGE</var>}{\text{orange angle}} = \dfrac{1}{2} \cdot \color{<var>PINK</var>}{\text{big pink angle}}</code></p>
</div>
<p><code>\color{<var>ORANGE</var>}{\text{orange angle}} = \dfrac{1}{2}( \color{<var>PINK</var>}{\text{big pink angle}} - \color{<var>PINK</var>}{\text{small pink angle}})</code></p>
<div>
<p>We can see from the picture that the following is also true:</p>
<p><code>\color{<var>PINK</var>}{\text{small pink angle}} + \color{<var>BLUE</var>}{\text{blue angle}} = \color{<var>PINK</var>}{\text{big pink angle}}</code></p>
<p><code>\color{<var>BLUE</var>}{\text{blue angle}} = \color{<var>PINK</var>}{\text{big pink angle}} - \color{<var>PINK</var>}{\text{small pink angle}}</code></p>
</div>
<div>
<p>Combining what we know about blue and orange angles:</p>
<p><code>\color{<var>ORANGE</var>}{\text{orange angle}} = \dfrac{1}{2} \cdot \color{<var>BLUE</var>}{\text{blue angle}}</code></p>
</div>
<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" data-type="find-inscribed-outside">
<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>What do we know about the angles formed by the dashed diameter shown above?</p>
<div class="graphie" data-update="circle">
style({stroke: BLUE, "stroke-dasharray": "-"}, function() {
graph.circle.drawChord( SUBTENDED_POINT, SUBTENDED_POINT + 180 );
});
</div>
</div>
<div>
<p>From the previous inscribed angles exercises, we know the following about the green and pink angles.</p>
<p><code>\color{<var>PINK</var>}{\text{pink angle}} = 2 \cdot \color{<var>GREEN</var>}{\text{green angle}}</code></p>
<div class="graphie" data-update="circle">
style({stroke: BLUE, fill: BLUE}, function() {
graph.circle.drawPoint( SUBTENDED_POINT + 180 );
});
style({stroke: PINK});
var arc = innerArc( START, ( SUBTENDED_POINT + 180 ) % 360 );
graph.central = graph.circle.drawCentralAngle( arc.start, arc.end, 0.7 );
style({stroke: GREEN});
graph.inscribed = graph.circle.drawInscribedAngle( SUBTENDED_POINT, arc.start, arc.end, 0.7 );
</div>
</div>
<div>
<p>We can see another pair of these special case inscribed and central angles, with the same relationship between green and pink angles.</p>
<div class="graphie" data-update="circle">
graph.central.arc.animate({opacity: 0.4});
graph.central.radii[0].remove();
graph.central.radii[1].remove();
graph.inscribed.arc.animate({opacity: 0.4});
graph.inscribed.chords[0].remove();
graph.inscribed.chords[1].remove();
var arc = innerArc( START + CENTRAL, ( SUBTENDED_POINT + 180 ) % 360 );
style({stroke: PINK});
graph.central = graph.circle.drawCentralAngle( arc.start, arc.end, 0.9 );
style({stroke: GREEN});
graph.inscribed = graph.circle.drawInscribedAngle( SUBTENDED_POINT, arc.start, arc.end, 0.9 );
</div>
</div>
<div>
<p>Looking at the picture, we can see the following is true:</p>
<p><code>\color{<var>PINK</var>}{\text{small pink angle}} + \color{<var>BLUE</var>}{\text{blue angle}} = \color{<var>PINK</var>}{\text{big pink angle}}</code></p>
<div class="graphie" data-update="circle">
graph.central.arc.animate({opacity: 0.4});
graph.central.radii[0].remove();
graph.central.radii[1].remove();
graph.inscribed.arc.animate({opacity: 0.4});
graph.inscribed.chords[0].remove();
graph.inscribed.chords[1].remove();
</div>
</div>
<div>
<p>Substituting what we know about green and pink angles, we get the following:</p>
<p><code>2 \cdot \color{<var>GREEN</var>}{\text{small green angle}} + \color{<var>BLUE</var>}{\text{blue angle}} = 2 \cdot \color{<var>GREEN</var>}{\text{big green angle}}</code></p>
</div>
<p><code>\color{<var>BLUE</var>}{\text{blue angle}} = 2( \color{<var>GREEN</var>}{\text{big green angle}} - \color{<var>GREEN</var>}{\text{small green angle}})</code></p>
<div>
<p>We can see from the picture that the following is also true:</p>
<p><code>\color{<var>GREEN</var>}{\text{small green angle}} + \color{<var>ORANGE</var>}{\text{orange angle}} = \color{<var>GREEN</var>}{\text{big green angle}}</code></p>
<p><code>\color{<var>ORANGE</var>}{\text{orange angle}} = \color{<var>GREEN</var>}{\text{big green angle}} - \color{<var>GREEN</var>}{\text{small green angle}}</code></p>
</div>
<div>
<p>Combining what we know about blue and orange angles:</p>
<p><code>\color{<var>BLUE</var>}{\text{blue angle}} = 2 \cdot \color{<var>ORANGE</var>}{\text{orange angle}}</code></p>
</div>
<p><code>\color{<var>BLUE</var>}{\text{blue angle}} = 2 \cdot \color{<var>ORANGE</var>}{<var>CENTRAL / 2</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>
Something went wrong with that request. Please try again.