Moodle中JSXGraph的JavaScript代码能否与<jsxgraph>标签分离使用？

问题原因 #

Moodle的JSXGraph过滤器默认只会解析<jsxgraph>标签：

• 过滤器会自动为每个<jsxgraph>标签初始化对应的画板实例，这也是你加第三个标签存放代码时会出现空白画板的原因
• JXG核心库会被过滤器延迟加载，直接写在普通<script>标签里的代码执行时，JXG对象大概率还未完成初始化，所以无法正常运行

可行解决方案 #

方案1：隐藏逻辑容器标签（无管理员权限推荐） #

你可以将所有JSXGraph逻辑存放在第三个隐藏的<jsxgraph>标签中，既不会生成可见的空白画板，也能正常初始化前两个画板，代码示例如下：

<table>
    <tr>
        <th><jsxgraph width="600" height="500" box="jxgbox0"></jsxgraph></th>
        <th><jsxgraph width="500" height="500" box="jxgbox1"></jsxgraph></th>
    </tr>
</table>

<!-- 隐藏的逻辑存放标签，不会显示在页面中 -->
<jsxgraph width="0" height="0" style="display:none;" box="jxgbox_hidden">
// 所有JXG逻辑都写在这里
const board0 = JXG.JSXGraph.initBoard('jxgbox0', {boundingbox: [-10, 10, 10, -10]});
const board1 = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-5, 5, 5, -5]});
// 两个画板的联动逻辑也可直接在此实现
</jsxgraph>

该方案无需修改Moodle配置，兼容性最好，完全实现了可见画板标签和逻辑代码的分离。

方案2：全局加载JXG库（有管理员权限可选） #

如果你拥有Moodle站点的管理员权限，可以在站点头部全局引入JSXGraph核心库，之后就可以把所有逻辑写在普通<script>标签中，代码需要用DOM加载完成事件包裹，避免容器未加载导致报错：

document.addEventListener('DOMContentLoaded', function() {
    // 所有JXG逻辑都写在这里
    const board0 = JXG.JSXGraph.initBoard('jxgbox0', {boundingbox: [-10, 10, 10, -10]});
    const board1 = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-5, 5, 5, -5]});
});

使用该方案时，你甚至可以直接用普通<div>作为画板容器，完全不需要使用<jsxgraph>标签。

内容的提问来源于stack exchange，提问作者FlorianL