This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
identifying_points_1.html
98 lines (88 loc) · 3.92 KB
/
identifying_points_1.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
<!DOCTYPE html>
<html data-require="math graphie">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Points on the coordinate plane</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="POINTS">
(function() {
var points = [];
while( points.length < 5 ) {
var point = [ randRange( -9, 9 ), randRangeExclude( -9, 9, [-1] ) ];
var isUnique = true;
$.each( points, function( index, pt ) {
if ( point[0] === pt[0] && point[1] === pt[1] ) {
isUnique = false;
return false;
}
});
if ( isUnique ) {
points.unshift( point );
}
}
return points;
})()
</var>
<var id="FORGOTTEN">randRange( 0, POINTS.length - 1 )</var>
<var id="PAIR">function( arr ) {
return "(" + arr.join( ", " ) + ")";
}</var>
</div>
<div class="problems">
<div>
<div class="problem">
<p>Consider the following coordinate pairs:</p>
<p><code><var>$.map( POINTS, PAIR ).join( "\\qquad" )</var></code></p>
</div>
<div class="question">
<p>Which of those pairs is not graphed below?</p>
<div class="render-answer-area-here"></div>
<div class="graphie" id="grid">
graphInit({
range: 10,
scale: 20,
axisArrows: "<->",
tickStep: 1,
labelStep: 2
})
$.each( POINTS, function( index, point ) {
if ( index === FORGOTTEN ) {
return;
}
style({
stroke: "#6495ED",
fill: "#6495ED"
}, function() {
circle( point, 0.2 );
});
});
</div>
</div>
<p class="solution"><code><var>PAIR( POINTS[FORGOTTEN] )</var></code></p>
<ul class="choices" data-category="true">
<li data-each="POINTS as i, point"><code><var>PAIR( point )</var></code></li>
</ul>
</div>
</div>
<div class="hints">
<div data-each="POINTS as i, point" data-unwrap="">
<div class="graphie" data-if="FORGOTTEN !== i" data-update="grid">
label( point, PAIR( point ), "above right" );
</div>
</div>
<div>
<div class="graphie" data-update="grid">
var point = POINTS[FORGOTTEN];
label( point, PAIR( point ), "above right", { color: RED });
circle( point, 0.3, { stroke: RED } );
</div>
<p><code>(<var>POINTS[FORGOTTEN]</var>)</code> was not graphed.</p>
</div>
</div>
</div>
</body>
</html>