Netzwerk Mathematik/Physik + E-Learning

JSXGraph

Unterstützung von LaTeX

Prinzipiell wird LaTex-Syntax im JSXGraph-Code unterstützt durch die Befehlskette: '\\[ LaTeX-Code \\]'.

Auch dynamisch veränderlicher Inhalt ist dabei realisierbar, beispielsweise dient

brd.create('text',[-4,15, function() {return '\\[f(x) = e^{' + k.Value() + 'x}\\]'; }]);

zur Anzeige des Funktionsterms f(x)=ekx mit konkreten veränderlichen Belegungen von k.


Beschleunigen des Renderings in interaktiven Boards

Enthält ein JSXBoard viele LaTeX-Elemente (z.B. bei vielfältigen Achsenbeschriftungen o.ä.) und ist das Board interaktiv veränderbar (z.B. durch Slider) so kann sich das Rendering dieser Formeln und das gesamte Verhalten des Browsers sogar über Aufgabenwechsel hinweg merklich verlangsamen. Der Grund ist, dass Änderungen an Boardinhalten stets Updates des Boards zur Folge haben. Jedes dieser Updates des Boards bewirkt insbesondere Updates und Neurendern jeder Formel. Diese Anfragen an MathJax werden intern in einer Queue (Warteschlange) organisiert und abgearbeitet. Treten nun z.B. beim Verschieben eines Punkts oder Sliders Dutzende Updates des Boards pro Sekunde auf, so wird die Queue von vielen immer gleichen Tasks geflutet, die erst allmählich wieder abgearbeitet werden müssen.

Hier bietet sich nun an, an geeigneten Stellen diese Queue zu leeren und ein einmaliges Board-Update durchzuführen. Dies erfolgt mittels

window.MathJax.Hub.queue = window.MathJax.Callback.Queue();

ggf. gefolgt von board.update();

Geeignete Stellen für dieses Bereinigen können sein:

  • direkt zu Beginn eines JSXBoard-Skripts, noch vor der Definition des Board-Objekts, um etwaige Hinterlassenschaften anderer Aufgaben zu beenden
  • nach der sukzessiven Erstellung aller Elemente des Boards für ein einmaliges sauberes Rendering und Update
  • jeweils am Ende einer Animation oder Interaktion durch den Nutzer.


Vorsicht: Die Verwendung von "\\[ und \\]" führt manchmal zu automatischen Codeersetzungen, die dann einen Syntaxfehler liefern (nach Speichern und Neuöffnen der Aufgabe).


Manchmal muss im JSXGraph-Code die Codezeile

JXG.Options.text.useMathJax = true;

noch hinzugefügt werden.