JSXGraph：带有Moodle的多个板和堆栈

Question

有时能够控制html页面上多个jsxgraph板的放置很方便，例如 https://jsxgraph.org/wiki/index.php?title=sine 。

我知道，如下所述，有可能在Moodle中包含多个板子的问题： https://github.com/jsxgraph/moodleforpaph/moodleformulas_jsxgraph/blob/blob/master/master/readmaster/readmec.md#insert-more-more-than-than-one-one-board -Into-a-question

我的问题是：是否有可能在公式问题中控制董事会的位置？和/或在堆栈问题中可以吗？ - 谢谢！

Answer 1

使用Stack，可以将多个板包含在一个问题中。对于每个JSXGraph块，Stack生成一个DIV，该DIV带有Divid变量中的ID。然后，董事会的DIVS替换问题文本中的JSXGraph块。

董事会交互

如果您希望板相互交互，则需要在单个JSXGRAPH块中编写板的JavaScript代码（封装了一个块中的JavaScript代码）。为此，您应该首先在问题文本中放置一个空的JSXGraph块，该块将生成第一个Div，该DIV具有“ stack-jsxgraph-1”的ID。然后，您添加了第二个块，其中将两个板的代码放入其中。由于基本上只是计数一个数字，因此您可以在JavaScript中使用正则表达式访问第一个板的Divid。

。

为了控制放置位置，您可以使用一些CSS和HTML 例如，您可以将两个JSXGraph块包裹在DIV中，并使此Div用显示：Flex。然后，两个板将水平对齐。您也可以使用网格布局。

示例代码

问题文本的代码可能看起来像：

<!-- Wrapper div flexbox -->
<div style="display: flex;">
<!-- Empty JSXGraph block for the first board-->
[[ jsxgraph width="200px" height="200px"]] [[/ jsxgraph ]]

<!-- JSXGraph block for the second board-->
[[ jsxgraph width="200px" height="200px"]]
/* divid variables */
const divid1 = divid.replace(/[0-9]+/g,divid.match(/[0-9]+/g)-1)
const divid2 = divid;
console.log(divid1, divid2);
/* init boards */
const board1 = JXG.JSXGraph.initBoard(divid1,{ boundingbox: [-5, 5, 5, -5], axis: true });
const board2 = JXG.JSXGraph.initBoard(divid2,{ boundingbox: [-5, 5, 5, -5], axis: true });
[[/ jsxgraph ]]
</div>

堆栈问题然后显示两个董事会：
带有两个jsxgraph板的堆栈问题

此代码在第二个JSXgraph块中创建两个JSXGRAPH板，可以交互，可以交互，彼此。使用Flexbox包装器div完成了位置。我认为这也适用于公式。希望这回答您的问题。

Answer 2

遵循 @bernhard759的提示使用CSS来指导该图的位置。以下CSS代码会产生我喜欢的结果：

.jsxgraph-boards {
    align-items: start;
    justify-content: start;
    margin: 0 0 1rem 0;
}

.jxgbox {
    margin: 1rem 0 0 1rem;
}