JSXGraph in Moodle: Is it possible to separate the JavaScript code from the tags?

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?

score 0 · Answer 1 · answered Nov 09 '21 at 10:47

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.

It's weird though, that addressing the two boards does actually work in my example. And it's not that I cannot get the desired output. I would just find the source code cleaner if I could place the `` elements somewhere and the code for their content some other place. — FlorianL, Nov 15 '21 at 19:07

JSXGraph in Moodle: Is it possible to separate the JavaScript code from the tags?

1 Answers1