This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
rounding_numbers.html
92 lines (86 loc) · 5.51 KB
/
rounding_numbers.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
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rounding numbers</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div data-weight="2">
<div class="vars">
<var id="DIGITS">shuffle( [1, 2, 3, 4, 5, 6, 7, 8, 9], 5 )</var>
<var id="NUM">+DIGITS.join( "" )</var>
<var id="PLACE">randFromArray([ -2, -3 ])</var>
<var id="TPLACE">placesLeftOfDecimal[ -PLACE ]</var>
<var id="ROUNDED">roundTo( PLACE, NUM )</var>
</div>
<div class="question">
<p>Round <code><var>commafy( NUM )</var></code> to the nearest <var>TPLACE</var>.</p>
</div>
<div class="solution" data-forms="integer, decimal"><var>ROUNDED</var></div>
<div class="hints">
<p>There are two ways to think about this problem.</p>
<p>1st way: Look at the <var>placesLeftOfDecimal[ -1 - PLACE ]</var>s digit <code><var>DIGITS[ 5 + PLACE ]</var></code> to see whether to round up or down.</p>
<p data-if="DIGITS[ 5 + PLACE ] >= 5">Because it is <span data-if="DIGITS[ 5 + PLACE ] > 5">more than</span><span data-else="">equal to</span> <code>5</code>, we round up, giving <code><var>ROUNDED</var></code>.</p>
<p data-else="">Because it is less than <code>5</code>, we round down, giving <code><var>commafy( ROUNDED )</var></code>.</p>
<p>2nd way: Consider which end of the number line is closer to <var>NUM</var> - this end is circled in blue.</p>
<div class="graphie">
init({
range: [ [ -0.06 * pow( 10, -PLACE ) , 1.3 * pow( 10, -PLACE ) ], [-1, 1] ],
scale: [ 450 * pow( 10, PLACE ), 40 ]
});
numberLine( floorTo( PLACE , NUM ), ceilTo( PLACE , NUM ) + pow( 10, -( PLACE+2 )) , round( pow( 10, -(PLACE + 1 ))) );
style({ stroke: "#FFA500", fill: "#FFA500", strokeWidth: 3.5 });
ellipse( [ 10 * pow( 10, -( PLACE+1 )) * (NUM - floorTo( PLACE , NUM ))/pow( 10,- (PLACE) ), 0 ], [pow( 10, -PLACE ) / 115, 0.1]);
label( [ 10 * pow(10, -( PLACE+1 )) * ( NUM - floorTo( PLACE , NUM ))/pow( 10,- (PLACE) )], NUM, "below");
style({ stroke: "#6495ED", "fill": "none", strokeWidth: 3.5 });
if( DIGITS[ 5 + PLACE ] >= 5 ) {
ellipse( [ pow( 10, -PLACE ), -0.55 ], [pow( 10, - PLACE - 0.5 ) / 6.5, 0.35] );
} else {
ellipse( [ 0, -0.55 ], [pow( 10, - PLACE - 0.5 ) / 6.5, 0.35] );
}
</div>
</div>
</div>
<div data-weight="3">
<div class="vars">
<var id="DIGITS">shuffle( [1, 2, 3, 4, 5, 6, 7, 8, 9], 6 )</var>
<var id="NUM">+DIGITS.join( "" ) / 10000</var>
<var id="PLACE">randFromArray([ 0, 1, 2 ])</var>
<var id="TPLACE">placesRightOfDecimal[ PLACE ]</var>
<var id="ROUNDED">roundTo( PLACE, NUM )</var>
</div>
<div class="question">
<p>Round <code><var>commafy( NUM )</var></code> to the nearest <var>TPLACE</var>.</p>
</div>
<div class="solution" data-forms="integer, decimal"><var>ROUNDED</var></div>
<div class="hints">
<p>There are two ways to think about this problem.</p>
<p>1st way: Look at the <var>placesRightOfDecimal[ 1 + PLACE ]</var>s digit <code><var>DIGITS[ 2 + PLACE ]</var></code> to see whether to round up or down.</p>
<p data-if="DIGITS[ 2 + PLACE ] >= 5">Because it is <span data-if="DIGITS[ 2 + PLACE ] > 5">more than</span><span data-else="">equal to</span> <code>5</code>, we round up, giving <code><var>ROUNDED</var></code>.</p>
<p data-else="">Because it is less than <code>5</code>, we round down, giving <code><var>commafy( ROUNDED )</var></code>.</p>
<p>2nd way: Consider which end of the number line is closer to <var>NUM</var> - this end is circled in blue.</p>
<div class="graphie">
init({
range: [ [ -0.06 * pow( 10, -PLACE ) , 10.3 * pow( 10, -PLACE ) ], [-1, 1] ],
scale: [ 450 * pow( 10, PLACE ), 40 ]
});
numberLine( floorTo( PLACE , NUM ), ceilTo( PLACE , NUM ) + pow( 10,- (PLACE+2 )) , pow( 10,- (PLACE+1) ) );
style({ stroke: "#FFA500", fill: "#FFA500", strokeWidth: 3.5 });
ellipse( [ 10 * pow(10, -(PLACE+1)) * (NUM - floorTo( PLACE , NUM ))/pow(10,- (PLACE) ), 0 ], [pow(10, -PLACE) / 115, 0.1]);
label( [ 10 * pow(10, -( PLACE+1 )) * ( NUM - floorTo( PLACE , NUM ))/pow(10, -(PLACE) )], NUM, "below");
style({ stroke: "#6495ED", "fill": "none", strokeWidth: 3.5 });
if ( DIGITS[ 2 + PLACE ] >= 5 ) {
ellipse( [ pow( 10, -PLACE ), -0.55 ], [pow( 10, - PLACE - 0.5 ) / 6.5, 0.35] );
} else {
ellipse( [ 0, -0.55 ], [pow( 10, - PLACE - 0.5 ) / 6.5, 0.35] );
}
</div>
</div>
</div>
</div>
</div>
</body>
</html>