Netzwerk Mathematik/Physik + E-Learning

Gekoppelte Boards

Es können mehrere JSXGraph-Boards innerhalb des Aufgabentextes o.ä. erzeugt werden, indem man für jedes Board ein entsprechendes JSXGraph-Objekt anlegt. Agieren die Boards unabhängig voneinander bietet es sich an, den Code für das jeweilige Board im jeweiligen JSXGraph-Element stehen zu haben.\\[1ex]

Bei z.B. zwei gekoppelten Boards (siehe Beispiel Kosinus),

wo Aktionen innerhalb des ersten Boards das zweite Board beeinflussen (und auch umgekehrt), bietet es sich an im ersten JSXGraph-Objekt nur das erste Board zu initialisieren (damit es auch nach Abgabe der Aufgabe als Bild erscheint) und dieses über eine globale Variable für das zweite Board verfügbar zu machen. Im Code für das (eigentlich) zweite Board können nun auch sämtliche Elemente für das erste Board erzeugt werden und die für die Kopplung notwendigen Variablen sind für das zweite Board ebenfalls vorhanden (ohne dass diese selbst als globale Variablen zur Verfügung stehen müssen).

Der folgende Code liefert ein Minimalbeispiel für zwei gekoppelte Slider.

Code für das erste JSXGraph-Objekt:

document.getElementById($\color{red}{\textbf{'JSX_CONTAINER_ID'}}$).style.height=$\color{red}{\textbf{'100px'}}$; $\color{darkviolet}{\textbf{//Container-Groesse anpassen}}$

const brd1=JXG.JSXGraph.initBoard($\color{red}{\textbf{'JSX_CONTAINER_ID'}}$,{axis:$\color{blue}{\textbf{false}}$, boundingbox:[0, 2, 10, 0]}); $\color{darkviolet}{\textbf{//Board 1}}$

window.brd1 = brd1; $\color{darkviolet}{\textbf{//globale Variable}}$

Code für das zweite JSXGraph-Objekt:

document.getElementById($\color{red}{\textbf{'JSX_CONTAINER_ID'}}$).style.height=$\color{red}{\textbf{'100px'}}$; $\color{darkviolet}{\textbf{//Container-Groesse anpassen}}$

const mu1=brd1.create('slider', [[1,1],[9,1],[0,2,10]], {withLabel:$\color{blue}{\textbf{false}}$}); $\color{darkviolet}{\textbf{//slider in Board 1}}$

const brd2=JXG.JSXGraph.initBoard('JSX_CONTAINER_ID',{axis:$\color{blue}{\textbf{false}}$, boundingbox:[0, 2, 10, 0]}); $\color{darkviolet}{\textbf{//Board 2}}$

const mu2=brd2.create('slider', [[1,1],[9,1],[0,2,10]], {withLabel:$\color{blue}{\textbf{false}}$}); $\color{darkviolet}{\textbf{//slider in Board 2}}$

$\color{darkviolet}{\textbf{//Koppelung}}$

mu1.on($\color{red}{\textbf{'drag'}}$,handledrag1);

mu2.on($\color{red}{\textbf{'drag'}}$,handledrag2);

$\color{blue}{\textbf{function}}$ handledrag1(){ mu2.setValue(mu1.Value()); brd2.update(); }

$\color{blue}{\textbf{function}}$ handledrag2(){ mu1.setValue(mu2.Value()); brd1.update(); }

Die Positionierung der JSXGraph-Objekte kann z.B. durch einen zusätzlichen div-Container (anzulegen in der HTML-Ansicht der Aufgabe), der die einzelnen JSXGraph-Elemente umschließt, beeinflusst werden.

<$\color{blue}{\textbf{div style}}$=$\color{red}{\textbf{"width: 100%; display: flex; flex-wrap: wrap;"}}$>...</$\color{blue}{\textbf{div}}$>