JSXGraph in Moodle: Is it possible to separate the JavaScript code from the <jsxgraph> tags? - moodle

Question

Say one would like to add multiple interdependent JSXGraph boards to a Moodle page, but for some reason they should not be all in the same tag. In the following example, the two boards are placed in different table cells:
<table>
<tr>
<th><jsxgraph width="600" height="500" box="jxgbox0"></jsxgraph></th>
<th><jsxgraph width="500" height="500" box="jxgbox1">
... all JXG code here...
</jsxgraph></th>
</tr>
</table>
In the example above, it is a bit peculiar the JXG code rests within the second JSXGraph tag, but it works.
What I would like to is separate the code from either one of the boards and place it within some tag below the table, for example:
<table>
<tr>
<th><jsxgraph width="600" height="500" box="jxgbox0"></jsxgraph></th>
<th><jsxgraph width="500" height="500" box="jxgbox1"></jsxgraph></th>
</tr>
</table>
<script type="text/javascript">
... all JXG code here...
</script>
The problem is that this does not work. Placing the code in a third <jsxgraph> tag actually works in the sense that the two initial boards are filled, but a third (empty) board is created.
My question now is: Is it possible to separate the JavaScript code from all of the <jsxgraph> tags that are to be created and filled on a page?

Answer 1

There is a contributed plugin for Moodle for jsxgraph
https://moodle.org/plugins/filter_jsxgraph
In Moodle, a filter basically converts special content before being output.
I haven't used the jsxgraph filter myself but there is an example here
https://github.com/jsxgraph/moodle-filter_jsxgraph/blob/master/README.md
<jsxgraph width="500" aspect-ratio="1/1">
var brd = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,5,5,-5], axis:true});
var p = brd.create('point', [1,2]);
</jsxgraph>
If you already have the filter installed, then it might be because the box="jxgbox0" attribute in your example has been deprecated.
boardid or box Deprecated
This attribute defines, which id the graph of JSXGraph will have. Please use the id stored in the constant BOARDID within the JavaScript block, especially for the first parameter in JXG.JSXGraph.initBoard(...). Look at the examples at Usage.