This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
complex_number_polar_form_intuition.html
105 lines (96 loc) · 4.42 KB
/
complex_number_polar_form_intuition.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html data-require="math graphie graphie-helpers math-format">
<head>
<meta charset="UTF-8" />
<title>Complex number polar form intuition</title>
<script src="../khan-exercise.js"></script>
<style>
.info-box .mini-button {
margin: 0px 10px 0px 0px;
padding: 0px 5px;
width: 25px;
height: 18px;
}
#number-label {
clear: both;
margin: 0px 0px;
padding: 14px 0px 0px 0px;
}
</style>
</head>
<body>
<div class="exercise">
<div class="problems">
<div>
<div class="vars">
<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, 10 )</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>
<div class="graphie">
graphInit({
range: [[-10, 10], [-10, 10]],
scale: 20,
tickStep: 1,
axisArrows: "<->"
});
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">
<div>
<div style="float: left;">Radius: <span id="current-radius"><code>1</code></span></div>
<div style="float: right;">
<input type="button" class="simple-button mini-button" value="-" onclick="updateComplexPolarForm(0, -1)" />
<input type="button" class="simple-button mini-button" value="+" onclick="updateComplexPolarForm(0, 1)" />
</div>
</div>
<div style="clear: both;">
<div style="float: left;">Angle: <span id="current-angle"><code>0</code></span></div>
<div style="float: right;">
<input type="button" class="simple-button mini-button" value="-" onclick="updateComplexPolarForm(-1, 0)" />
<input type="button" class="simple-button mini-button" value="+" onclick="updateComplexPolarForm(1, 0)" />
</div>
</div>
<div id="number-label">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 && radius === 1) {
return "";
}
return angle === ANGLE && 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>