Skip to content

Commit

Permalink
Add in same variation to inscribed angles 2+3
Browse files Browse the repository at this point in the history 
This does the same changes as was done to inscribed_angles_1 where the
inscribed angle is given, and the central angle is asked for.

There is still some code duplication here that can be cleaned up.
  • Loading branch information
@benkomalo
benkomalo committed Nov 7, 2011
1 parent 7675a65 commit 9e8485d
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 35 deletions.
2 changes: 1 addition & 1 deletion exercises/inscribed_angles_1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
<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>BLUE</var>}{<var>CENTRAL / 2</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">
Expand Down
92 changes: 76 additions & 16 deletions exercises/inscribed_angles_2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,18 @@
<body>
<div class="exercise">
<div class="problems">
<div id="find-inscribed-inside">
<div id="find-angle">
<div class="vars">
<var id="START">randRange( 0, 360 )</var>
<var id="MEASURE">randRange( 10, 80 ) * 2</var>
<var id="INSCRIBED">randRange( START + 180 + 5, START + MEASURE + 180 - 5 ) % 360</var>
<var id="CENTRAL">randRange( 10, 80 ) * 2</var>
<var id="SUBTENDED_POINT">randRange( START + 180 + 5, START + CENTRAL + 180 - 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 blue angle measures <var>MEASURE</var> degrees, what does the orange angle measure?</p>
<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 inside the inscribed orange angle. The blue angle is called a central angle.</p>
<div class="graphie" id="circle">
init({
Expand All @@ -27,24 +31,24 @@
style({ stroke: BLUE, fill: BLUE });
graph.circle.drawCenter();
graph.circle.drawPoint( START );
graph.circle.drawPoint( START + MEASURE );
graph.circle.drawPoint( START + CENTRAL );

graph.central = graph.circle.drawCentralAngle( START, START + MEASURE );
graph.central = graph.circle.drawCentralAngle( START, START + CENTRAL );

style({ stroke: ORANGE, fill: ORANGE });
graph.inscribed = graph.circle.drawInscribedAngle( INSCRIBED, START, START + MEASURE );
graph.inscribed = graph.circle.drawInscribedAngle( SUBTENDED_POINT, START, START + CENTRAL );

graph.circle.drawMovablePoint( INSCRIBED, START + MEASURE, START );
graph.circle.drawMovablePoint( SUBTENDED_POINT, START + CENTRAL, START );
</div>
<div class="solution" data-type="multiple">
<span class="sol"><var>MEASURE / 2</var></span> degrees
<span class="sol"><var>CENTRAL / 2</var></span> degrees
</div>
<div class="hints">
<div>
<p>What do we know about the sub-angles formed by the dashed diameter shown above?</p>
<div class="graphie" data-update="circle">
style({stroke: BLUE, "stroke-dasharray": "-"}, function() {
graph.circle.drawChord( INSCRIBED, INSCRIBED + 180 );
graph.circle.drawChord( SUBTENDED_POINT, SUBTENDED_POINT + 180 );
});
</div>
</div>
Expand All @@ -55,9 +59,9 @@
graph.inscribed.arc.animate({opacity: 0.4});
graph.central.arc.animate({opacity: 0.4});
style({stroke: BLUE});
graph.centralSub = graph.circle.drawCentralArc( INSCRIBED + 180, START + MEASURE, 0.7 );
graph.centralSub = graph.circle.drawCentralArc( SUBTENDED_POINT + 180, START + CENTRAL, 0.7 );
style({stroke: ORANGE});
graph.inscribedSub = graph.circle.drawInscribedArc( INSCRIBED, INSCRIBED + 180, START + MEASURE, 0.7 );
graph.inscribedSub = graph.circle.drawInscribedArc( SUBTENDED_POINT, SUBTENDED_POINT + 180, START + CENTRAL, 0.7 );
</div>
</div>
<div>
Expand All @@ -66,9 +70,9 @@
graph.centralSub.remove();
graph.inscribedSub.remove();
style({stroke: BLUE});
graph.centralSub = graph.circle.drawCentralArc( START, INSCRIBED + 180, 0.7 );
graph.centralSub = graph.circle.drawCentralArc( START, SUBTENDED_POINT + 180, 0.7 );
style({stroke: ORANGE});
graph.inscribedSub = graph.circle.drawInscribedArc( INSCRIBED, START, INSCRIBED + 180, 0.7 );
graph.inscribedSub = graph.circle.drawInscribedArc( SUBTENDED_POINT, START, SUBTENDED_POINT + 180, 0.7 );
</div>
</div>
<div>
Expand All @@ -81,10 +85,66 @@
</div>
</div>
<p><code>\color{<var>ORANGE</var>}{\text{orange angle}} = \dfrac{1}{2} \cdot \color{<var>BLUE</var>}{\text{blue angle}}</code></p>
<p><code>\color{<var>ORANGE</var>}{\text{orange angle}} = \dfrac{1}{2} \cdot \color{<var>BLUE</var>}{<var>MEASURE</var>^{\circ}}</code></p>
<p><code>\color{<var>ORANGE</var>}{\text{orange angle}} = \color{<var>BLUE</var>}{<var>MEASURE / 2</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>What do we know about the sub-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>If we only look at the sub-angles drawn now, we see that this is the special case from the previous inscribed angles exercise!</p>
<p>We know that the orange sub-angle is one half the measure of the blue sub-angle.</p>
<div class="graphie" data-update="circle">
graph.inscribed.arc.animate({opacity: 0.4});
graph.central.arc.animate({opacity: 0.4});
style({stroke: BLUE});
graph.centralSub = graph.circle.drawCentralArc( SUBTENDED_POINT + 180, START + CENTRAL, 0.7 );
style({stroke: ORANGE});
graph.inscribedSub = graph.circle.drawInscribedArc( SUBTENDED_POINT, SUBTENDED_POINT + 180, START + CENTRAL, 0.7 );
</div>
</div>
<div>
<p>Likewise, the other orange sub-angle is one half the measure of the other blue sub-angle, as shown.</p>
<div class="graphie" data-update="circle">
graph.centralSub.remove();
graph.inscribedSub.remove();
style({stroke: BLUE});
graph.centralSub = graph.circle.drawCentralArc( START, SUBTENDED_POINT + 180, 0.7 );
style({stroke: ORANGE});
graph.inscribedSub = graph.circle.drawInscribedArc( SUBTENDED_POINT, START, SUBTENDED_POINT + 180, 0.7 );
</div>
</div>
<div>
<p>If both blue sub-angles are twice both blue sub-angles, then we know that the blue is twice the orange angle.</p>
<div class="graphie" data-update="circle">
graph.centralSub.remove();
graph.inscribedSub.remove();
graph.inscribed.arc.animate({opacity: 1.0});
graph.central.arc.animate({opacity: 1.0});
</div>
</div>
<p><code>\color{<var>BLUE</var>}{\text{blue angle}} = 2 \cdot \color{<var>ORANGE</var>}{\text{orange angle}}</code></p>
<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>
Expand Down
127 changes: 109 additions & 18 deletions exercises/inscribed_angles_3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,18 @@
<div id="find-inscribed-outside">
<div class="vars">
<var id="START">randRange( 0, 360 )</var>
<var id="MEASURE">randRange( 10, 80 ) * 2</var>
<var id="INSCRIBED">randFromArray( [ randRange( START + MEASURE + 5, START + 180 - 5 ), randRange( START + MEASURE + 180 + 5, START + 360 - 5 ) ] ) % 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 blue angle measures <var>MEASURE</var> degrees, what does the orange angle measure?</p>
<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({
Expand All @@ -27,24 +34,24 @@
style({ stroke: BLUE, fill: BLUE });
graph.circle.drawCenter();
graph.circle.drawPoint( START );
graph.circle.drawPoint( START + MEASURE );
graph.circle.drawPoint( START + CENTRAL );

graph.circle.drawCentralAngle( START, START + MEASURE );
graph.circle.drawCentralAngle( START, START + CENTRAL );

style({ stroke: ORANGE, fill: ORANGE });
graph.circle.drawInscribedAngle( INSCRIBED, START, START + MEASURE );
graph.circle.drawInscribedAngle( SUBTENDED_POINT, START, START + CENTRAL );

graph.circle.drawMovablePoint( INSCRIBED, START + MEASURE, START );
graph.circle.drawMovablePoint( SUBTENDED_POINT, START + CENTRAL, START );
</div>
<div class="solution" data-type="multiple">
<span class="sol"><var>MEASURE / 2</var></span> degrees
<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( INSCRIBED, INSCRIBED + 180 );
graph.circle.drawChord( SUBTENDED_POINT, SUBTENDED_POINT + 180 );
});
</div>
</div>
Expand All @@ -53,15 +60,15 @@
<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( INSCRIBED + 180 );
graph.circle.drawPoint( SUBTENDED_POINT + 180 );
});
style({stroke: PINK});
var start = min( ( INSCRIBED + 180 ) % 360, START ),
end = max( ( INSCRIBED + 180 ) % 360, START );
var start = min( ( SUBTENDED_POINT + 180 ) % 360, START ),
end = max( ( SUBTENDED_POINT + 180 ) % 360, START );

graph.central = graph.circle.drawCentralAngle( start, end, 0.7 );
style({stroke: GREEN});
graph.inscribed = graph.circle.drawInscribedAngle( INSCRIBED, start, end, 0.7 );
graph.inscribed = graph.circle.drawInscribedAngle( SUBTENDED_POINT, start, end, 0.7 );
</div>
</div>
<div>
Expand All @@ -74,12 +81,13 @@
graph.inscribed.chords[0].remove();
graph.inscribed.chords[1].remove();

var start = min( ( INSCRIBED + 180 ) % 360, ( START + MEASURE ) % 360 ),
end = max( ( INSCRIBED + 180 ) % 360, ( START + MEASURE ) % 360 );
var start = min( ( SUBTENDED_POINT + 180 ) % 360, ( START + CENTRAL ) % 360 ),
end = max( ( SUBTENDED_POINT + 180 ) % 360, ( START + CENTRAL ) % 360 );

style({stroke: PINK});
graph.central = graph.circle.drawCentralAngle( start, end, 0.9 );
style({stroke: GREEN});
graph.inscribed = graph.circle.drawInscribedAngle( INSCRIBED, start, end, 0.9 );
graph.inscribed = graph.circle.drawInscribedAngle( SUBTENDED_POINT, start, end, 0.9 );
</div>
</div>
<div>
Expand Down Expand Up @@ -108,8 +116,91 @@
<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>MEASURE</var>^{\circ}}</code></p>
<p><code>\color{<var>ORANGE</var>}{\text{orange angle}} = \color{<var>BLUE</var>}{<var>MEASURE / 2</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" 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 start = min( ( SUBTENDED_POINT + 180 ) % 360, START ),
end = max( ( SUBTENDED_POINT + 180 ) % 360, START );

graph.central = graph.circle.drawCentralAngle( start, end, 0.7 );
style({stroke: GREEN});
graph.inscribed = graph.circle.drawInscribedAngle( SUBTENDED_POINT, start, 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 start = min( ( SUBTENDED_POINT + 180 ) % 360, ( START + CENTRAL ) % 360 ),
end = max( ( SUBTENDED_POINT + 180 ) % 360, ( START + CENTRAL ) % 360 );

style({stroke: PINK});
graph.central = graph.circle.drawCentralAngle( start, end, 0.9 );
style({stroke: GREEN});
graph.inscribed = graph.circle.drawInscribedAngle( SUBTENDED_POINT, start, 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>ORNAGE</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>
Expand Down

0 comments on commit 9e8485d

Please sign in to comment.