Interactive Diagrams with Background Images - mkraska/meclib GitHub Wiki
Note: try to implement this with foreignobject
Diagramme als Hintergrundbilder sind für Ablese- und Eintragungsübungen geeignet, wenn die Erstellung der Diagramme in JSXGraph zu aufwändig wäre.
Angenommen, man hat irgendein Diagramm als PNG-Datei. Dann braucht man folgende Angaben:
- Höhe und Breite in Pixeln
- Zwei Punkte mit deren Koordinaten jeweils in Pixeln und in Diagrammkoordinaten. Dazu misst man am besten im Paint die Pixelwerte zweier koordinatenmäßig bekannter Punkte aus.
Beispiel:
- P1 im Diagramm: x=-4, y=-3, in Pixeln x=73, y=485
- P2 im Diagramm: x=5, y=2, in Pixeln x=710, y= 11
- Breite 746, Höhe 545 Pixel
Aufgabenvariablen
\(m=\Delta x/\Delta p\), \(n=x_r-m p_r\)
ans: [ [0,0], [1,0] ];
/* Grid dimension */
[width,height]: [746,545];
[mx, my]: float([9/(710-73), 5/(11-485)]);
[nx, ny]: float([-4-mx*73, 2-my*11]);
[minx,maxx,miny,maxy]: [nx,nx+width*mx,ny+height*my,ny];
pixx: 600;
pixy: height*pixx/width;
Fragentext mit verdecktem Eingabefeld und Grafikblock mit eingebettetem Hintergrundbild
<p >[[input:gerade]] [[validation:gerade]]</p>
<p >[[feedback:gerade]]</p>
[[jsxgraph width='746px' height='545px'
input-ref-gerade='geradeRef' ]]
// Eventuell das Gitter einschalten für den Check des Koordinatensystems
const board = JXG.JSXGraph.initBoard(divid, {
boundingbox: [{#minx#}, {#maxy#}, {#maxx#}, {#miny#}],
axis: false, grid:false, showNavigation:false, showCopyright:false
});
board.resizeContainer({#pixx#},{#pixy#}); // can't use this in the block parameters
// hier kommt das encodierte Bild
const Bild = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAuoA...
...AElFTkSuQmCC";
// Bild auf Gesamtgröße des Widgets ziehen
board.create('image',[Bild, {#[minx, miny]#},{#[maxx-minx,maxy-miny]#}],{fixed: true, highlight:false, layer:1});
var p1 = board.create('point', [0, 0], {fillopacity:0,highlightfillopacity:0, size:5, strokewidth:2, strokecolor:'red', name: ''});
var p2 = board.create('point', [1, 0], { name: ''});
var g = board.create('line', [p1,p2], {strokewidth:1});
var st = board.create('slopetriangle', [g, p2]);
stack_jxg.bind_point_relative(geradeRef,P1, P2);
board.update();
[[/jsxgraph]]
Eingabe Änderungen gegenüber der Voreinstellung:
- (Typ: Algebraisch)
- Musterlösung: ans
- Verbiete Fließkommazahlen: Nein
- Teilnehmende müssen validieren lassen: Nein
- Zeige die Validierung: Nein