This repository has been archived by the owner on May 11, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 863
/
scientific_notation.html
81 lines (67 loc) · 3.88 KB
/
scientific_notation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html data-require="math math-format">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Scientific notation</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, 8) : 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 this number in scientific notation.
</p>
<p class="problem"><code><var>PRETTY_DECIMAL</var></code></p>
<div class="solution" data-type="multiple">
<span class="sol base"><var>BASE</var></span>
<code> \times 10 </code>
<sup class="sol exp" style="width: 20px;"><var>E</var></sup>
</div>
<div class="hints">
<div class="digits" data-unwrap>
<p data-if="E > 0">There are <code>\exponentColor{<var>E</var>}</code> digits to the right of the leading <code>\leadingColor{<var>LEADING</var>}</code> (and to the left of the decimal).</p>
<div data-unwrap data-else>
<p>Count the zeroes to the right of the decimal point before the leading <code>\leadingColor{<var>LEADING</var>}</code>: there <span data-if="E + 1 === -1">is 1 zero</span><span data-else>are <code><var>(E + 1) * -1</var></code> zeroes</span>.</p>
<p>If you count the leading digit <code>\leadingColor{<var>LEADING</var>}</code><span data-if="E + 1 < -1"> and those zeroes</span><span data-else-if="E + 1 === -1"> and the 1 zero</span>, there <var>E === -1 ? "is" : "are"</var> <code>\exponentColor{<var>E * -1</var>}</code> <var>E === -1 ? "digit" : "digits"</var> to the <span style="color: purple;">right</span> of the decimal point.</p>
</div>
</div>
<p class="answer">So: <code><var>PRETTY_DECIMAL</var> = \leadingColor{<var>LEADING</var>}<var>TRAIL</var> \times 10^{\exponentColor{<var>E</var>}}</code></p>
</div>
</div>
<div>
<div class="vars">
<var id="TEN_POWER">commafy( pow( 10, E ) )</var>
</div>
<p class="question"><code><var>SCIENTIFIC</var> = {?}</code></p>
<p class="solution"><var>DECIMAL</var></p>
<div class="hints">
<p class="digits"><code><var>SCIENTIFIC</var> = <var>BASE</var> \times <var>TEN_POWER</var></code></p>
<p class="answer"><code><var>BASE</var> \times <var>TEN_POWER</var> = <var>PRETTY_DECIMAL</var></code></p>
</div>
</div>
</div>
<div class="hints">
<p class="digits"></p>
<p class="answer"></p>
</div>
</div>
</body>
</html>