Permalink
Fetching contributors…
Cannot retrieve contributors at this time
137 lines (118 sloc) 6.32 KB
<!DOCTYPE html>
<html data-require="math math-format graphie unit-circle">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Unit circle</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="degrees">
<div class="vars">
<var id="DEGREES">true</var>
<var id="ANGLE">randRangeNonZero(-90, 90) * 5</var>
<var id="ANGLE_RADIANS">ANGLE * PI / 180</var>
<var id="PRETTY_ANGLE">ANGLE + "^{\\circ}"</var>
<var id="FN">randFromArray( [ "cos", "sin" ] )</var>
<var id="FNNAME">{ "cos": i18n._("cosine"), "sin": i18n._("sine")}[FN]</var>
<var id="COORD">{ "cos": "x", "sin": "y"}[FN]</var>
<var id="SOLUTION">roundTo(3, { "cos": Math.cos(ANGLE * (Math.PI/180)), "sin": Math.sin(ANGLE * (Math.PI/180)) }[FN])
</var>
</div>
<div class="question">
<p>
<code>\<var>FN</var>\left(<var>PRETTY_ANGLE</var>\right) = \text{?}</code>
<p class="render-answer-area-here"></p>
<b>Move the orange point around the unit circle to the angle
<code><var>PRETTY_ANGLE</var></code>
<span data-if="DEGREES"></span><span data-else="">radians</span>
to find the <var>FNNAME</var> value.</b><br>
<em>Round to the nearest thousandth.</em>
</p>
</div>
<div class="problem">
<div class="graphie" id="unitcircle">
initUnitCircle(DEGREES);
</div>
</div>
<div class="solution" data-type="multiple">
<div class="sol" data-inexact="" data-max-error="0.001"><var>SOLUTION</var></div>
<div class="sol" data-type="custom">
<div class="instruction"></div>
<div class="guess">angle</div>
<div class="validator-function">
if (abs(guess) &lt; 0.001) {
return "Move the orange point around the unit circle to the correct position.";
}
// Verify that the angles match
if (abs(guess - ANGLE_RADIANS) &lt; 0.001) {
return true;
}
// Convert guess to an angle between 0 and 2 * PI for comparison
var revolutions = floor(guess / (2 * PI));
var modified_guess = guess - revolutions * 2 * PI;
// Convert answer to an angle between 0 and 2 * PI
revolutions = floor(ANGLE_RADIANS / (2 * PI));
var modified_angle = ANGLE_RADIANS - revolutions * 2 * PI;
if (abs(modified_angle - modified_guess) &lt; 0.001) {
return "The orange point is in the correct position, but must measure the correct angle.";
} else {
return false;
}
</div>
<div class="show-guess">
KhanUtil.setAngle( guess );
</div>
</div>
</div>
<div class="hints">
<p>
To find the <var>FNNAME</var> using the unit circle, first find the angle.
Drag the orange point around the circle until <code><var>PRETTY_ANGLE</var></code> is selected.
</p>
<div>
<p>
The correct angle is selected. Remember, the <var>FNNAME</var> of an angle is represented by the
<code><var>COORD</var></code> coordinate of its corresponding point on the unit circle.
</p>
<div class="graphie" data-update="unitcircle">
goToAngle( ANGLE );
</div>
</div>
<div>
<p>
The <code><var>COORD</var></code> coordinate of the point is <code>\pink{<var>SOLUTION</var>}</code>,
so <code>\<var>FN</var>\left(<var>PRETTY_ANGLE</var>\right) = <var>SOLUTION</var></code>.
</p>
<div class="graphie" data-update="unitcircle">
goToAngle(ANGLE);
showCoordinates(ANGLE, COORD);
</div>
</div>
</div>
</div>
<div id="radians" data-type="degrees">
<div class="vars">
<var id="DEGREES">false</var>
<var id="ANGLE">randFromArray([
-6*PI/2, -5*PI/2, -7*PI/3, -9*PI/4,
-2*PI, -11*PI/6, -7*PI/4, -5*PI/3, -3*PI/2, -4*PI/3, -5*PI/4, -7*PI/6,
-PI, -5*PI/6, -3*PI/4, -2*PI/3, -PI/2, -PI/3, -PI/4, -PI/6, -PI/12,
PI/12, PI/6, PI/4, PI/3, PI/2, 2*PI/3, 3*PI/4, 5*PI/6, PI,
7*PI/6, 5*PI/4, 4*PI/3, 3*PI/2, 5*PI/3, 7*PI/4, 11*PI/6, 2*PI,
9*PI/4, 7*PI/3, 5*PI/2, 6*PI/2
])</var>
<var id="ANGLE_RADIANS">ANGLE</var>
<var id="PRETTY_ANGLE">piFraction(ANGLE, false, 0.001, true)</var>
<var id="FN">randFromArray( [ "cos", "sin" ] )</var>
<var id="FNNAME">{ "cos": i18n._("cosine"), "sin": i18n._("sine")}[FN]</var>
<var id="COORD">{ "cos": "x", "sin": "y"}[FN]</var>
<var id="SOLUTION">roundTo(3, { "cos": Math.cos(ANGLE), "sin": Math.sin(ANGLE) }[FN])
</var>
</div>
</div>
</div>
</div>
</body>
</html>