JSXGraph
JSXGraph share

Share

Add points on click
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/add-points-on-click" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Add points on click" 
    allowfullscreen
></iframe>
This code has to 
<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: [-5, 5, 5, -5],
        axis: true
    });
    
    var getMouseCoords = function(e, i) {
            var pos = board.getMousePosition(e, i);
            return new JXG.Coords(JXG.COORDS_BY_SCREEN, pos, board);
        },
    
        handleDown = function(e) {
            var canCreate = true,
                i, coords, el;
    
            if (e[JXG.touchProperty]) {
                // index of the finger that is used to extract the coordinates
                i = 0;
            }
            coords = getMouseCoords(e, i);
    
            for (el in board.objects) {
                if (JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
                    canCreate = false;
                    break;
                }
            }
    
            if (canCreate) {
                board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);
            }
        };
    
    board.on('down', handleDown);
 </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: [-5, 5, 5, -5],
    axis: true
});

var getMouseCoords = function(e, i) {
        var pos = board.getMousePosition(e, i);
        return new JXG.Coords(JXG.COORDS_BY_SCREEN, pos, board);
    },

    handleDown = function(e) {
        var canCreate = true,
            i, coords, el;

        if (e[JXG.touchProperty]) {
            // index of the finger that is used to extract the coordinates
            i = 0;
        }
        coords = getMouseCoords(e, i);

        for (el in board.objects) {
            if (JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
                canCreate = false;
                break;
            }
        }

        if (canCreate) {
            board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);
        }
    };

board.on('down', handleDown);
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Add points on click" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   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 board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-5, 5, 5, -5],
       axis: true
   });
   
   var getMouseCoords = function(e, i) {
           var pos = board.getMousePosition(e, i);
           return new JXG.Coords(JXG.COORDS_BY_SCREEN, pos, board);
       },
   
       handleDown = function(e) {
           var canCreate = true,
               i, coords, el;
   
           if (e[JXG.touchProperty]) {
               // index of the finger that is used to extract the coordinates
               i = 0;
           }
           coords = getMouseCoords(e, i);
   
           for (el in board.objects) {
               if (JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
                   canCreate = false;
                   break;
               }
           }
   
           if (canCreate) {
               board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);
           }
       };
   
   board.on('down', handleDown);
</jsxgraph>

Add points on click

Technical
This example shows how to add a point whenever *the user clicks* on the board. The function `getMouseCoords` extracts the click coordinates from the event object and returns a `JXG.Coords` object with the point's coordinates on the board. The for loop in the event listener is to check if there is already a point as we don't want to create a point in this case.
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: true
});

var getMouseCoords = function(e, i) {
        var pos = board.getMousePosition(e, i);
        return new JXG.Coords(JXG.COORDS_BY_SCREEN, pos, board);
    },

    handleDown = function(e) {
        var canCreate = true,
            i, coords, el;

        if (e[JXG.touchProperty]) {
            // index of the finger that is used to extract the coordinates
            i = 0;
        }
        coords = getMouseCoords(e, i);

        for (el in board.objects) {
            if (JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
                canCreate = false;
                break;
            }
        }

        if (canCreate) {
            board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);
        }
    };

board.on('down', handleDown);

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.