Permalink
Fetching contributors…
Cannot retrieve contributors at this time
159 lines (153 sloc) 8.1 KB
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers graphie-geometry math-format">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quadrilateral angles</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script>
</script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="trapezoid">
<div class="vars">
<var id="ANGLES">randomQuadAngles.trapezoid()</var>
<var id="ANSWER_POS">randRange( 0, 3 )</var>
<var id="SHOWN_POS">ANSWER_POS % 2 === 0 ? ( ANSWER_POS + 3 ) % 4 : ( ANSWER_POS + 1 ) % 4</var>
<var id="ANG_LABELS">
function() {
var a = ["", "", "", ""];
a[ANSWER_POS] = "x";
a[SHOWN_POS] = ANGLES[SHOWN_POS] + "^{\\circ}";
return a;
}()
</var>
</div>
<div class="problem">
What is the value of the angle marked with <code>x</code>?
</div>
<div class="render-answer-area-here"></div>
<div class="question">
<div class="graphie">
init({
range: [ [-1, 12 ], [ -8, -1 ] ]
})
var q = new Quadrilateral([2, -7], ANGLES, randRange(0, 1) + 0.5, "");
q.boxOut( [ [ [ -0.5, -10 ], [ -0.5, 10 ] ] ], [ 0.1, 0 ] );
q.boxOut( [ [ [ 11.5, -10 ], [ 11.5, 10 ] ] ], [ -0.1, 0 ] );
q.draw();
q.labels = {
"angles": ANG_LABELS,
"sides": $.map($.map(q.sides, lineLength), function(x) {
return localeToFixed(x * 4, 1);
})
};
q.drawLabels();
ParallelLineMarkers((q.points[0][0] + q.points[3][0]) / 2, q.points[0][1]);
ParallelLineMarkers((q.points[1][0] + q.points[2][0]) / 2, q.points[1][1]);
</div>
</div>
<div class="solution" data-type="multiple">
<span class="sol" data-forms="integer"><var>ANGLES[ ANSWER_POS ]</var></span><code>\Large{{}^\circ}</code>
</div>
<div class="hints">
<p>This figure is a trapezoid.</p>
<p>The angles of a trapezoid side are supplementary.</p>
<p><code><var>ANGLES[SHOWN_POS]</var>^\circ + x = 180^\circ</code></p>
<p><code>x = 180^\circ - <var>ANGLES[SHOWN_POS]</var>^\circ</code></p>
<p><code>x = <var>ANGLES[ANSWER_POS]</var>^\circ</code></p>
</div>
</div>
<div id="isoscelesTrap1" data-type="trapezoid">
<div class="vars">
<var id="ANGLES" data-ensure="abs(ANGLES[0] - 90) > 5">randomQuadAngles.isoscelesTrapezoid()</var>
</div>
</div>
<div id="isoscelesTrap2" data-type="trapezoid">
<div class="vars">
<var id="ANGLES" data-ensure="abs(ANGLES[0] - 90) > 5">randomQuadAngles.isoscelesTrapezoid()</var>
<var id="SHOWN_POS">ANSWER_POS % 2 === 0 ? ( ANSWER_POS + 1 ) : ( ANSWER_POS - 1 )</var>
</div>
<div class="hints">
<p>This figure is an isosceles trapezoid.</p>
<p>The angles of bases of an isosceles trapezoid are equal.</p>
<p>Therefore, the angle <code>x</code> is also <code><var>ANGLES[SHOWN_POS]</var>^\circ</code></p>
</div>
</div>
<div id="parallelogram1" data-type="trapezoid">
<div class="vars">
<var id="ANGLES" data-ensure="abs(ANGLES[0] - 90) > 5">randomQuadAngles.parallelogram()</var>
<var id="SHOWN_POS">( ANSWER_POS + 2 ) % 4</var>
</div>
<div class="hints">
<p>This quadrilateral is a parallelogram.</p>
<p>Opposite angles of a parallelogram are equal.</p>
<p>Therefore, the angle <code>x</code> is also <code><var>ANGLES[SHOWN_POS]</var>^\circ</code></p>
</div>
</div>
<div id="parallelogram2" data-type="trapezoid">
<div class="vars">
<var id="ANGLES" data-ensure="abs(ANGLES[0] - 90) > 5">randomQuadAngles.parallelogram()</var>
<var id="SHOWN_POS">ANSWER_POS % 2 === 0 ? ( ANSWER_POS + 1 ) : ( ANSWER_POS - 1 )</var>
</div>
<div class="hints">
<p>This quadrilateral is a parallelogram.</p>
<p>Adjacent angles of a parallelogram are supplementary.</p>
<p><code><var>ANGLES[SHOWN_POS]</var>^\circ + x = 180^\circ</code></p>
<p><code>x = 180^\circ - <var>ANGLES[SHOWN_POS]</var>^\circ</code></p>
<p><code>x = <var>ANGLES[ANSWER_POS]</var>^\circ</code></p>
</div>
</div>
<div id="rhombus1" data-type="parallelogram1">
<div class="vars">
<var id="ANGLES">randomQuadAngles.rhombus()</var>
</div>
<div class="question">
<div class="graphie">
init({
range: [ [-1, 12 ], [ -8, -1 ] ]
})
var q = new Quadrilateral( [ 2, -7 ], ANGLES, 1, "" );
q.boxOut( [ [ [ -0.5, -10 ], [ -0.5, 10 ] ] ], [ 0.1, 0 ] );
q.boxOut( [ [ [ 11.5, -10 ], [ 11.5, 10 ] ] ], [ -0.1, 0 ] );
q.draw();
q.labels = { "angles" : ANG_LABELS, "sides" : $.map( $.map( q.sides, lineLength ), function( x ){ return localeToFixed(x, 1); } ) };
q.drawLabels();
</div>
</div>
<div class="hints">
<p>This quadrilateral is a rhombus, because it has all sides equal.</p>
<p>Opposite angles of a rhombus are equal.</p>
<p>Therefore, the angle <code>x</code> is also <code><var>ANGLES[SHOWN_POS]</var>^\circ</code></p>
</div>
</div>
<div id="rhombus2" data-type="rhombus1">
<div class="vars">
<var id="ANGLES">randomQuadAngles.rhombus()</var>
<var id="SHOWN_POS">ANSWER_POS % 2 === 0 ? ( ANSWER_POS + 1 ) : ( ANSWER_POS - 1 )</var>
</div>
<div class="hints">
<p>This quadrilateral is a rhombus, because it has all sides equal.</p>
<p>Adjacent angles of a rhombus are supplementary.</p>
<p><code><var>ANGLES[SHOWN_POS]</var>^\circ + x = 180^\circ</code></p>
<p><code>x = 180^\circ - <var>ANGLES[SHOWN_POS]</var></code></p>
<p><code>x = <var>ANGLES[ANSWER_POS]</var>^\circ</code></p>
</div>
</div>
<div id="kite" data-type="rhombus1">
<div class="vars">
<var id="ANGLES">randomQuadAngles.kite()</var>
<var id="ANSWER_POS">randFromArray( [ 1, 3 ] )</var>
<var id="SHOWN_POS">( ANSWER_POS + 2 ) % 4</var>
</div>
<div class="hints">
<p>This quadrilateral is a kite, because it has two pairs of adjacent sides equal.</p>
<p>Angles between the non-equal sides of a kite are equal.</p>
<p>Therefore, the angle <code>x</code> is also <code><var>ANGLES[SHOWN_POS]</var>^\circ</code></p>
</div>
</div>
</div>
</div>
</body>
</html>