Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

198 lines (174 sloc) 9.377 kB
<!DOCTYPE html>
<html data-require="math math-format graphie word-problems interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Scientific notation intuition</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars" data-ensure="NUMBER_SEED % 10 !== 0">
<var id="NUMBER_SEED">randRange(100, 9999)</var>
<var id="NUMBER_SEED_LENGTH">NUMBER_SEED.toString().length</var>
<var id="ZEROES">rand(2) === 0 ? randRange(4, 7) : randRange( -1 * NUMBER_SEED_LENGTH - 4, -1 * NUMBER_SEED_LENGTH )</var>
<var id="E">ZEROES + ( NUMBER_SEED_LENGTH - 1 )</var>
<var id="BASE">NUMBER_SEED / pow( 10, E - ZEROES )</var>
<var id="LEADING">floor( BASE )</var>
<var id="TRAIL">( BASE + "" ).substring( 1 )</var>
<var id="DECIMAL">
ZEROES > 0 ?
NUMBER_SEED * pow( 10, ZEROES ) :
( NUMBER_SEED * pow( 10, ZEROES ) ).toFixed( -1 * ZEROES )
</var>
<var id="PRETTY_DECIMAL">commafy( DECIMAL )</var>
<var id="SCIENTIFIC">BASE + " \\times 10^{" + E + "}"</var>
<code>\newcommand{\exponentColor}[1]{\color{purple}{#1}}\newcommand{\leadingColor}[1]{\color{green}{#1}}</code>
</div>
<div class="problems">
<div>
<p class="question">
Express the top number in scientific notation by dragging the decimal point in the bottom number:
</p>
<div class="problem">
<div class="graphie" id="scinot">
init({
range: [ [ -8, 14 ], [ -1, 3 ] ],
scale: [30, 45]
});
graph.decimalPlace = E;
graph.digits = [];
for ( var i = -5; i &lt; 0; ++i ) {
graph.digits.push( label( [ i - 0.5, 0 ], "\\Huge{0}" ) );
if ( i &gt;= E ) {
label( [ i - 0.5, 2 ], "\\Huge{0}" );
}
}
$.each( integerToDigits( NUMBER_SEED ), function() {
graph.digits.push( label( [ i - 0.5, 0 ], "\\Huge{" + this + "}" ) );
label( [ i - 0.5, 2 ], "\\Huge{" + this + "}" );
++i;
});
for ( ; i &lt; 11; ++i ) {
graph.digits.push( label( [ i - 0.5, 0 ], "\\Huge{0}" ) );
if ( i &lt;= E ) {
label( [ i - 0.5, 2 ], "\\Huge{0}" );
}
}
label( [ 0, 1 ], "\\large{=}" );
graph.exp = bogusShape;
addMouseLayer();
graph.decimal = addMovablePoint({
coord: [ graph.decimalPlace, -0.3 ],
snapX: 1,
constraints: {
constrainY: true
},
normalStyle: {
fill: KhanUtil.BLUE,
stroke: KhanUtil.BLUE
}
});
style({ stroke: null, fill: "black" }, function() {
ellipse( [ E, 1.7 ], [ 4 / 30, 4 / 45 ] );
});
var setDecimal = function( place, exp ) {
var i;
if ( place &lt;= 0 ) {
for ( i = -5; i &lt; place-1; ++i ) {
graph.digits[i + 5].hide()
}
while ( i &lt; NUMBER_SEED_LENGTH ) {
graph.digits[ i + 5 ].show()
++i;
}
graph.exp.remove();
graph.exp = label( [ i - 1, 0 ], "\\color{gray}{\\huge{ \\times 10^{\\color{" + BLUE + "}{" + exp + "}}}}", "right" );
while ( i &lt; 11 ) {
graph.digits[i + 5].hide()
++i;
}
} else {
for ( i = -5; i &lt; 0; ++i ) {
graph.digits[i + 5].hide()
}
while ( i &lt; place || i &lt; NUMBER_SEED_LENGTH ) {
graph.digits[i + 5].show()
++i;
}
graph.exp.remove();
graph.exp = label( [ i - 1, 0 ], "\\color{gray}{\\huge{ \\times 10^{\\color{" + BLUE + "}{" + exp + "}}}}", "right" );
while ( i &lt; 11 ) {
graph.digits[i + 5].hide()
++i;
}
}
};
setDecimal( E + 1, 0 );
graph.decimal.onMove = function( x, y ) {
if ( x &lt; -5 || x &gt; 10 ) {
return false;
}
var exp = E - x;
setDecimal( x + 1, exp );
};
</div>
<p>
As you move the decimal point, the exponent will automatically change so both numbers are always equal.
</p>
</div>
<div class="solution" data-type="custom">
<div class="instruction">
Move the decimal point in the bottom number by dragging it left or right.
</div>
<div class="guess">E - graph.decimal.coord[0]</div>
<div class="validator-function">
if ( guess === 0 ) {
return "";
}
return guess === E;
</div>
</div>
<div class="hints">
<p>
To write <code><var>PRETTY_DECIMAL</var></code> in scientific notation, move the decimal
to the <span data-if="E < 0">right</span><span data-else>left</span> so the number is greater than or equal
to <code>1</code>, but less than <code>10</code>.
</p>
<p>
Moving the decimal to the <span data-if="E < 0">right</span><span data-else>left</span>
<code><var>abs( E )</var></code> <var>plural( "place", abs( E ) )</var> leaves us with
<code class="hint_pink"><var>BASE</var></code>.
</p>
<p>
Moving the decimal to the <span data-if="E < 0">right</span><span data-else>left</span>
<code><var>abs( E )</var></code> <var>plural( "place", abs( E ) )</var> is the same as
<span data-if="E < 0">multiplying</span><span data-else>dividing</span> by ten
<code><var>abs( E )</var></code> <var>plural( "time", abs( E ) )</var>. Therefore, to
counteract moving the decimal, we need to <span data-if="E < 0">divide</span><span data-else>multiply</span>
by ten <code><var>abs( E )</var></code> <var>plural( "time", abs( E ) )</var> &mdash; which is the same as
multiplying by <code class="hint_blue">10^{<var>E</var>}</code>.
</p>
<div>
<p><strong>
<code><var>PRETTY_DECIMAL</var></code> in scientific notation is
<code>\color{<var>PINK</var>}{<var>BASE</var>}\times \color{<var>BLUE</var>}{10^{<var>E</var>}}</code>.
</strong></p>
<div class="graphie" data-update="scinot">
var place = graph.decimal.coord[0];
$({ 0: place }).animate( { 0: 0 }, {
duration: abs( place ) * 50,
easing: "linear",
step: function( now, fx ) {
now = round( now );
graph.decimal.setCoord([ now, -0.3 ]);
graph.decimal.onMove( now, -0.3 );
}
});
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.