// Define the ids of your boards in BOARDID0, BOARDID1,...
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Addition of complex numbers x and y'], {
fontSize: 20
});
var org = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [2, 2], {
style: 5,
color: 'blue',
name: 'x'
});
var y = board.create('point', [-1, -3], {
style: 5,
color: 'blue',
name: 'y'
});
var xy = board.create('point',
["X(x) + X(y)", "Y(x) + Y(y)"], {
style: 7,
color: 'green',
name: 'x+y'
});
var ax = board.create('arrow', [org, x], {
strokeColor: 'blue'
});
var ay = board.create('arrow', [org, y], {
strokeColor: 'blue'
});
var axy = board.create('arrow', [org, xy], {
strokeColor: 'red'
});
var ax2 = board.create('arrow', [x, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
var ay2 = board.create('arrow', [y, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
})();
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID1, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Multiplication of complex numbers x and y'], {
fontSize: 20
});
var org2 = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [1, 0], {
style: 4,
color: 'blue',
name: 'x'
});
var y = board.create('point', [0, 2], {
style: 4,
color: 'red',
strokeColor: 'red',
name: 'y'
});
var xy = board.create('point',
["X(x) * X(y) - Y(x) * Y(y)", "X(x) * Y(y) + X(y) * Y(x)"], {
style: 7,
fillColor: 'green',
strokeColor: 'green',
name: 'x*y'
});
var c = board.create('circle', [org2, 1], {
strokeWidth: 1,
dash: 1
});
})();
This example is not licensed.
/*
This example is not licensed.
*/
const BOARDID0 = 'your_div_id_0'; // Insert your 1st board id here!
const BOARDID1 = 'your_div_id_1'; // Insert your 2nd board id here!
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Addition of complex numbers x and y'], {
fontSize: 20
});
var org = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [2, 2], {
style: 5,
color: 'blue',
name: 'x'
});
var y = board.create('point', [-1, -3], {
style: 5,
color: 'blue',
name: 'y'
});
var xy = board.create('point',
["X(x) + X(y)", "Y(x) + Y(y)"], {
style: 7,
color: 'green',
name: 'x+y'
});
var ax = board.create('arrow', [org, x], {
strokeColor: 'blue'
});
var ay = board.create('arrow', [org, y], {
strokeColor: 'blue'
});
var axy = board.create('arrow', [org, xy], {
strokeColor: 'red'
});
var ax2 = board.create('arrow', [x, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
var ay2 = board.create('arrow', [y, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
})();
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID1, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Multiplication of complex numbers x and y'], {
fontSize: 20
});
var org2 = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [1, 0], {
style: 4,
color: 'blue',
name: 'x'
});
var y = board.create('point', [0, 2], {
style: 4,
color: 'red',
strokeColor: 'red',
name: 'y'
});
var xy = board.create('point',
["X(x) * X(y) - Y(x) * Y(y)", "X(x) * Y(y) + X(y) * Y(x)"], {
style: 7,
fillColor: 'green',
strokeColor: 'green',
name: 'x*y'
});
var c = board.create('circle', [org2, 1], {
strokeWidth: 1,
dash: 1
});
})();
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
<div id="board-0" class="jxgbox" style="aspect-ratio: 14 / 10; width: 100%;" data-ar="14 / 10"></div>
</div>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
<div id="board-1" class="jxgbox" style="aspect-ratio: 14 / 10; width: 100%;" data-ar="14 / 10"></div>
</div>
<script type = "text/javascript">
/*
This example is not licensed.
*/
const BOARDID0 = 'board-0';
const BOARDID1 = 'board-1';
const BOARDID = BOARDID0;
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Addition of complex numbers x and y'], {
fontSize: 20
});
var org = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [2, 2], {
style: 5,
color: 'blue',
name: 'x'
});
var y = board.create('point', [-1, -3], {
style: 5,
color: 'blue',
name: 'y'
});
var xy = board.create('point',
["X(x) + X(y)", "Y(x) + Y(y)"], {
style: 7,
color: 'green',
name: 'x+y'
});
var ax = board.create('arrow', [org, x], {
strokeColor: 'blue'
});
var ay = board.create('arrow', [org, y], {
strokeColor: 'blue'
});
var axy = board.create('arrow', [org, xy], {
strokeColor: 'red'
});
var ax2 = board.create('arrow', [x, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
var ay2 = board.create('arrow', [y, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
})();
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID1, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Multiplication of complex numbers x and y'], {
fontSize: 20
});
var org2 = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [1, 0], {
style: 4,
color: 'blue',
name: 'x'
});
var y = board.create('point', [0, 2], {
style: 4,
color: 'red',
strokeColor: 'red',
name: 'y'
});
var xy = board.create('point',
["X(x) * X(y) - Y(x) * Y(y)", "X(x) * Y(y) + X(y) * Y(x)"], {
style: 7,
fillColor: 'green',
strokeColor: 'green',
name: 'x*y'
});
var c = board.create('circle', [org2, 1], {
strokeWidth: 1,
dash: 1
});
})();
</script>
<jsxgraph width="100%, 100%" aspect-ratio="14 / 10, 14 / 10" numberOfBoards="2" title="Complex numbers arithmetics" description="This construction was copied from JSXGraph examples database: https://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="false">
/*
This example is not licensed.
*/
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Addition of complex numbers x and y'], {
fontSize: 20
});
var org = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [2, 2], {
style: 5,
color: 'blue',
name: 'x'
});
var y = board.create('point', [-1, -3], {
style: 5,
color: 'blue',
name: 'y'
});
var xy = board.create('point',
["X(x) + X(y)", "Y(x) + Y(y)"], {
style: 7,
color: 'green',
name: 'x+y'
});
var ax = board.create('arrow', [org, x], {
strokeColor: 'blue'
});
var ay = board.create('arrow', [org, y], {
strokeColor: 'blue'
});
var axy = board.create('arrow', [org, xy], {
strokeColor: 'red'
});
var ax2 = board.create('arrow', [x, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
var ay2 = board.create('arrow', [y, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
})();
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID1, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Multiplication of complex numbers x and y'], {
fontSize: 20
});
var org2 = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [1, 0], {
style: 4,
color: 'blue',
name: 'x'
});
var y = board.create('point', [0, 2], {
style: 4,
color: 'red',
strokeColor: 'red',
name: 'y'
});
var xy = board.create('point',
["X(x) * X(y) - Y(x) * Y(y)", "X(x) * Y(y) + X(y) * Y(x)"], {
style: 7,
fillColor: 'green',
strokeColor: 'green',
name: 'x*y'
});
var c = board.create('circle', [org2, 1], {
strokeWidth: 1,
dash: 1
});
})();
</jsxgraph>
/*
This example is not licensed.
*/
const BOARDID0 = 'your_div_id_0'; // Insert your 1st board id here!
const BOARDID1 = 'your_div_id_1'; // Insert your 2nd board id here!
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Addition of complex numbers x and y'], {
fontSize: 20
});
var org = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [2, 2], {
style: 5,
color: 'blue',
name: 'x'
});
var y = board.create('point', [-1, -3], {
style: 5,
color: 'blue',
name: 'y'
});
var xy = board.create('point',
["X(x) + X(y)", "Y(x) + Y(y)"], {
style: 7,
color: 'green',
name: 'x+y'
});
var ax = board.create('arrow', [org, x], {
strokeColor: 'blue'
});
var ay = board.create('arrow', [org, y], {
strokeColor: 'blue'
});
var axy = board.create('arrow', [org, xy], {
strokeColor: 'red'
});
var ax2 = board.create('arrow', [x, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
var ay2 = board.create('arrow', [y, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
})();
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID1, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Multiplication of complex numbers x and y'], {
fontSize: 20
});
var org2 = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [1, 0], {
style: 4,
color: 'blue',
name: 'x'
});
var y = board.create('point', [0, 2], {
style: 4,
color: 'red',
strokeColor: 'red',
name: 'y'
});
var xy = board.create('point',
["X(x) * X(y) - Y(x) * Y(y)", "X(x) * Y(y) + X(y) * Y(x)"], {
style: 7,
fillColor: 'green',
strokeColor: 'green',
name: 'x*y'
});
var c = board.create('circle', [org2, 1], {
strokeWidth: 1,
dash: 1
});
})();
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
<div id="board-0" class="jxgbox" style="aspect-ratio: 14 / 10; width: 100%;" data-ar="14 / 10"></div>
</div>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
<div id="board-1" class="jxgbox" style="aspect-ratio: 14 / 10; width: 100%;" data-ar="14 / 10"></div>
</div>
<script type = "text/javascript">
/*
This example is not licensed.
*/
const BOARDID0 = 'board-0';
const BOARDID1 = 'board-1';
const BOARDID = BOARDID0;
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Addition of complex numbers x and y'], {
fontSize: 20
});
var org = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [2, 2], {
style: 5,
color: 'blue',
name: 'x'
});
var y = board.create('point', [-1, -3], {
style: 5,
color: 'blue',
name: 'y'
});
var xy = board.create('point',
["X(x) + X(y)", "Y(x) + Y(y)"], {
style: 7,
color: 'green',
name: 'x+y'
});
var ax = board.create('arrow', [org, x], {
strokeColor: 'blue'
});
var ay = board.create('arrow', [org, y], {
strokeColor: 'blue'
});
var axy = board.create('arrow', [org, xy], {
strokeColor: 'red'
});
var ax2 = board.create('arrow', [x, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
var ay2 = board.create('arrow', [y, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
})();
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID1, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Multiplication of complex numbers x and y'], {
fontSize: 20
});
var org2 = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [1, 0], {
style: 4,
color: 'blue',
name: 'x'
});
var y = board.create('point', [0, 2], {
style: 4,
color: 'red',
strokeColor: 'red',
name: 'y'
});
var xy = board.create('point',
["X(x) * X(y) - Y(x) * Y(y)", "X(x) * Y(y) + X(y) * Y(x)"], {
style: 7,
fillColor: 'green',
strokeColor: 'green',
name: 'x*y'
});
var c = board.create('circle', [org2, 1], {
strokeWidth: 1,
dash: 1
});
})();
</script>
<jsxgraph width="100%, 100%" aspect-ratio="14 / 10, 14 / 10" numberOfBoards="2" title="Complex numbers arithmetics" description="This construction was copied from JSXGraph examples database: https://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="false">
/*
This example is not licensed.
*/
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Addition of complex numbers x and y'], {
fontSize: 20
});
var org = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [2, 2], {
style: 5,
color: 'blue',
name: 'x'
});
var y = board.create('point', [-1, -3], {
style: 5,
color: 'blue',
name: 'y'
});
var xy = board.create('point',
["X(x) + X(y)", "Y(x) + Y(y)"], {
style: 7,
color: 'green',
name: 'x+y'
});
var ax = board.create('arrow', [org, x], {
strokeColor: 'blue'
});
var ay = board.create('arrow', [org, y], {
strokeColor: 'blue'
});
var axy = board.create('arrow', [org, xy], {
strokeColor: 'red'
});
var ax2 = board.create('arrow', [x, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
var ay2 = board.create('arrow', [y, xy], {
strokeColor: 'blue',
strokeWidth: 1,
dash: 1
});
})();
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID1, {
boundingbox: [-6, 6, 8, -4],
axis: true
});
var txt = board.create('text', [-4, 4.5, 'Multiplication of complex numbers x and y'], {
fontSize: 20
});
var org2 = board.create('point', [0, 0], {
style: 10,
visible: true,
fixed: true,
name: ' '
});
var x = board.create('point', [1, 0], {
style: 4,
color: 'blue',
name: 'x'
});
var y = board.create('point', [0, 2], {
style: 4,
color: 'red',
strokeColor: 'red',
name: 'y'
});
var xy = board.create('point',
["X(x) * X(y) - Y(x) * Y(y)", "X(x) * Y(y) + X(y) * Y(x)"], {
style: 7,
fillColor: 'green',
strokeColor: 'green',
name: 'x*y'
});
var c = board.create('circle', [org2, 1], {
strokeWidth: 1,
dash: 1
});
})();
</jsxgraph>