Fix up number line problem

Khan · Jun 13, 2012 · 42b65ba · 42b65ba
1 parent 1438922
commit 42b65ba
Showing 1 changed file with 20 additions and 16 deletions.
diff --git a/exercises/number_line.html b/exercises/number_line.html
@@ -15,24 +15,28 @@
     <div class="problems">
         <div>
             <div class="question">
-                <p>Drag the orange dot to <strong><var>NUMBER</var></strong>. The distance between adjacent tick marks is 1.</p>
+                <p>Drag the orange dot to <strong><var>NUMBER</var></strong>. The distance between tick marks is 1.</p>
                 <div class="graphie" id="number-line">
                     init({
-                        range: [ [LOWER_BOUND - 1, UPPER_BOUND + 1], [-1, 1] ]
+                        range: [[LOWER_BOUND - 1, UPPER_BOUND + 1], [-1, 1]]
                     });
 
-                    line( [ LOWER_BOUND, 0 ], [ UPPER_BOUND, 0 ] );
-                    for ( var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x++ ) {
-                        line( [ x, -0.2 ], [ x, 0.2 ] );
+                    line([LOWER_BOUND, 0], [UPPER_BOUND, 0]);
+                    for (var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x++) {
+                        line([x, -0.2], [x, 0.2]);
                     }
                     style({ stroke: "#6495ED", strokeWidth: 3.5 });
-                    line( [ 0, -0.2], [0, 0.2]);
-                    label( [ 0, -0.53 ],  "0", "center", { color: "#6495ED" });
+                    line([0, -0.2], [0, 0.2]);
+                    label([0, -0.53], "0", "center", { color: "#6495ED" });
 
                     addMouseLayer();
-                    graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: 0.25 });
+                    graph.movablePoint = addMovablePoint({ constraints: { constrainY: true } });
                     graph.movablePoint.onMove = function( x, y ) {
-                        return [ min( max( LOWER_BOUND, x ), UPPER_BOUND ), y ];
+                        var newx = round(x);
+                        if (abs(newx - x) &lt; 0.25) {
+                            x = newx;
+                        }
+                        return [min(max(LOWER_BOUND, x), UPPER_BOUND), y];
                     };
                 </div>
             </div>
@@ -41,13 +45,13 @@
                 <span class="instruction"> Move the orange dot to select your answer. </span>
                 <div class="guess"> graph.movablePoint.coord[0] </div>
                 <div class="validator-function">
-                    if ( guess === 0 ) {
+                    if (guess === 0) {
                         return "";
                     }
-                    return abs( NUMBER - guess ) &lt; 0.001;
+                    return abs(NUMBER - guess) &lt; 0.001;
                 </div>
                 <div class="show-guess">
-                    graph.movablePoint.setCoord( [ guess, 0 ] );
+                    graph.movablePoint.setCoord([guess, 0]);
                 </div>
             </div>
 
@@ -57,15 +61,15 @@
                 <div>
                     <div class="graphie" data-update="number-line">
                         style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "-&gt;" });
-                        line( [ 0, 0 ], [ NUMBER, 0 ] );
+                        line([0, 0], [NUMBER, 0]);
                         graph.movablePoint.visibleShape.toFront();
                     </div>
-                    <p>The orange dot should be <var>plural( abs( NUMBER ), "position")</var> to the <span data-if="NUMBER &lt; 0">left</span><span data-else>right</span> of 0.</p>
+                    <p>The orange dot should be <var>plural(abs(NUMBER), "tick mark")</var> to the <span data-if="NUMBER &lt; 0">left</span><span data-else>right</span> of 0.</p>
                 </div>
                 <div>
                     <div class="graphie" data-update="number-line">
-                        label( [ NUMBER, -0.53 ],  NUMBER, "center", { color: "#FFA500" });
-                        graph.movablePoint.moveTo( NUMBER, 0 );
+                        label([NUMBER, -0.53], NUMBER, "center", {color: "#FFA500"});
+                        graph.movablePoint.moveTo(NUMBER, 0);
                     </div>
                     <p>The orange number shows where <var>NUMBER</var> is on the number line.</p>
                 </div>