Add the correct number_line_3

benkomalo · Nov 4, 2011 · cb1c607 · cb1c607
1 parent 48280c1
commit cb1c607
Showing 1 changed file with 35 additions and 18 deletions.
diff --git a/exercises/number_line_3.html b/exercises/number_line_3.html
@@ -8,50 +8,67 @@
 <body>
 	<div class="exercise">
 	<div class="vars">
-		<var id="LOWER_BOUND">-5</var>
-		<var id="UPPER_BOUND">-1 * LOWER_BOUND</var>
-		<var id="NUMBER">randRangeNonZero( LOWER_BOUND, UPPER_BOUND )</var>
+		<var id="MIDPOINT">randRange( -15, 15 )</var>
+		<var id="DISTANCE">randRange( -2, 2 )</var>
+		<var id="NUMBER">randRangeExclude( max(MIDPOINT-5, MIDPOINT-5-DISTANCE),min(MIDPOINT+5, MIDPOINT+5-DISTANCE), [ 0, MIDPOINT - DISTANCE ] )</var>
 	</div>
 	<div class="problems">
 		<div>
 			<div class="question">
-				<p>What number does the orange dot represent? The distance between adjacent tick marks is 1.</p>
+				<p data-if="DISTANCE !== 0">What number is <strong><var>plural( abs( DISTANCE ), "position")</var> to the <span data-if="DISTANCE < 1">left</span><span data-else>right</span> of the orange dot</strong>? The distance between adjacent tick marks is 1.</p>
+				<p data-else>What number does the orange dot represent?</p>
 				<div class="graphie" id="number-line">
 					init({
-						range: [ [LOWER_BOUND - 1, UPPER_BOUND + 1], [-1, 1] ]
+						range: [ [ MIDPOINT-6, MIDPOINT+6 ], [ -1, 1 ] ]
 					});
 
-					line( [ LOWER_BOUND, 0 ], [ UPPER_BOUND, 0 ] );
-					for ( var x = LOWER_BOUND; x &lt;= UPPER_BOUND; x++ ) {
+					line( [ MIDPOINT-5, 0 ], [ MIDPOINT+5, 0 ] );
+					for ( var x = MIDPOINT-5; x &lt;= MIDPOINT+5; 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( [ MIDPOINT, -0.2], [MIDPOINT, 0.2]);
+					label( [ MIDPOINT, -0.53 ],  MIDPOINT, "center", { color: "#6495ED" });
 
 					style({ stroke: "#FFA500", fill: "#FFA500" });
 					graph.orangeDot = circle( [ NUMBER, 0 ], 0.10 );
 				</div>
 			</div>
-			<div class="solution" data-forms="integer"><var>NUMBER</var></div>
+			<div class="solution" data-forms="integer"><var>NUMBER+DISTANCE</var></div>
 
 			<div class="hints">
-				<p>We know where 0 is on the number line because it is labeled.</p>
-				<p>Numbers to the left are smaller, and numbers to the right are bigger.</p>
-				<p>Numbers smaller than 0 are negative, and numbers bigger than 0 are positive.</p>
+				<p>We know where <code><var>MIDPOINT</var></code> is on this number line because it is labeled.</p>
+				<p>Numbers to the left of <code><var>MIDPOINT</var></code> are smaller, while numbers to the right of <code><var>MIDPOINT</var></code> are bigger.</p>
+				<div data-if="DISTANCE !== 0">
+					<p>We need to find the number represented by the blue dot, which is <var>plural( abs( DISTANCE ), "position")</var> to the <span data-if="DISTANCE < 1">left</span><span data-else>right</span> of the orange dot.</p>
+					<div class="graphie" data-update="number-line">
+						style({ stroke: "#6495ED", fill: "#6495ED" });
+						graph.blueDot = circle( [ NUMBER+DISTANCE, 0 ], 0.10 );
+					</div>
+				</div>
 				<div>
+					<p>Starting from <code><var>MIDPOINT</var></code>, we move <code><var>abs( NUMBER-MIDPOINT+DISTANCE )</var></code> to the <span data-if="NUMBER-MIDPOINT+DISTANCE < 0">left</span><span data-else>right</span> to reach the <span data-if="DISTANCE !== 0">blue</span><span data-else>orange</span> dot.</p>
 					<div class="graphie" data-update="number-line">
-						style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "->" });
-						line( [ 0, 0 ], [ NUMBER, 0 ] );
-						graph.orangeDot.toFront();
+						var color = "#6495ED";
+						if ( DISTANCE === 0 ) {
+							color = "#FFA500";
+						}
+						style({ stroke: color, fill: color, strokeWidth: 3.5, arrows: "->" });
+						line( [ MIDPOINT, 0 ], [ NUMBER+DISTANCE, 0 ] );
+						graph.blueDot.toFront();
 					</div>
-					<p>The orange dot is <var>plural( abs( NUMBER ), "position")</var> to the <span data-if="NUMBER < 0">left</span><span data-else>right</span> of 0.</p>
 				</div>
 				<div>
+					<p>Thus, the <span data-if="DISTANCE !== 0">blue</span><span data-else>orange</span> dot represents the number <code><var>NUMBER+DISTANCE</var></code>.</p>
 					<div class="graphie" data-update="number-line">
+						var color = "#6495ED";
+						if ( DISTANCE === 0 ) {
+							color = "#FFA500";
+						}
 						label( [ NUMBER, -0.53 ],  NUMBER, "center", { color: "#FFA500" });
+						label( [ NUMBER+DISTANCE, -0.53 ],  NUMBER+DISTANCE, "center", { color: color });
 					</div>
-					<p>The orange dot represents the number <var>NUMBER</var>.</p>
 				</div>
 			</div>
 		</div>