Rearrange answer area content within some exercises

See https://docs.google.com/a/khanacademy.org/spreadsheets/d/1wCONrsK1ujRCLal7bcxS0cVkfpfKiPzapt3SsMJ_zqI/edit#gid=0 Color: Gray Test Plan: Take all hints and succesfully answer a question within each problem type for all modified exercises. Auditors: alex
Khan · Nov 20, 2014 · 233a0b9 · 233a0b9
1 parent e6d5ef8
commit 233a0b9
Show file tree

Hide file tree

Showing 30 changed files with 151 additions and 112 deletions.
diff --git a/css/khan-exercise.css b/css/khan-exercise.css
@@ -890,6 +890,13 @@ html.exercise-browser {
 }
 /* Fancy matrix input - goes along with matrix-input.js */
 
+.matrix-input {
+    padding: 15px;
+    margin-top: 10px;
+    background-color: #eee;
+    width: 165px;
+}
+
 .solutionarea .matrix-row {
     float: left;  /* contain inner floats */
     clear: both;

diff --git a/exercises/decasteljau.html b/exercises/decasteljau.html
@@ -53,6 +53,7 @@
                     What is the coordinate of a point, <code>P</code>, if it is <code><var>T_FRACTION</var></code> of the way along the parabola,
                     from <code>A</code> to <code>C</code>?
                 </p>
+                <p class="render-answer-area-here"><p>
 
                 <div class="graphie" id="graph">
                     graphInit({
@@ -65,7 +66,7 @@
                         axisArrows: "&lt;-&gt;",
                     });
 
-                    
+
                     style({ stroke: BLUE, fill: BLUE, strokeWidth: 1.5 });
                     line([AX, AY], [BX, BY]);
                     line([CX, CY], [BX, BY]);
@@ -145,7 +146,7 @@
                             graph.R = [RX, RY];
                             graph.Q = [QX, QY];
                             graph.RQ = kvector.normalize(kvector.subtract(graph.R, graph.Q));
-                            
+
                             style({ stroke: PINK, fill: PINK, color: PINK, strokeWidth: 1.5 });
                             circle(graph.Q, 0.15);
                             label(kvector.subtract(graph.Q, graph.RQ), "Q");

diff --git a/exercises/decimals_on_the_number_line_1.html b/exercises/decimals_on_the_number_line_1.html
@@ -54,7 +54,7 @@
             </div>
 
             <div class="solution" data-type="custom">
-                <span class="instruction"> Move the orange dot to select your answer. </span>
+                <span class="instruction"></span>
                 <div class="guess"> graph.movablePoint.coord[0] </div>
                 <div class="validator-function">
                     if ( guess === 0 ) {

diff --git a/exercises/decimals_on_the_number_line_2.html b/exercises/decimals_on_the_number_line_2.html
@@ -59,7 +59,7 @@
             </div>
 
             <div class="solution" data-type="custom">
-                <span class="instruction"> Move the orange dot to select your answer. </span>
+                <span class="instruction"></span>
                 <div class="guess"> graph.movablePoint.coord[0] </div>
                 <div class="validator-function">
                     if (guess === 0) {

diff --git a/exercises/decimals_on_the_number_line_3.html b/exercises/decimals_on_the_number_line_3.html
@@ -61,7 +61,7 @@
             </div>
 
             <div class="solution" data-type="custom">
-                <span class="instruction"> Move the orange dot to select your answer. </span>
+                <span class="instruction"></span>
                 <div class="guess"> graph.movablePoint.coord[0] </div>
                 <div class="validator-function">
                     if ( guess === 0 ) {

diff --git a/exercises/derivative_intuition.html b/exercises/derivative_intuition.html
@@ -25,21 +25,14 @@
                     <var id="OPTIONS">{}</var>
                 </div>
 
-                <div class="question">
-                    <p>
-                        <code class="hint_blue">f(x) = <var>FNXTEXT</var></code>
-                        <span id="ddxspan" style="margin-left: 5em; display: none; opacity:0">
-                            <code class="hint_orange">\frac{d}{dx}f(x) = <var>DDXTEXT</var></code>
-                        </span>
-                    </p>
-                    <p>
-                        Drag each one of the <var>POINTS.length</var> <span class="hint_orange">orange</span> points up and down
-                        to adjust the slope of the corresponding tangent line.</p>
-                    <p>
-                        The derivative of a function is defined as the slope of a line tangent to the curve at each point.
-                        Adjust the slopes of the lines to visually find the    derivative <code>\frac{d}{dx} f(x)</code> at each point.
-                    </p>
-                </div>
+                <p class="question">
+                    Drag each one of the <var>POINTS.length</var> <span class="hint_orange">orange</span> points up and down
+                    to adjust the slope of the corresponding tangent line.</p>
+                </p>
+                <p>
+                    The derivative of a function is defined as the slope of a line tangent to the curve at each point.
+                    Adjust the slopes of the lines to visually find the derivative <code>\frac{d}{dx} f(x)</code> at each point.
+                </p>
 
                 <div class="problem">
                     <div class="graphie" id="ddxplot">
@@ -57,6 +50,12 @@
                         initDerivativeIntuition(FNX, DDX, POINTS);
                     </div>
                 </div>
+                <p>
+                    <code class="hint_blue">f(x) = <var>FNXTEXT</var></code>
+                    <span id="ddxspan" style="margin-left: 5em; display: none; opacity:0">
+                        <code class="hint_orange">\frac{d}{dx}f(x) = <var>DDXTEXT</var></code>
+                    </span>
+                </p>
 
                 <div class="solution" data-type="custom">
                     <div class="instruction">

diff --git a/exercises/dice_probability.html b/exercises/dice_probability.html
@@ -130,6 +130,7 @@
                     </span>
                 </p>
                 <p class="question" id="question-statement"></p>
+                <p class="render-answer-area-here"></p>
                 <p class="problem">If it helps, you may select the matching outcomes below. Your selections
                 aren't checked with your answer:</p>
 

diff --git a/exercises/discount_tax_and_tip_word_problems.html b/exercises/discount_tax_and_tip_word_problems.html
@@ -20,7 +20,7 @@
                     <var>person(1)</var> buys a basket of <var>plural_form(fruit(1))</var> on sale for <code>\$<var>DOLLARS</var></code> before tax.  The sales tax is <code><var>SALES_TAX</var>\%</code>.  What is the total price <var>person(1)</var> pays for the basket of <var>plural_form(fruit(1))</var>?
                 </p>
             </div>
-            <div class="solution" data-type="multiple"><code>\$</code><span class="sol"><var>TOTAL_PRICE</var></span></div>
+            <div class="solution" data-type="multiple"><code>\$\ </code><span class="sol"><var>TOTAL_PRICE</var></span></div>
             <div class="hints">
                 <div>
                     <p>To find the total price, first find the amount of sales tax paid by multiplying the sales tax by the original price of the basket of <var>plural_form(fruit(1))</var>.</p>
@@ -52,7 +52,7 @@
                     <code>\$<var>PRICE</var></code> before tax, how much tax would you pay on that item?</p>
                 <p><em>Round to the nearest hundredth or cent.</em></p>
             </div>
-            <div class="solution" data-type="multiple"><code>\$</code><span class="sol"><var>TOTAL_TAX</var></span></div>
+            <div class="solution" data-type="multiple"><code>\$\ </code><span class="sol"><var>TOTAL_TAX</var></span></div>
             <div class="hints">
                 <div>
                     <p>To find the amount of sales tax you would pay, multiply the sales tax by the original price of the item.</p>
@@ -78,7 +78,7 @@
             <div class="question spin">
                 <p><var>person(1)</var> bought a new <var>clothing(1)</var> at the store when they were having a <code><var>DISCOUNT</var>\%</code> off sale. If the regular price of the <var>clothing(1)</var> was <code>\$<var>PRICE</var></code>, how much did <var>person(1)</var> pay with the discount?</p>
             </div>
-            <div class="solution" data-type="multiple"><code>\$</code><span class="sol"><var>DISCOUNT_PRICE</var></span></div>
+            <div class="solution" data-type="multiple"><code>\$\ </code><span class="sol"><var>DISCOUNT_PRICE</var></span></div>
             <div class="hints">
                 <div>
                     <p>First, find the amount of the discount by multiplying the original price of the of the item by the discount.</p>
@@ -109,7 +109,7 @@
             <div class="question spin">
                 <p>The <var>pizza(1)</var> store is having a <code><var>DISCOUNT</var>\%</code> off sale on all of its <var>plural_form(pizza(1))</var>. If the <var>pizza(1)</var> you want regularly costs <code>\$<var>PRICE</var></code>, how much would you save with the discount?</p>
             </div>
-            <div class="solution" data-type="multiple"><code>\$</code><span class="sol"><var>TOTAL_DISCOUNT</var></span></div>
+            <div class="solution" data-type="multiple"><code>\$\ </code><span class="sol"><var>TOTAL_DISCOUNT</var></span></div>
             <div class="hints">
                 <div>
                     <p>To find the amount saved with the discount, multiply the discount by the original price.</p>
@@ -146,7 +146,7 @@
                     <var>person(1)</var> {has {breakfast|lunch|dinner}|eats} at a {restaurant|cafe} and the cost of her meal is <code>\$<var>BILL_FORMAT</var></code>. Because of the service, she wants to leave a <code><var>TIP_PERCENT</var>\%</code> tip. What is her total bill including tip?
                 </p>
             </div>
-            <div class="solution" data-type="multiple"><code>\$</code><span class="sol"><var>TOTAL</var></span></div>
+            <div class="solution" data-type="multiple"><code>\$\ </code><span class="sol"><var>TOTAL</var></span></div>
             <div class="hints">
                 <div>
                     <p>The tip amount is equal to <code><var>TIP_PERCENT</var>\% \times \green{\$<var>BILL_FORMAT</var>}</code>.</p>

diff --git a/exercises/distance_between_point_and_line.html b/exercises/distance_between_point_and_line.html
@@ -34,6 +34,7 @@
                         <span data-else=""><var>M2_SIGN</var></span>x
                         <span data-if="B2 !== 0">+ <var>B2</var></span>}</code>.
                     </b></p>
+                    <p class="render-answer-area-here"></p>
                     <div class="graphie" id="grid">
                             graphInit({
                                 range: [[-10, 10], [-10, 10]],
@@ -141,6 +142,7 @@
                         Find the minimum distance between the point <code>\red{(<var>X1</var>, <var>Y1</var>)}</code>
                         and the line <code>\blue{y = <var>B1</var>}</code>.
                     </b></p>
+                    <p class="render-answer-area-here"></p>
                     <div class="graphie" id="grid">
                             graphInit({
                                 range: [[-10, 10], [-10, 10]],
@@ -210,6 +212,7 @@
                         Find the minimum distance between the point <code>\red{(<var>X1</var>, <var>Y1</var>)}</code>
                         and the line <code>\blue{x = <var>B1</var>}</code>.
                     </b></p>
+                    <p class="render-answer-area-here"></p>
                     <div class="graphie" id="grid">
                             graphInit({
                                 range: [[-10, 10], [-10, 10]],

diff --git a/exercises/distance_formula.html b/exercises/distance_formula.html
@@ -24,6 +24,7 @@
                     <code>\blue{(<var>X1</var>, <var>Y1</var>)}</code> and
                     <code>\green{(<var>X2</var>, <var>Y2</var>)}</code>.
                 </p>
+                <p class="render-answer-area-here"></p>
                 <div class="graphie" id="graph">
                     graphInit({
                         range: 11,

diff --git a/exercises/markup_and_commission_word_problems.html b/exercises/markup_and_commission_word_problems.html
@@ -21,7 +21,7 @@
                 If the markup rate at <var>person(1)</var>'s Furniture Store is <code><var>MARKUP_RATE</var>\%</code>,
                 what is the markup for the <var>furniture(1)</var>?</p>
             </div>
-            <div class="solution" data-type="multiple"><code>\$</code><span class="sol"><var>TOTAL_MARKUP</var></span></div>
+            <div class="solution" data-type="multiple"><code>\$\ </code><span class="sol"><var>TOTAL_MARKUP</var></span></div>
             <div class="hints">
                 <div>
                     <p>Remember that a markup rate is a percentage of the wholesale price that a store adds to get a selling or retail price. The amount of markup can be found with the following equation: </p>
@@ -49,7 +49,7 @@
             <div class="question">
                 <p>The manager at <var>person(1)</var>'s Furniture Store is trying to figure out how much to charge for a <var>furniture(1)</var> that just arrived. If the <var>furniture(1)</var> was bought at a wholesale price of <code>$<var>localeToFixed(WHOLESALE, 2)</var></code> and <var>person(1)</var>'s Furniture Store marks up all furniture by <code><var>MARKUP_RATE</var>\%</code>, at what price should the manager sell the <var>furniture(1)</var>?</p>
             </div>
-            <div class="solution" data-type="multiple"><code>\$</code><span class="sol"><var>RETAIL_PRICE</var></span></div>
+            <div class="solution" data-type="multiple"><code>\$\ </code><span class="sol"><var>RETAIL_PRICE</var></span></div>
             <div class="hints">
                 <div>
                     <p>In order to find the retail price, we must first find the amount of markup. Remember that a markup rate is a percentage of the wholesale price that a store adds to get a selling or retail price. With this knowledge, we can figure out the following equation:</p>
@@ -87,7 +87,7 @@
                     <var>person(1)</var> works at a nearby electronics store. She makes a commission of <code><var>COMMISSION_RATE</var>\%</code> on everything she sells. If she sells a <var>electronic(1)</var> for <code>$<var>localeToFixed(PRICE, 2)</var></code>, how much money does <var>person(1)</var> make in commission?
                 </p>
             </div>
-            <div class="solution" data-type="multiple"><code>\$</code><span class="sol"><var>TOTAL_COMMISSION</var></span></div>
+            <div class="solution" data-type="multiple"><code>\$\ </code><span class="sol"><var>TOTAL_COMMISSION</var></span></div>
             <div class="hints">
                 <div>
                     <p>A commission rate is a percentage of the retail price of an item that the seller makes if he or she can sell the item. To find the amount of commission made, use the following formula:</p>
@@ -123,7 +123,7 @@
                     <var>person(1)</var> earns a base salary of <code>$<var>localeToFixed(BASE_SALARY, 2)</var></code> every week with an additional <code><var>COMMISSION_RATE</var>\%</code> commission on everything she sells. If <var>person(1)</var> sold <code>$<var>localeToFixed(SALES, 2)</var></code> worth of items last week, what was her total pay?
                 </p>
             </div>
-            <div class="solution" data-type="multiple"><code>\$</code><span class="sol"><var>TOTAL_SALARY</var></span></div>
+            <div class="solution" data-type="multiple"><code>\$\ </code><span class="sol"><var>TOTAL_SALARY</var></span></div>
             <div class="hints">
                 <div>
                     <p>First, find the amount of commission made by using the following formula:</p>

diff --git a/exercises/partial_fraction_expansion_1.html b/exercises/partial_fraction_expansion_1.html
@@ -5,21 +5,21 @@
     <title>Partial fraction expansion</title>
     <script data-main="../local-only/main.js" src="../local-only/require.js"></script>
     <style type="text/css">
-        #answer_area .soln-bot input[type="text"] {
+        #solutionarea .soln-bot input[type="text"] {
             margin-left: 3px;
         }
-        #answer_area td {
+        #solutionarea td {
             text-align: center;
             vertical-align: middle;
             padding: 0px;
         }
-        #answer_area .soln-top {
+        #solutionarea .soln-top {
             padding-bottom: 1px;
         }
-        #answer_area .soln-middle {
+        #solutionarea .soln-middle {
             padding: 0px 5px;
         }
-        #answer_area .soln-bot {
+        #solutionarea .soln-bot {
             padding-top: 1px;
             border-top: 1px solid black;
         }
@@ -48,11 +48,11 @@
                 <var id="ADENOM">expr(["+", "x", -C])</var>
                 <var id="BDENOM">expr(["+", "x", -D])</var>
             </div>
-            <div class="question">
+            <p class="question">
                 Expand
                 <code>\dfrac{<var>NUMER</var>}{<var>DENOM</var>}</code>
                 using partial fractions.
-            </div>
+            </p>
             <div class="solution" data-type="set">
                 <div class="set-sol" data-type="multiple">
                     <span class="sol" data-forms="integer"><var>A</var></span>

diff --git a/exercises/recognizing_concavity.html b/exercises/recognizing_concavity.html
@@ -86,9 +86,7 @@
     </div>
 
     <div class="solution" data-type="custom">
-        <div class="instruction">
-            Move the orange window to select part of the function.
-        </div>
+        <div class="instruction"></div>
         <div class="guess">
             graph.slidingWindow.getX()
         </div>

diff --git a/exercises/recognizing_conic_sections.html b/exercises/recognizing_conic_sections.html
@@ -19,8 +19,8 @@
                     </div>
 
                     <div class="problem">
-                        <p>Identify this conic section. Give the most specific name.</p>
-
+                        <div>Identify this conic section. Give the most specific name.</div>
+                        <div class="render-answer-area-here"></div>
                         <div class="graphie" id="conic">
                             graphInit({
                                 range: 10,

diff --git a/exercises/recognizing_fractions_0.5.html b/exercises/recognizing_fractions_0.5.html
@@ -20,7 +20,10 @@
         <div class="problems">
             <div id="pie-chart">
                 <div class="question">
-                        <p data-if="WHOLES === 1">What fraction of the circle is shaded red?</p>
+                        <p data-if="WHOLES === 1">
+                            What fraction of the circle is shaded red?
+                            <span class="render-answer-area-here"></span>
+                        </p>
                         <div data-else="">
                             <p>This circle represents one whole.</p>
                             <div class="graphie">
@@ -30,7 +33,10 @@
                                 });
                                 piechart([0, DEN_1], [RED, "#999"], 2, false, 3, 0);
                             </div>
-                            <p>What fraction is shaded red below?</p>
+                            <p>
+                                What fraction is shaded red below?
+                                <span class="render-answer-area-here"></span>
+                            <p>
                         </div>
 
                         <div class="graphie">
@@ -63,7 +69,10 @@
 
             <div id="rectangle-area">
                 <div class="question">
-                    <p data-if="WHOLES === 1">What fraction of the rectangle is shaded red?</p>
+                    <p data-if="WHOLES === 1">
+                        What fraction of the rectangle is shaded red?
+                        <span class="render-answer-area-here"></span>
+                    </p>
                     <div data-else="">
                         <p>This rectangle represents one whole.</p>
                         <div class="graphie">
@@ -73,7 +82,10 @@
                             });
                             rectchart([0, DEN_1], [RED, "#999"], 0);
                         </div>
-                        <p>What fraction is shaded red below?</p>
+                        <p>
+                            What fraction is shaded red below?
+                            <span class="render-answer-area-here"></span>
+                        <p>
                     </div>
 
                     <div class="graphie">

diff --git a/exercises/recognizing_slope.html b/exercises/recognizing_slope.html
@@ -86,9 +86,7 @@
     </div>
 
     <div class="solution" data-type="custom">
-        <div class="instruction">
-            Move the orange window to select part of the function.
-        </div>
+        <div class="instruction"></div>
         <div class="guess">
             graph.slidingWindow.getX()
         </div>

diff --git a/exercises/rotation_of_polygons.html b/exercises/rotation_of_polygons.html
@@ -104,9 +104,7 @@
             </div>
 
             <div class="solution" data-type="custom">
-                <div class="instruction">
-                    Rotate the blue polygon to its image under the given translation.
-                </div>
+                <div class="instruction"></div>
                 <div class="guess">_.map(graph.points, function(point) {
                     return point.coord;
                 })</div>
@@ -206,6 +204,7 @@
             <p class="question">
                 What is the transformation that rotates the blue solid shape to
                 the orange dashed shape?
+                <span class="render-answer-area-here"></span>
             </p>
 
             <div class="problem">