Interaktive Grafiken — <mp-jsxgraph>
<mp-jsxgraph> ist das native Grafiksystem von mathpad. Sie beschreiben einen mathematischen Plan in einigen Zeilen JavaScript : Achsen, Funktionskurve, Punkte, Geraden, Kreise. Das Ergebnis ist eine echte vektorbasierte Zeichnung, beim Zoom scharf, leicht — der ideale Ersatz für ein an einem Tag erstelltes PNG-Bild, das bei der ersten Korrektur abläuft.
Erste Funktionskurve
Eine Parabel $y = x^2$ zwischen $x = -3$ und $x = 3$ :
HTML
<mp-jsxgraph width="480" height="360" bounds="-3.5,10,3.5,-1">
board.create('functiongraph',
[function(x) { return x*x; }, -3, 3],
{ strokeColor: 'red', strokeWidth: 2 }
);
</mp-jsxgraph>Ergebnis
board.create('functiongraph',
[function(x) { return x*x; }, -3, 3],
{ strokeColor: 'red', strokeWidth: 2 }
);
Attribute der Grafik
| Attribut | Werte | Beschreibung |
|---|---|---|
| width | px (Standard 400) | Breite. Verwenden Sie 300 für mobile-friendly. |
| height | px (Standard 400) | Höhe. |
| bounds | x_min, y_max, x_max, y_min | Sichtfenster der mathematischen Ebene. Reihenfolge atypisch : zuerst die obere linke Ecke, dann die untere rechte. Beispiel : "-3.5,10,3.5,-1". |
| axis | true (Standard) | false | Zeichnet die Achsen mit Beschriftungen. |
| grid | true | false (Standard) | Hintergrundraster. |
| pan | true | false (Standard) | Wenn aktiviert, kann der Schüler die Grafik mit der Maus verschieben. |
| zoom | true | false (Standard) | Wenn aktiviert, Mausrad-Zoom. |
| highlight | true | false (Standard) | Hover-Effekt auf Punkten und Kurven. |
Statisch standardmäßig
pan, zoom, highlight sind alle standardmäßig deaktiviert : die Grafik ist eine feste Abbildung wie ein Bild. Mathpad aktiviert automatisch das natürliche vertikale Scrollen der Seite, wenn der Schüler den Finger auf der Grafik bewegt — kein Hindernis auf dem Telefon.
Häufige Objekte
Punkte, Beschriftungen, Strecken
HTML
<mp-jsxgraph width="480" height="360" bounds="-1,5,5,-1" grid="true">
var A = board.create('point', [1, 1], { size: 3, color: 'red', fixed: true, withLabel: false });
var B = board.create('point', [4, 3], { size: 3, color: 'blue', fixed: true, withLabel: false });
board.create('segment', [A, B], { strokeColor: 'black', strokeWidth: 2 });
// Étiquettes placées à la main pour éviter le segment AB
board.create('text', [0.55, 0.5, 'A'], { fontSize: 16, fixed: true, strokeColor: 'red', useKatex: false, display: 'internal' });
board.create('text', [4.15, 3.5, 'B'], { fontSize: 16, fixed: true, strokeColor: 'blue', useKatex: false, display: 'internal' });
</mp-jsxgraph>Ergebnis
var A = board.create('point', [1, 1], { name:'', size: 3, color: 'red', fixed: true, withLabel: false });
var B = board.create('point', [4, 3], { name:'', size: 3, color: 'blue', fixed: true, withLabel: false });
board.create('segment', [[1, 1], [4, 3]], { strokeColor: 'black', strokeWidth: 2 });
board.create('text', [0.75, 0.65, 'A'], { fontSize: 16, fixed: true, strokeColor: 'red' });
board.create('text', [4.10, 3.30, 'B'], { fontSize: 16, fixed: true, strokeColor: 'blue' });
Tangente an einem Punkt
HTML
<mp-jsxgraph width="480" height="360" bounds="-1.5,4,4,-1" grid="true">
var f = function(x) { return 0.25*x*x; };
var cf = board.create('functiongraph', [f, -2, 4], { strokeColor: 'red', strokeWidth: 2, name: 'C', withLabel: false, dash: 0, strokeWidth: 2, highlight: false});
var tan = board.create('tangent',[ cf, A ], {id: 'tan', name : 'tan', fixed: true, strokeColor: 'rgb(0,150,255)', dash: 0, strokeWidth: 2, highlight: false});
Ergebnis
var f = function(x) { return 0.25*x*x; };
var cf = board.create('functiongraph', [f, -2, 4], { strokeColor: 'red', strokeWidth: 2, name: 'C', withLabel: false });
var A = board.create('glider', [2, 1, cf], { name: 'A', fixed: false, size: 3, color: 'black', label:{offset:[10,-15]} });
var tan = board.create('tangent',[ cf, A ], {id: 'tan', name : 'tan', fixed: true, strokeColor: 'rgb(0,150,255)', dash: 0, strokeWidth: 2, highlight: false});
Déplacer le point $A$
Kreis und Geometrie
HTML
<mp-jsxgraph width="380" height="380" bounds="-3,3,3,-3" axis="false" grid="true">
var O = board.create('point', [0, 0], { name: 'O', fixed: true, size: 3 });
var circle = board.create('circle', [O, [2,0]], { strokeColor: 'purple', strokeWidth: 2 });
var M = board.create('glider', [2, 0, circle], { name: 'M', size: 3 });
board.create('segment', [O, M], { strokeColor: 'gray', dash: 2 });
</mp-jsxgraph>Ergebnis
var O = board.create('point', [0, 0], { name: 'O', fixed: true, size: 3 });
var circle = board.create('circle', [O, [2,0]], { strokeColor: 'purple', strokeWidth: 2 });
var M = board.create('glider', [2, 0, circle], { name: 'M', size: 3 });
board.create('segment', [O, M], { strokeColor: 'gray', dash: 2 });
Déplacer le point $M$
Formeln in den Beschriftungen
Sie können Beschriftungen mit Formeln verfassen : geben Sie das LaTeX umgeben von $...$ in name: oder im Text eines text-Objekts an, mathpad rendert es automatisch.
HTML
<mp-jsxgraph width="480" height="360" bounds="-3.5,2,3.5,-2" grid="true">
board.create('functiongraph',
[function(x) { return Math.sin(x); }, -Math.PI, Math.PI],
{ strokeColor: 'red', strokeWidth: 2, name: '$f(x) = \\sin(x)$', withLabel: true }
);
board.create('text', [2, -1.5, '$y = \\sin(x)$'], { strokeColor: 'red', fontSize: 16 });
</mp-jsxgraph>Ergebnis
board.create('functiongraph', [function(x) { return Math.sin(x); }, -Math.PI, Math.PI], { strokeColor: 'red', strokeWidth: 2, name: '$f(x) = \\sin(x)$', withLabel: true });
board.create('text', [2, -1.5, '$y = \\sin(x)$'], { strokeColor: 'red', fontSize: 16 });
Mobiles Format
Verwenden Sie width="300" für eine Grafik, die in 355 px Bildschirmbreite passt. Eine Berührungszone von 16 px um die Grafik herum lässt den Schüler die Seite vertikal scrollen, ohne durch das Berühren der Grafik blockiert zu werden. Wenn die Grafik überdimensioniert ist, wird automatisch ein horizontaler Scrollbalken hinzugefügt, mit einer Berührungszone darüber, um nicht direkt am Rand zu zeigen.
Visueller Editor im IDE
Im mathpad-Editor öffnet das Menü Grafiken → Figur (JSXGraph) einen Bereich, in dem Sie Punkte, Strecken, Funktionen direkt mit der Maus zeichnen, dann das Sichtfenster festlegen — der Editor generiert den fertigen
<mp-jsxgraph>-Code, den Sie in den Kurs einfügen. Sie sparen sich die manuelle Verwaltung von Koordinaten und Stilen. Wer eine .tex-Datei mit tikz/pstricks konvertiert, erhält automatisch PNG-Bilder — siehe mp-figure.
Vollständige JSXGraph-Dokumentation
mathpad nutzt direkt die JSXGraph-Bibliothek der Universität Bayreuth. Alle Objekttypen (Polygon, Winkel, Ellipse, parametrische Kurve…) und alle Optionen sind dokumentiert auf jsxgraph.org/docs. Was Sie hier sehen, ist nur eine Auswahl der gebräuchlichsten Funktionen.
Bereit, mathpad auszuprobieren?
Erstellen Sie Ihr erstes wissenschaftliches HTML-Dokument im Online-Editor, oder importieren Sie Ihren bestehenden LaTeX-Kurs in einem Klick.