Permalink
Fetching contributors…
Cannot retrieve contributors at this time
92 lines (84 sloc) 4.37 KB
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers math-format">
<head>
<meta charset="UTF-8">
<title>Complex number polar form intuition</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div>
<div class="vars" data-ensure="!(ANGLE === 0 &amp;&amp; RADIUS === 1)">
<var id="DENOMINATOR">12</var>
<var id="ANGLE">randRange( 0, DENOMINATOR - 1 )</var> <!-- the angle of the complex number is ANGLE * (2 * DENOMINATOR) pi -->
<var id="RADIUS">randRange( 1, 9 )</var>
<var id="REAL">cos( ANGLE * PI * 2 / DENOMINATOR ) * RADIUS</var>
<var id="IMAG">sin( ANGLE * PI * 2 / DENOMINATOR ) * RADIUS</var>
<var id="REP">complexNumber( roundTo( 2, REAL ), roundTo( 2, IMAG ) )</var>
</div>
<p class="question">
Adjust the angle and radius of the <span class="hint_orange">orange</span> plotted complex number
to match the <span class="hint_blue">blue</span> plotted complex number <code><var>REP</var></code>.
</p>
<p>
How do these numbers affect the complex number they represent?
</p>
<p class="render-answer-area-here"></p>
<div class="graphie">
graphInit({
range: [[-10, 10], [-10, 10]],
scale: 20,
tickStep: 1,
axisArrows: "&lt;-&gt;"
});
drawComplexChart( 10, DENOMINATOR );
circle( [REAL, IMAG], 1 / 4, {
fill: KhanUtil.BLUE,
stroke: "none"
});
graph.currComplexPolar = new ComplexPolarForm( DENOMINATOR, 10 );
redrawComplexPolarForm();
</div>
<div class="solution" data-type="custom">
<div class="instruction" style="width: 180px;">
<div>
<div style="float: left;">Radius: <span id="current-radius"><code>1</code></span></div>
<div style="float: right; margin-bottom: 4px;">
<input class="simple-button mini-button" onclick="updateComplexPolarForm(0, -1)" type="button" value="-">
<input class="simple-button mini-button" onclick="updateComplexPolarForm(0, 1)" type="button" value="+">
</div>
</div>
<div style="clear: both;">
<div style="float: left;">Angle: <span id="current-angle"><code>0</code></span></div>
<div style="float: right; margin-bottom: 14px;">
<input class="simple-button mini-button" onclick="updateComplexPolarForm(-1, 0)" type="button" value="-">
<input class="simple-button mini-button" onclick="updateComplexPolarForm(1, 0)" type="button" value="+">
</div>
</div>
<div id="number-label" style="background: #eee; padding: 5px; text-align: center;">1</div>
</div>
<div class="guess">[
graph.currComplexPolar.getAngleNumerator(),
graph.currComplexPolar.getRadius()
]</div>
<div class="validator-function">
var angle = guess[0];
var radius = guess[1];
if (angle === 0 &amp;&amp; radius === 1) {
return "";
}
return angle === ANGLE &amp;&amp; radius === RADIUS;
</div>
<div class="show-guess">
redrawComplexPolarForm(guess[0], guess[1]);
</div>
<div class="show-guess-solutionarea">
redrawComplexPolarForm(guess[0], guess[1]);
</div>
</div>
</div>
</div>
</div>
</body>
</html>