Skip to content
This repository has been archived by the owner on May 11, 2021. It is now read-only.

Commit

Permalink
Merge branch 'master' of http://github.com/Khan/khan-exercises
Browse files Browse the repository at this point in the history
  • Loading branch information
@joelburget
joelburget committed Sep 8, 2011
2 parents 1c3873c + 2799c1d commit f5db4bb
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 38 deletions.
93 changes: 55 additions & 38 deletions exercises/number_line.html
View file
@@ -1,60 +1,77 @@
<!DOCTYPE html>
<html data-require="math graphie">
<html data-require="math graphie word-problems">
<head>
<meta charset="UTF-8" />
<title>Number line</title>
<script src="../khan-exercise.js"></script>
</head>
<body>

<div class="exercise">
<div class="vars" >
<var id="NUMBER">randRangeNonZero( -5, 5 )</var>
<var id="MIDPOINT">randRange( -15, 15 )</var>
<var id="DISTANCE">randRange( -2, 2 )</var>
<var id="NUMBER">randRangeNonZero( max(MIDPOINT-5, MIDPOINT-5-DISTANCE),min(MIDPOINT+5, MIDPOINT+5-DISTANCE) )</var>
</div>
<div class="problems">
<div>
<div class="question">
<p>What number does the orange dot represent?</p>
</div>
<div class="graphie" id="number-line">
init({
range: [ [ -6, 6 ], [ -1, 1 ] ]
});
<p data-if="DISTANCE !== 0">What number 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? 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: [ [ MIDPOINT-6, MIDPOINT+6 ], [ -1, 1 ] ]
});

line( [ -5, 0 ], [ 5, 0 ] );
for ( var x = -5; x &lt;= 5; x++ ) {
line( [ x, -0.2 ], [ x, 0.2 ] );
}
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" });

style({ stroke: "#FFA500", fill: "#FFA500" });
graph.orangeDot = circle( [ NUMBER, 0 ], 0.10 );
</div>
<div class="solution" data-forms="integer"><var>NUMBER</var></div>
</div>
</div>
style({ stroke: "#6495ED", strokeWidth: 3.5 });
line( [ MIDPOINT, -0.2], [MIDPOINT, 0.2]);
label( [ MIDPOINT, -0.53 ], MIDPOINT, "center", { color: "#6495ED" });

<div class="hints">
<p>We know where <code>0</code> is on this number line because it is labeled.</p>
<p>Numbers to the right of <code>0</code> are positive, while numbers to the left of <code>0</code> are negative.</p>
<div>
<p>Starting from <code>0</code>, we move <code><var>abs( NUMBER )</var></code> to the <span data-if="NUMBER < 0">left</span><span data-else>right</span> to reach the orange 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();
style({ stroke: "#FFA500", fill: "#FFA500" });
graph.orangeDot = circle( [ NUMBER, 0 ], 0.10 );
</div>
</div>
</div>
<div>
<p>Thus, the orange dot represents the number <code><var>NUMBER</var></code>.</p>
<div class="graphie" data-update="number-line">
label( [ NUMBER, -0.53 ], NUMBER, "center", { color: "#FFA500" });
<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 right of <code><var>MIDPOINT</var></code> are bigger, while numbers to the left of <code><var>MIDPOINT</var></code> are smaller.</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();
</div>
</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>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
59 changes: 59 additions & 0 deletions exercises/properties_of_numbers_2.html
View file
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html data-require="math">
<head>
<meta charset="UTF-8" />
<title>Properties of numbers 2</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="NUM">randRange( 1000, 9999 )</var>
</div>

<div class="problems">
<div id="multiplication-identity">
<p class="question"><code><var>NUM</var> \times 1 =</code></p>
<p class="solution"><var>NUM</var></p>
<div class="hints">
<p>Any real number multiplied by <code>1</code> equals itself.</p>
<p>Without performing any multiplication steps, we know that <code><var>NUM</var> \times 1 = <var>NUM</var></code>.</p>
<p>This fact about multiplying by <code>1</code> is known as the identity property of multiplication, and it is useful for finding equivalent fractions.</p>
</div>
</div>

<div id="addition-identity">
<p class="question"><code><var>NUM</var> + 0 =</code></p>
<p class="solution"><var>NUM</var></p>
<div class="hints">
<p>Any real number plus <code>0</code> equals itself.</p>
<p>Without performing any addition steps, we know that <code><var>NUM</var> + 0 = <var>NUM</var></code>.</p>
<p>This fact about adding by <code>0</code> is known as the identity property of addition.</p>
</div>
</div>

<div id="multiplicative-inverse">
<p class="question">By what number can we multiply <code><var>NUM</var></code> to get <code>1</code>?</p>
<p class="solution" data-forms="proper"><var>1 / NUM</var></p>
<div class="hints">
<p>Any real number <code>x</code> (except <code>0</code>) can be multipled by <code>\dfrac{1}{x}</code> to get <code>1</code>.</p>
<p>Without performing any multiplication or division, we know that <code><var>NUM</var> \times \dfrac{1}{<var>NUM</var>} = 1</code>.</p>
<p>Thus, the answer is <code>\dfrac{1}{<var>NUM</var>}</code>.</p>
<p>This fact about multiplying by <code>\dfrac{1}{x}</code> is known as the multiplicative inverse property.
</div>
</div>

<div id="additive-inverse">
<p class="question">What number can we add to <code><var>NUM</var></code> to get <code>0</code>?</p>
<p class="solution" data-forms="integer"><var>-1 * NUM</var></p>
<div class="hints">
<p>Adding the negative inverse of a number to that number equals <code>0</code>.</p>
<p>Without performing any addition or subtraction, we know that <code><var>NUM</var> +(<var>-1 * NUM</var>) = 0</code>.</p>
<p>Thus, the answer is <code><var>-1 * NUM</var></code>.</p>
<p>This fact about adding negative inverses is known as the additive inverse property.</p>
</div>
</div>
</div>
</div>
</body>
</html>

0 comments on commit f5db4bb

Please sign in to comment.