Permalink
Browse files

Fix a bunch of things

Reviewers: emily

Reviewed By: emily

Differential Revision: http://phabricator.khanacademy.org/D904
  • Loading branch information...
1 parent 0ced284 commit 9de7cb73b16bda36e4999239a156fb8f29a08b37 @beneater beneater committed Nov 14, 2012
@@ -4,6 +4,11 @@
<meta charset="UTF-8" />
<title>Adding and subtracting complex numbers</title>
<script src="../khan-exercise.js"></script>
+ <style type="text/css">
+ #solutionarea input[type="text"] {
+ width: 50px
+ }
+ </style>
</head>
<body>
<div class="exercise">
@@ -54,8 +59,21 @@
(<var>A_REP_COLORED</var>) <var>OPERATOR</var> (<var>B_REP_COLORED</var>)
</code>
</p>
- <div class="solution" data-type="complexNumberSeparate">
- [ <var>ANSWER_REAL</var>, <var>ANSWER_IMAG</var> ]
+ <div class="solution" data-type="multiple">
+ <span class="sol" data-fallback="0" data-inexact data-max-error="0.01">
+ <var>ANSWER_REAL</var>
+ </span>
+ <code>+</code>
+ <span class="sol" data-fallback="0" data-inexact data-max-error="0.01">
+ <var>ANSWER_IMAG</var>
+ </span>
+ <code>i</code>
+ <div class="example">
+ Two numbers for both the real and imaginary parts
+ </div>
+ <div class="example">
+ Example: 2 + 3<code>i</code>
+ </div>
</div>
<div class="hints">
<p>
@@ -78,8 +96,7 @@
which equals <code><var>ANSWER_IMAG</var></code>.
</p>
<p>
- The result is <code><var>complexNumber(ANSWER_REAL, ANSWER_IMAG)</var></code>; its real component is <code><var>ANSWER_REAL</var></code>
- and its complex component is <code><var>ANSWER_IMAG</var></code>.
+ The result is <code><var>complexNumber(ANSWER_REAL, ANSWER_IMAG)</var></code>.
</p>
</div>
</div>
@@ -6,8 +6,16 @@
<script src="../khan-exercise.js"></script>
<style>
.info-box .mini-button {
+ margin: 0px 10px 0px 0px;
padding: 0px 5px;
- width: 20px;
+ width: 25px;
+ height: 18px;
+ }
+
+ #number-label {
+ clear: both;
+ margin: 0px 0px;
+ padding: 14px 0px 0px 0px;
}
</style>
</head>
@@ -47,10 +55,48 @@
});
graph.currComplexPolar = new ComplexPolarForm( DENOMINATOR, 10 );
+
+ redrawComplexPolarForm();
</div>
- <div class="solution" data-type="complexNumberPolarForm">
- [ <var>ANGLE</var>, <var>RADIUS</var> ]
+ <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 &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>
@@ -4,6 +4,11 @@
<meta charset="UTF-8" />
<title>Dividing complex numbers</title>
<script src="../khan-exercise.js"></script>
+ <style type="text/css">
+ #solutionarea input[type="text"] {
+ width: 50px
+ }
+ </style>
</head>
<body>
<div class="exercise">
@@ -42,8 +47,21 @@
<p>
<code>\qquad \dfrac{<var>A_REP_COLORED</var>}{<var>B_REP_COLORED</var>}</code>
</p>
- <div class="solution" data-type="complexNumberSeparate">
- [ <var>ANSWER_REAL_UNROUNDED</var>, <var>ANSWER_IMAG_UNROUNDED</var> ]
+ <div class="solution" data-type="multiple">
+ <span class="sol" data-fallback="0" data-inexact data-max-error="0.01">
+ <var>ANSWER_REAL_UNROUNDED</var>
+ </span>
+ <code>+</code>
+ <span class="sol" data-fallback="0" data-inexact data-max-error="0.01">
+ <var>ANSWER_IMAG_UNROUNDED</var>
+ </span>
+ <code>i</code>
+ <div class="example">
+ Two numbers for both the real and imaginary parts
+ </div>
+ <div class="example">
+ Example: 2 + 3<code>i</code>
+ </div>
</div>
<div class="hints">
<p>
@@ -118,14 +136,6 @@
<var>ANSWER</var>
</code>
</div>
- <div>
- <p>
- The real part of the result is <code><var>REAL_FRACTION</var></code>, which is (rounded to 2 decimal places) <code><var>ANSWER_REAL</var></code>.
- </p>
- <p>
- The imaginary part of the result is <code><var>IMAG_FRACTION</var></code>, which is (rounded to 2 decimal places) <code><var>ANSWER_IMAG</var></code>.
- </p>
- </div>
</div>
</div>
</div>
@@ -200,12 +200,8 @@
graph.update();
</div>
</div>
- <div class="sol" data-type="set">
- <p class="input-format">
- <label><span class="checkbox">POINT_1_SOLUTION</span><code>(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> is a solution</label><br />
- <label><span class="checkbox">POINT_2_SOLUTION</span><code>(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> is a solution</label>
- </p>
- </div>
+ <div><label><span class="sol" data-type="checkbox"><var>POINT_1_SOLUTION</var></span><code>(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> is a solution</label></div>
+ <div><label><span class="sol" data-type="checkbox"><var>POINT_2_SOLUTION</var></span><code>(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> is a solution</label></div>
<div class="example">graph the inequality</div>
<div class="example">make sure the correct side is shaded</div>
<div class="example">make sure the line is correctly shown as solid or dashed</div>
@@ -320,14 +320,6 @@
graph.update();
</div>
</div>
- <!--
- <div class="sol" data-type="set">
- <p class="input-format">
- <label><span class="checkbox">POINT_1_SOLUTION</span><code>(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> is a solution</label><br />
- <label><span class="checkbox">POINT_2_SOLUTION</span><code>(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> is a solution</label>
- </p>
- </div>
- -->
<div class="example">graph the inequalities</div>
<div class="example">make sure the correct sides are shaded</div>
<div class="example">make sure each line is correctly shown as solid or dashed</div>
@@ -348,12 +348,8 @@
graph.update();
</div>
</div>
- <div class="sol" data-type="set">
- <p class="input-format">
- <label><span class="checkbox">POINT_1_SOLUTION</span><code>(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> is a solution</label><br />
- <label><span class="checkbox">POINT_2_SOLUTION</span><code>(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> is a solution</label>
- </p>
- </div>
+ <div><label><span class="sol" data-type="checkbox"><var>POINT_1_SOLUTION</var></span><code>(<var>POINT_1[0]</var>, <var>POINT_1[1]</var>)</code> is a solution</label></div>
+ <div><label><span class="sol" data-type="checkbox"><var>POINT_2_SOLUTION</var></span><code>(<var>POINT_2[0]</var>, <var>POINT_2[1]</var>)</code> is a solution</label></div>
<div class="example">graph the inequalities</div>
<div class="example">make sure the correct sides are shaded</div>
<div class="example">make sure each line is correctly shown as solid or dashed</div>
@@ -4,6 +4,20 @@
<meta charset="UTF-8" />
<title>Multiplying and dividing complex number polar forms</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">
@@ -75,11 +89,49 @@
});
graph.currComplexPolar = new ComplexPolarForm( DENOMINATOR, 10, USE_EULER_FORM );
- </div>
- <div class="solution" data-type="complexNumberPolarForm">
- [ <var>ANSWER_ANGLE_NUMERATOR</var>, <var>ANSWER_RADIUS</var> ]
+ 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 &amp;&amp; radius === 1) {
+ return "";
+ }
+
+ return angle === ANSWER_ANGLE_NUMERATOR &amp;&amp;
+ radius === ANSWER_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 class="hints">
<p>
@@ -178,10 +230,48 @@
});
graph.currComplexPolar = new ComplexPolarForm( DENOMINATOR, 10, USE_EULER_FORM );
+
+ 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 &amp;&amp; radius === 1) {
+ return "";
+ }
- <div class="solution" data-type="complexNumberPolarForm">
- [ <var>ANSWER_ANGLE_NUMERATOR</var>, <var>ANSWER_RADIUS</var> ]
+ return angle === ANSWER_ANGLE_NUMERATOR &amp;&amp;
+ radius === ANSWER_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 class="hints">
@@ -4,6 +4,11 @@
<meta charset="UTF-8" />
<title>Multiplying complex numbers</title>
<script src="../khan-exercise.js"></script>
+ <style type="text/css">
+ #solutionarea input[type="text"] {
+ width: 50px
+ }
+ </style>
</head>
<body>
<div class="exercise">
@@ -34,8 +39,21 @@
<div id="multiply-cplx">
<p class="question">Multiply the following complex numbers:</p>
<p><code>(<var>A_REP</var>) \cdot (<var>B_REP</var>)</code></p>
- <div class="solution" data-type="complexNumberSeparate">
- [ <var>ANSWER_REAL</var>, <var>ANSWER_IMAG</var> ]
+ <div class="solution" data-type="multiple">
+ <span class="sol" data-fallback="0" data-inexact data-max-error="0.01">
+ <var>ANSWER_REAL</var>
+ </span>
+ <code>+</code>
+ <span class="sol" data-fallback="0" data-inexact data-max-error="0.01">
+ <var>ANSWER_IMAG</var>
+ </span>
+ <code>i</code>
+ <div class="example">
+ Two numbers for both the real and imaginary parts
+ </div>
+ <div class="example">
+ Example: 2 + 3<code>i</code>
+ </div>
</div>
<div class="hints">
<p>
@@ -45,8 +63,9 @@
<p>
First use the distributive property:
</p>
- <code>\qquad (<var>A_REP</var>) \cdot (<var>B_REP</var>) =
- (<var>A_REAL_COLORED</var> \cdot <var>B_REAL_COLORED</var>) + (<var>A_REAL_COLORED</var> \cdot <var>B_IMAG_COLORED</var>i) +
+ <code>\qquad (<var>A_REP</var>) \cdot (<var>B_REP</var>) = </code><br>
+ <code>
+ \qquad \qquad (<var>A_REAL_COLORED</var> \cdot <var>B_REAL_COLORED</var>) + (<var>A_REAL_COLORED</var> \cdot <var>B_IMAG_COLORED</var>i) +
(<var>A_IMAG_COLORED</var>i \cdot <var>B_REAL_COLORED</var>) + (<var>A_IMAG_COLORED</var>i \cdot <var>B_IMAG_COLORED</var>i)
</code>
</div>
@@ -80,9 +99,6 @@
(<var>A_REAL * B_REAL</var> - <var>A_IMAG * B_IMAG</var>) + (<var>ANSWER_IMAG</var>i) = <var>complexNumber( ANSWER_REAL, ANSWER_IMAG)</var>
</code>
</p>
- <p>
- The real part of the result is <code><var>ANSWER_REAL</var></code> and the imaginary part is <code><var>ANSWER_IMAG</var></code>.
- </p>
</div>
</div>
</div>
Oops, something went wrong.

0 comments on commit 9de7cb7

Please sign in to comment.