JSXGraph logo
JSXGraph
JSXGraph share

Share

Bearing (bidirectional communication)
QR code
<iframe
src="http://jsxgraph.uni-bayreuth.de/share/iframe/bearing-bidirectional-communication"
style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;"
name="JSXGraph example: Bearing (bidirectional communication)"
allowfullscreen
></iframe>
This code has to
<input type="text" id="degrees">
<button onclick="setDirection()">set direction</button>
<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, {
axis: true,
boundingbox: [-2, 1.5, 2, -1.5],
keepaspectratio: true
});
var c = board.create('circle', [
[0, 0], 1
], {fixed:true});
var g = board.create('glider', [-1, 0.5, c], {
name: 'drag me'
}); // global variable
var p0 = board.create('point', [1, 0], {visible: false});
var p1 = board.create('point', [0, 0], {visible: false});
var a = board.create('angle', [p0, p1, g], {withLabel: false, radius: 0.35});
g.on('drag', function() {
document.getElementById('degrees').value = (Math.atan2(g.Y(), g.X()) * 180 / Math.PI).toFixed(0);
});
var setDirection = function() {
var phi = 1 * document.getElementById('degrees').value * Math.PI / 180.0;
var r = c.Radius();
g.moveTo([r * Math.cos(phi), r * Math.sin(phi)], 1000);
}
</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, {
axis: true,
boundingbox: [-2, 1.5, 2, -1.5],
keepaspectratio: true
});
var c = board.create('circle', [
[0, 0], 1
], {fixed:true});
var g = board.create('glider', [-1, 0.5, c], {
name: 'drag me'
}); // global variable
var p0 = board.create('point', [1, 0], {visible: false});
var p1 = board.create('point', [0, 0], {visible: false});
var a = board.create('angle', [p0, p1, g], {withLabel: false, radius: 0.35});
g.on('drag', function() {
document.getElementById('degrees').value = (Math.atan2(g.Y(), g.X()) * 180 / Math.PI).toFixed(0);
});
var setDirection = function() {
var phi = 1 * document.getElementById('degrees').value * Math.PI / 180.0;
var r = c.Radius();
g.moveTo([r * Math.cos(phi), r * Math.sin(phi)], 1000);
}

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.
JSXGraph v1.11.1 Copyright (C) see https://jsxgraph.org0.511.5−0.5−1−1.50.511.5−0.5−1−1.5
0,0
–o+←↓↑→
drag me
A
B
<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
], {fixed:true});
var g = board.create('glider', [-1, 0.5, c], {
name: 'drag me'
}); // global variable
var p0 = board.create('point', [1, 0], {visible: false});
var p1 = board.create('point', [0, 0], {visible: false});
var a = board.create('angle', [p0, p1, g], {withLabel: false, radius: 0.35});
g.on('drag', function() {
document.getElementById('degrees').value = (Math.atan2(g.Y(), g.X()) * 180 / Math.PI).toFixed(0);
});
var setDirection = function() {
var phi = 1 * document.getElementById('degrees').value * Math.PI / 180.0;
var r = c.Radius();
g.moveTo([r * Math.cos(phi), r * Math.sin(phi)], 1000);
}

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.