Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

79 lines (74 sloc) 4.35 kb
<!DOCTYPE html>
<html data-require="math graphie word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number line 3</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<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 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 tick marks is 1.</p>
<p data-else>What number does the orange dot represent? The distance between tick marks is 1.</p>
<div class="graphie" id="number-line">
init({
range: [ [ MIDPOINT-6, MIDPOINT+6 ], [ -1, 1 ] ]
});
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( [ 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+DISTANCE</var></div>
<div class="hints">
<p>We know where <code><var>MIDPOINT</var></code> is on this number line because it is labeled.</p>
<p>Numbers to the left are less than <code><var>MIDPOINT</var></code>, while numbers to the right are greater than <code><var>MIDPOINT</var></code>.</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">
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();
graph.orangeDot.toFront();
</div>
</div>
<div>
<p class="final_answer">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+DISTANCE, -0.53 ], NUMBER+DISTANCE, "center", { color: color });
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.