Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
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.