JSXGraph - WmV - Seminar
Ein Projekt im Rahmen des Seminars „Webbasierte mathematische Visualisierungen“ an der Universität Bayreuth.
Was?
Was ist JSXGraph?
JSXGraph ist eine JavaScript-Bibliothek, die es ermöglicht, interaktive geometrische Visualisierungen und mathematische Diagramme auf Webseiten zu erstellen. Damit können interaktive Grafiken erstellt werden, indem mathematische Funktionen, Gleichungen, Geometrievisualisierungen und vieles mehr in HTML-Dateien umgewandelt werden. Da JSXGraph Vektorgrafiken verwendet, können diese interaktiven Inhalte auf allen modernen Browsern und auf mobilen Geräten verwendet werden, was die Flexibilität und Vielfalt der Anwendung beeindruckend größer im Vergleich zu anderen Alternativen macht.
Um mit JSXGraph zu beginnen, wird lediglich ein Texteditor und ein moderner Webbrowser benötigt. Beim Texteditor empfiehlt es sich, sich eine Software herunterzuladen, die auf das Programmieren angelegt ist, um so zum Beispiel farbliche Hervorhebungen oder eine auto-fill Funktion zu haben. Notwendig ist es nicht, es erleichtert die Arbeit aber sehr. Damit die Inhalte auf der Webseite angezeigt werden, ist es notwendig ein sogenanntes Grundkonstrukt zu erstellen, damit die JavaScript-Bibliothek abgefragt und angewendet werden kann. Mehr dazu im nächsten Abschnitt.
Was benötige ich?
Wie sieht das Grundkonstrukt aus?
Das Grundkonstrukt besteht aus vier Einzelteilen: Der klassischen HTML-Umgebung, dem CDN (Content Delivery Network) Part, der Anzeigefläche und dem programmierten Inhalt.
HTML-Umgebung
<!doctype html>
<html lang="en">
<head>
...
</head>
<body>
...
</body>
</html>
Mit dieser HTML-Umgebung wird dem Browser mitgeteilt, dass im Folgenden HTML und welche Version davon für das Dokument verwendet wird.
CND Part
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSXGraph template</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js" type="text/javascript" charset="UTF-8"></script>
<!-- The next line is optional: MathJax -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
</head>
<body>
...
</script>
</body>
</html>
Mit dem CND Part wird die Bibliothek von einem Content Delivery Network eingebunden, ohne die extra herunterzuladen und auf der Webseite installieren zu müssen. Auf diese Weise kann garantiert werden, immer die aktuellste Version installiert zu haben. Hierbei ist gleich MathJax mit eingebunden, damit Gleichungen korrekt dargestellt werden können.
Anzeigefläche
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSXGraph template</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js" type="text/javascript" charset="UTF-8"></script>
<!-- The next line is optional: MathJax -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
</head>
<body>
<div id="jxgbox" class="jxgbox" style="width:1000px; height:500px; margin:auto"></div>
<script>
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-2, 2, 2, -2], axis: false});
HIER KOMMT DER CODE HIN
</script>
</body>
</html>
Dieser Teil erstellt eine Anzeigefläche, in der später die interaktiven Elemente hineinprogrammiert werden. Hierbei kann mit width die Breite, mit height die Höhe und mit margin die Ausrichtung dieser Fläche manuell eingestellt werden. In Zeile 18 wird das Board an sich mit dem Namen „board“ erstellt. Mit Hilfe von boundingbox können die Grenzen für die x- und y-Achse eingestellt und mit „axis: true“ das Koordinatengitter an oder mit „axis: false“ ausgeschalten werden.
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSXGraph template</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js" type="text/javascript" charset="UTF-8"></script>
<!-- The next line is optional: MathJax -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
</head>
<body>
<div id="jxgbox" class="jxgbox" style="width:1000px; height:500px; margin:auto"></div>
<script>
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-2, 2, 2, -2], axis: false});
HIER KOMMT DER CODE HIN
</script>
</body>
</html>
Zu guter Letzt kommt noch der Code-Part dazu, in dem nun die interaktiven Elemente erstellt werden. Damit ist das Grundkonstrukt fertig und kann nun beliebig angepasst und auf Webseiten wie dieser hier eingebunden werden.
Wie?
In diesem Bereich geht es um die Frage, wie interaktive Inhalte nun erstellt werden können, worauf geachtet werden sollte und welche Tricks es hier gibt.