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

259 lines (231 sloc) 12.909 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 data-main="../local-only/main.js" src="../local-only/require.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="BASE_STR">localeToFixed(BASE, E - ZEROES)</var>
<var id="LEADING">floor( BASE )</var>
<var id="TRAIL">BASE_STR.substring( 1 )</var>
<var id="DECIMAL">
ZEROES &gt; 0 ?
NUMBER_SEED * pow( 10, ZEROES ) :
// NOTE: Don't use toFixed unless you have a good reason,
// use localeToFixed instead. Here, since we're passing off
// to commafy, we need toFixed.
(NUMBER_SEED * pow( 10, ZEROES )).toFixed(-1 * ZEROES)
</var>
<var id="PRETTY_DECIMAL">commafy( DECIMAL )</var>
<var id="SCIENTIFIC">BASE_STR + " \\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 in the bottom number:
</p>
<div class="problem">
<div class="graphie" id="scinot">
init({
range: [ [ -8, 14 ], [ -1, 3 ] ],
scale: [23, 45]
});
graph.decimalPlace = E;
var decimal =
icu.getDecimalFormatSymbols().decimal_separator;
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
}
});
graph.decimal.visibleShape.remove();
graph.decimal.visibleShape = label([graph.decimalPlace, -0.3], "\\Huge{" + decimal + "}");
graph.decimal.visibleShape.moveTo = function(point) {
this.attr("cx", point[0]);
this.attr("cy", point[1]);
};
graph.decimal.visibleShape.css("color",
KhanUtil.BLUE);
graph.decimal.onHighlight = function() {
graph.decimal.visibleShape.css("color",
KhanUtil.ORANGE);
$({scale: 1}).animate({scale: 1.5}, {
step: function(now) {
graph.decimal.visibleShape.css(
"transform",
"scale(" + now + ")"
);
},
duration: 50
});
}
graph.decimal.onUnhighlight = function() {
graph.decimal.visibleShape.css("color",
KhanUtil.BLUE);
$({scale: 1.5}).animate({scale: 1}, {
step: function(now) {
graph.decimal.visibleShape.css(
"transform",
"scale(" + now + ")"
);
},
duration: 50
});
}
style({ stroke: null, fill: "black" }, function() {
label( [ E, 1.7 ], "\\Huge{" + decimal + "}");
});
var lastPlaceAndExp = [null, null];
var setDecimal = function( place, exp ) {
if (lastPlaceAndExp[0] === place &&
lastPlaceAndExp[1] === exp) {
return;
}
lastPlaceAndExp = [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.25 ], "\\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.25 ], "\\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 );
graph.decimal.visibleShape.setPosition([x, y]);
};
</div>
<p>
As you move the decimal, the exponent will automatically change so both numbers are always equal.
</p>
</div>
<div class="solution" data-type="custom">
<div class="instruction"></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 data-if="isSingular(abs( E ))">
Moving the decimal to the <span data-if="E < 0">right</span><span data-else="">left</span>
<code><var>abs( E )</var></code> place leaves us with
<code class="hint_pink"><var>BASE_STR</var></code>.
</p><p data-else="">
Moving the decimal to the <span data-if="E < 0">right</span><span data-else="">left</span>
<code><var>abs( E )</var></code> places leaves us with
<code class="hint_pink"><var>BASE_STR</var></code>.
</p>
<p data-if="isSingular(abs( E ))">
Moving the decimal to the <span data-if="E < 0">right</span><span data-else="">left</span>
<code><var>abs( E )</var></code> place is the same as
<span data-if="E < 0">multiplying</span><span data-else="">dividing</span> by ten
<code><var>abs( E )</var></code> time. 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> time — which is the same as
multiplying by <code class="hint_blue">10^{<var>E</var>}</code>.
</p><p data-else="">
Moving the decimal to the <span data-if="E < 0">right</span><span data-else="">left</span>
<code><var>abs( E )</var></code> places is the same as
<span data-if="E < 0">multiplying</span><span data-else="">dividing</span> by ten
<code><var>abs( E )</var></code> times. 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> times — 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_STR</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.