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
/
measuring_segments.html
65 lines (63 loc) · 3.24 KB
/
measuring_segments.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
<!DOCTYPE html>
<html data-require="math graphie expressions">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Measuring segments</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div>
<div class="vars">
<var id="POINTS">sortNumbers( randRangeUnique( -5, 5, 4 ) )</var>
<var id="COLORS">[ BLUE, GREEN, PINK, ORANGE ]</var>
<var id="IDX_1,IDX_2">randRangeUnique( 0, 4, 2 )</var>
<var id="POINT_1">[ "A", "B", "C", "D" ][ IDX_1 ]</var>
<var id="POINT_2">[ "A", "B", "C", "D" ][ IDX_2 ]</var>
<var id="SEGMENT">POINT_1 + POINT_2</var>
<var id="SOLUTION">abs( POINTS[ IDX_1 ] - POINTS[ IDX_2 ] )</var>
</div>
<p class="question">What is <code><var>SEGMENT</var></code>?</p>
<div class="problem">
<div class="graphie" id="number-line">
init({
range: [ [ -6, 6 ], [ -1, 1 ] ]
});
style({ stroke: "#999" });
line( [ -5, 0 ], [ 5, 0 ] );
for ( var x = -5; x <= 5; x++ ) {
line( [ x, -0.2 ], [ x, 0.2 ] );
label( [ x, -0.53 ], String( x ).replace( /-(\d)/g, "\\llap{-}$1" ), "center", { color: "#999" } );
}
style({ strokeWidth: 3.5 });
line( [ 0, -0.2], [0, 0.2]);
style({ stroke: COLORS[ 0 ], fill: COLORS[ 0 ] });
circle( [ POINTS[ 0 ], 0 ], 0.10 );
style({ stroke: COLORS[ 1 ], fill: COLORS[ 1 ] });
circle( [ POINTS[ 1 ], 0 ], 0.10 );
style({ stroke: COLORS[ 2 ], fill: COLORS[ 2 ] });
circle( [ POINTS[ 2 ], 0 ], 0.10 );
style({ stroke: COLORS[ 3 ], fill: COLORS[ 3 ] });
circle( [ POINTS[ 3 ], 0 ], 0.10 );
label( [ POINTS[ 0 ], 0 ], "A", "above", { color: COLORS[ 0 ] } );
label( [ POINTS[ 1 ], 0 ], "B", "above", { color: COLORS[ 1 ] } );
label( [ POINTS[ 2 ], 0 ], "C", "above", { color: COLORS[ 2 ] } );
label( [ POINTS[ 3 ], 0 ], "D", "above", { color: COLORS[ 3 ] } );
</div>
</div>
<div class="solution" data-forms="integer"><var>SOLUTION</var></div>
<div class="hints">
<p>
<code><var>SEGMENT</var></code> means the distance from <code>\color{<var>COLORS[ IDX_1 ]</var>}{<var>POINT_1</var>}</code> to
<code>\color{<var>COLORS[ IDX_2 ]</var>}{<var>POINT_2</var>}</code>.
</p>
<p><code><var>SEGMENT</var> = |\color{<var>COLORS[ IDX_1 ]</var>}{<var>POINTS[ IDX_1 ]</var>} - \color{<var>COLORS[ IDX_2 ]</var>}{<var>POINTS[ IDX_2 ]</var>}|</code></p>
<p><code><var>SEGMENT</var> = |<var>POINTS[ IDX_1 ] - POINTS[ IDX_2 ]</var>|</code></p>
<p><code><var>SEGMENT</var> = <var>SOLUTION</var></code></p>
</div>
</div>
</div>
</div>
</body>
</html>