JSXGraph test

Template for JSXGraph

by Javier Puértolas

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraphcore.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraph.css">
<input id="myButton" type="button" value="Show popup">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

CSS

.myText {
    border: 1px black solid;
    border-radius: 5px;
    padding:10px;
    background-color: #ffcccc;
}

JavaScript

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

var txt = board.create('text', [3, 3, "Hello"], {
    cssClass: 'myText', 
    highlightCssClass: 'myText', 
    visible: false
});

// Close the pop-up on click
txt.on('down', function() {
    txt.setAttribute({ visible: false });
});

document.getElementById('myButton').onclick = function() {
	txt.setAttribute({ visible: true });
}