From JSXGraph Wiki
Revision as of 14:28, 30 June 2010 by A WASSERMANN (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

This is an example of bidirectional communication of JSXGraph with other elements of the web page. a You can type a new value for the angle into the text box and see the actual value of the angle in the text box.

The underlying JavaScript code

<input type="text" id="degrees">
<input type="button" value="set direction" onclick="setDirection()">
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,boundingbox:[-2,1.5,2,-1.5],keepaspectratio:true});
var c = brd.create('circle',[[0,0],1]);
var p = brd.create('glider',[-1,0.5,c],{name:'drag me'}); // global variable
                  document.getElementById('degrees').value = (Math.atan2(p.Y(),p.X())*180/Math.PI).toFixed(0);

var setDirection = function() {
   var phi = 1*document.getElementById('degrees').value*Math.PI/180.0;
   var r = c.Radius();


Version 2

The underlying JavaScript code

<input type="text" id="degrees">
<input type="button" value="set direction" onclick="setDirection2()">
var brd2 = JXG.JSXGraph.initBoard('box2',{axis:true,boundingbox:[-2,1.5,2,-1.5],keepaspectratio:true});
var p1 = brd2.create('point',[0,0], {visible:false, fixed:true});
var p2 = brd2.create('point',[1,0]);
var p3 = brd2.create('point',[0,1]);
var a = brd2.create('arc',[p1,p2,p3]);

var q = brd2.create('glider',[0.5,0.5,a],{name:'drag me'}); // global variable

                  document.getElementById('degrees2').value = (Math.atan2(q.Y(),q.X())*180/Math.PI).toFixed(0);

var setDirection2 = function() {
   var phi = 1*document.getElementById('degrees2').value*Math.PI/180.0;
   var r = a.Radius();