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
|
<html>
<head>
<title>Egg | JSXGraph Example</title>
<link rel="stylesheet" type="text/css" href="../../distrib/jsxgraph.css" />
<script type="text/javascript" src="../../distrib/jsxgraphcore.js"></script>
</head>
<body>
<div id="debug" style="display: none"></div>
<center>
<div style="width: 1000px;">
<div style="width:600px; height: 410px;">
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px; text-align: left; float: left;"></div>
<div id="polynomials" style="display: none; width: 600px; height: 400px; margin-left: 10px; text-align: left; padding-left: -200px;"></div>
</div>
<div style="width: 800px; margin-top: 10px;">
<form>
<input type="button" onclick="calculateLocus();" value="Calculate locus of T" />
<input type="button" onclick="showLocusEquation();" value="Show locus equation" />
<input type="button" onclick="showBoard();" value="Show board" />
<input type="button" onclick="showLocusTime(loc)" value="Show locus time" />
<input type="button" onclick="toggleOptimize();" id="opt" value="Optimization is off">
</form>
</div>
</div>
</center>
<script type="text/javascript">
/* <![CDATA[ */
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2, 5, 10, -3], axis: true, grid: false,
keepaspectratio: true, showcopyright: false});
p1 = board.createElement('point', [1, 1]);
p2 = board.createElement('point', [1, 3]);
p3 = board.createElement('point', [8, 1]);
board.options.locus.toOrigin = p1;
board.options.locus.to10 = p2;
l1 = board.createElement('line', [p1, p3]);
c1 = board.createElement('circle', [p1, p2]);
g1 = board.createElement('glider', [4, 4, c1], {name:"G"});
m1 = board.createElement('midpoint', [g1, p3], {color: 'blue'});
c2 = board.createElement('circle', [m1, 1]);
m2 = board.createElement('intersection', [l1, c2, 0], {color: 'blue'});
m3 = board.createElement('midpoint', [m2, g1], {name: "T", color: 'green'});
loc = null;//board.createElement('locus', [m3], {strokeColor: 'red', strokeWidth: '1px'});
opt = false;
function calculateLocus() {
loc = board.create('locus', [m3], {strokeColor: 'black', strokeWidth: '2px'});
}
function showLocusEquation() {
var out = document.getElementById('polynomials');
out.innerHTML = '<ul>';
for(i=0; i<loc.eq.length; i++)
out.innerHTML += '<li>' + loc.eq[i] + ' = 0</li>';
out.innerHTML += '</ul>';
out.style.display = 'block';
document.getElementById('jxgbox').style.display = 'none';
}
function showBoard() {
document.getElementById('polynomials').style.display = 'none';
document.getElementById('jxgbox').style.display = 'block';
}
function dimConstruction() {
var c = [p3, p4, c1, g, p6, c2, p14_1], i, o = getDim();
if(p3.visProp['strokeOpacity'] == o)
o = 1.0;
for(i=0; i<c.length; i++) {
c[i].setProperty({strokeOpacity: o, fillOpacity: o});
}
}
function showLocusTime(l) {
document.getElementById('polynomials').style.display = 'block';
document.getElementById('jxgbox').style.display = 'none';
document.getElementById('polynomials').innerHTML = l.ctime;
}
function toggleOptimize() {
if(opt) {
board.options.locus.translateToOrigin = false;
board.options.locus.translateTo10 = false;
opt = false;
document.getElementById('opt').value = "Optimization is off";
} else {
board.options.locus.translateToOrigin = true;
board.options.locus.translateTo10 = true;
opt = true;
document.getElementById('opt').value = "Optimization is on";
}
}
/* ]]> */
</script>
<br/>
</body>
</html>
|
