Express the top number in scientific notation by dragging the decimal in the bottom number:
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 < 0; ++i ) {
graph.digits.push( label( [ i - 0.5, 0 ], "\\Huge{0}" ) );
if ( i >= 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 < 11; ++i ) {
graph.digits.push( label( [ i - 0.5, 0 ], "\\Huge{0}" ) );
if ( i <= 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 <= 0 ) {
for ( i = -5; i < place-1; ++i ) {
graph.digits[i + 5].hide()
}
while ( i < 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 < 11 ) {
graph.digits[i + 5].hide()
++i;
}
} else {
for ( i = -5; i < 0; ++i ) {
graph.digits[i + 5].hide()
}
while ( i < place || i < 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 < 11 ) {
graph.digits[i + 5].hide()
++i;
}
}
};
setDecimal( E + 1, 0 );
graph.decimal.onMove = function( x, y ) {
if ( x < -5 || x > 10 ) {
return false;
}
var exp = E - x;
setDecimal( x + 1, exp );
graph.decimal.visibleShape.setPosition([x, y]);
};
As you move the decimal, the exponent will automatically change so both numbers are always equal.
To write PRETTY_DECIMAL in scientific notation, move the decimal
to the rightleft so the number is greater than or equal
to 1, but less than 10.
Moving the decimal to the rightleft
abs( E ) place leaves us with
BASE_STR.
Moving the decimal to the rightleft
abs( E ) places leaves us with
BASE_STR.
Moving the decimal to the rightleft
abs( E ) place is the same as
multiplyingdividing by ten
abs( E ) time. Therefore, to
counteract moving the decimal, we need to dividemultiply
by ten abs( E ) time — which is the same as
multiplying by 10^{E}.
Moving the decimal to the rightleft
abs( E ) places is the same as
multiplyingdividing by ten
abs( E ) times. Therefore, to
counteract moving the decimal, we need to dividemultiply
by ten abs( E ) times — which is the same as
multiplying by 10^{E}.
PRETTY_DECIMAL in scientific notation is
\color{PINK}{BASE_STR}\times \color{BLUE}{10^{E}}.
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 );
}
});