forked from Khan/khan-exercises
/
domain_and_range_0.5.html
121 lines (105 loc) · 4.47 KB
/
domain_and_range_0.5.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html data-require="math graphie interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Domain and range of a function 0.5</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="ANIM_SPEED">1500</var>
<var id="DOMAIN">[ randRange( -9, -1 ), randRange( 1, 9 ) ]</var>
<var id="FUNCTION_PATH">
(function() {
var functionPath = [];
var prev;
var push = function( val ) {
prev = val;
functionPath.push( prev );
};
push([ DOMAIN[0], randRange( -5, 5 ) ]);
for( var i = DOMAIN[0]+1; i <= DOMAIN[1]; i++ ) {
if ( abs( randRangeNonZero( -10, 10 ) < 2 ) && prev[1] < 8 ) {
push([i, prev[1]+1]);
} else if ( abs( randRangeNonZero( -10, 10 ) < 2 ) && prev[1] > -8 ) {
push([i, prev[1]-1]);
} else if ( abs( randRangeNonZero( -10, 10 ) < 2 ) && prev[1] < 7 ) {
push([i, prev[1]+2]);
} else if ( abs( randRangeNonZero( -10, 10 ) < 3 ) && prev[1] > -7 ) {
push([i, prev[1]-2]);
} else {
push([i, prev[1]]);
}
}
return functionPath;
})()
</var>
<var id="RANGE">
(function() {
var values = jQuery.map( FUNCTION_PATH, function( p ) { return p[1]; } );
return [ min.apply( null, values ), max.apply( null, values ) ];
})()
</var>
</div>
<div class="problems">
<div id="domain">
<p class="question">The function <code>f(x)</code> is graphed; what is its domain?</p>
<div id="graph" class="graphie">
graphInit({
range: 10,
scale: 20,
axisArrows: "<->",
tickStep: 1,
labelStep: 1,
unityLabels: false,
labelFormat: function( s ) { return "\\small{" + s + "}"; }
});
graph.fn_path = path( FUNCTION_PATH, { stroke: BLUE } );
circle( FUNCTION_PATH[0], 0.15, { stroke: "none", fill: BLUE } );
circle( FUNCTION_PATH[ FUNCTION_PATH.length - 1], 0.15, { stroke: "none", fill: BLUE } );
</div>
<p class="solution" data-type="multiple"><span class="sol"><var>DOMAIN[0]</var></span><code>\;\le x\le\;</code><span class="sol"><var>DOMAIN[1]</var></span></p>
<div class="hints">
<p>For what values of <code>x</code> does <code>f(x)</code> have a value?</p>
<div>
<p>Look at the horizontal axis as if it were a number line.</p>
<div class="graphie" data-update="graph">
var domain_path = graph.fn_path.clone();
var tmp_path = path( jQuery.map( FUNCTION_PATH, function( p ) { return [[ p[0], 0 ]]; }), { stroke: "none" } );
domain_path.animate( { path: tmp_path.attrs.path, "stroke-width": 4, stroke: GREEN }, ANIM_SPEED, "ease-in-out");
circle( [ FUNCTION_PATH[0][0], 0 ], 0.3, { stroke: "none", fill: GREEN, "fill-opacity": 0 } )
.animate( { "fill-opacity": 1.0 }, ANIM_SPEED, "ease-in-out" );
circle( [ FUNCTION_PATH[ FUNCTION_PATH.length - 1 ][0], 0 ], 0.3, { stroke: "none", fill: GREEN, "fill-opacity": 0 } )
.animate( { "fill-opacity": 1.0 }, ANIM_SPEED, "ease-in-out" );
tmp_path.remove();
</div>
</div>
<p><code><var>DOMAIN[0]</var>\le x\le <var>DOMAIN[1]</var></code></p>
</div>
</div>
<div id="range" data-type="domain">
<p class="question">The function <code>f(x)</code> is graphed; what is its range?</p>
<p class="solution" data-type="multiple"><span class="sol"><var>RANGE[0]</var></span><code>\;\le f(x)\le\;</code><span class="sol"><var>RANGE[1]</var></span></p>
<div class="hints">
<p>What values can <code>f(x)</code> have?</p>
<div>
<p>Look at the vertical axis as if it were a number line.</p>
<div class="graphie" data-update="graph">
var range_path = graph.fn_path.clone();
var tmp_path = path( jQuery.map( FUNCTION_PATH, function( p ) { return [[ 0, p[1] ]]; }), { stroke: "none" } );
range_path.animate( { path: tmp_path.attrs.path, "stroke-width": 4, stroke: GREEN }, ANIM_SPEED, "ease-in-out");
circle( [ 0, RANGE[0] ], 0.3, { stroke: "none", fill: GREEN, "fill-opacity": 0 } )
.animate( { "fill-opacity": 1.0 }, ANIM_SPEED, "ease-in-out" );
circle( [ 0, RANGE[1] ], 0.3, { stroke: "none", fill: GREEN, "fill-opacity": 0 } )
.animate( { "fill-opacity": 1.0 }, ANIM_SPEED, "ease-in-out" );
tmp_path.remove();
</div>
</div>
<p><code><var>RANGE[0]</var>\le f(x)\le <var>RANGE[1]</var></code></p>
</div>
</div>
</div>
</div>
</body>
</html>