JSXGraph
JSXGraph share

Share

Adding JSXGraph events
QR code 
<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/adding-jsxgraph-events" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Adding JSXGraph events" 
    allowfullscreen
></iframe>
This code has to 
<p id="myOutput"> </p>
 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>
 
<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';
 
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-4, 4, 4, -4],
        keepaspectratio: true
    });
    
    var p = board.create('point', [1, 1], {
        size: 5,
        fixed: true
    });
    p.on('over', (e) => {
        document.getElementById('myOutput').innerHTML = "Point " + p.name;
    });
    
    p.on('out', (e) => {
        document.getElementById('myOutput').innerHTML = ' ';
    });
    
    var p2 = board.create('point', [-1, 1], {
        size: 5
    });
    p2.on('over', function(e) {
        document.getElementById('myOutput').innerHTML = "Point " + this.name;
    });
    p2.on('out', function(e) {
        document.getElementById('myOutput').innerHTML = ' ';
    });
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/
 
Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/
 
const BOARDID = 'your_div_id'; // Insert your id here!
 
const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-4, 4, 4, -4],
    keepaspectratio: true
});
 
var p = board.create('point', [1, 1], {
    size: 5,
    fixed: true
});
p.on('over', (e) => {
    document.getElementById('myOutput').innerHTML = "Point " + p.name;
});
 
p.on('out', (e) => {
    document.getElementById('myOutput').innerHTML = ' ';
});
 
var p2 = board.create('point', [-1, 1], {
    size: 5
});
p2.on('over', function(e) {
    document.getElementById('myOutput').innerHTML = "Point " + this.name;
});
p2.on('out', function(e) {
    document.getElementById('myOutput').innerHTML = ' ';
});

It is possible to supply user-defined defined functions for certain events. The user-defined functions are called additionally to the default JSXGraph events. For the events down and up the user-supplied event handlers are called before the default JSXGraph event handler. For the event update the user-supplied handler is called after the default JSXGraph event handler which is an update of the board.

A user-supplied event handler can be defined by the method on:

   var p = board.create('point',[1,1]);
   p.on('update', function(e) { /* do something ... */);

The possible events are listed in the API docs for elements, see Event Summary and board, see Event Summary.

As of version 1.5.0, it is only possible to access the element via this if the event listener is supplied as regular JavaScript function and not as arrow function.

 

A
B
<p id="myOutput"> </p>
// Define the id of your board in BOARDID
 
const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-4, 4, 4, -4],
    keepaspectratio: true
});
 
var p = board.create('point', [1, 1], {
    size: 5,
    fixed: true
});
p.on('over', (e) => {
    document.getElementById('myOutput').innerHTML = "Point " + p.name;
});
 
p.on('out', (e) => {
    document.getElementById('myOutput').innerHTML = ' ';
});
 
var p2 = board.create('point', [-1, 1], {
    size: 5
});
p2.on('over', function(e) {
    document.getElementById('myOutput').innerHTML = "Point " + this.name;
});
p2.on('out', function(e) {
    document.getElementById('myOutput').innerHTML = ' ';
});

license

This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.