Share JSXGraph: example "Bearing (bidirectional communication)"

JSXGraph
Share JSXGraph: example "Bearing (bidirectional communication)"
This website is a beta version. The official release will be in **2023**.

Bearing (bidirectional communication)

This is an example of _bidirectional communication_ of JSXGraph with other elements of the web page. 1. One can type a new value for the angle into the text box and 2. see the actual value of the angle in the same text box when dragging the glider.
<input type="text" id="degrees">
<button onclick="setDirection()">set direction</button>
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    axis: true,
    boundingbox: [-2, 1.5, 2, -1.5],
    keepaspectratio: true
});
var c = board.create('circle', [
    [0, 0], 1
]);
var p = board.create('glider', [-1, 0.5, c], {
    name: 'drag me'
}); // global variable
p.on('drag', function() {
    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();
    p.moveTo([r * Math.cos(phi), r * Math.sin(phi)], 1000);

}