Beispielaufgabe Schnittpunkt x-Achse II

Zuletzt geändert von Carina Enke am 13.11.2024

In diesem Beispiel wird eine Nutzereingabe in der JSX-Grafik in einer ONYX-Lücke gespeichert. 

Beispiel3 - Vorschau der Aufgabe_de.png Beispiel3 - Abgegebene Aufgabe_de.png

Beispielaufgabe aus Nutzersicht                                                                Auswertung der Aufgabe mit Abgabe

 Editor - JSX an Lücke_de.png

Verwandte Themen

Um dieses Beispiel selbst zu erstellen, gehen Sie wie folgt vor:

Erstellen Sie eine Lückentextaufgabe. Legen Sie die Aufgabenstellung fest und erstellen Sie die benötigte Lücke. Im Beispiel wird nur eine Lücke für das JSX-Objekt genutzt. Merken Sie sich die ID dieser Lücke.

Im Beispiel wird der Lernende die Lücke bei Aufruf der Aufgabe nicht sehen. Sie erscheint erst mit Abgabe der Aufgabe.

Beispiel3 - Aufgabenstellung mit Lücke_de.png

Fügen Sie mit Klick auf das Icon Icon_JSX.png ein JSXGraph-Objekt hinzu. Im Dialog passen Sie den JavaScript-Code wie folgt an:

document.getElementById({GAP_1}).setAttribute('hidden', 'hidden');
var brd=JXG.JSXGraph.initBoard('JSX_CONTAINER_ID',{axis:true, boundingbox:[-5, 5, 5, -5]});
var x=0;
let p=brd.create('point', [x, 0], {name:'P'});  
p.on('drag', function() {setOnyxGapValue({GAP_1}, p.X().toFixed(1));});

Erläuterung zum genutzten Code

Die Methode document.getElementById() zeigt auf das Objekt mit dem angegebenen Bezeichner (hier die Onyx-Lücke GAP_1) und erzwingt dann über die Methode setAttribute(), dass diese Lücke für den Lernenden nicht sichtbar, sondern zunächst „versteckt“ ist.

Die Methode JXG.JSXGraph.initBoard() erzeugt das Feld für die Grafik.
Die Optionen axis bzw. boundingbox fügen dem Feld  eine Achse hinzu bzw. bestimmen die Begrenzungskoordinaten des angezeigten Teils des Feldes.
 

Bitte beachten Sie: Ändern Sie die Bezeichnung  'JSX_CONTAINER_ID'  nicht, da diese von ONYX benötigt wird.

Die Methode brd.create() mit dem Bezeichner 'point' wird verwendet, um einen Punkt mit den gegebenen Koordinaten und einem gegebenen Namen zu zeichnen, der zu Beginn in der Grafik angezeigt wird.

Die Methode brd.create() mit dem Bezeichner 'button' wird verwendet, um eine Schaltfläche zu erstellen. In den Argumenten werden der Titel der Schaltfläche und eine Methode zur Übernahme der Eingaben aus der Grafik übergeben.

Die Eingabe des Nutzers in der Grafik wird nur von Onyx übernommen, wenn der Nutzer den erstellten Button in der Grafik verwendet. Weisen Sie den Lernenden explizit darauf hin.

Die Methode setOnyxGapValue() schreibt das zweite Argument (hier die x-Koordinate des Punktes p) in die durch das erste Argument angegebene Onyx-Lücke (hier die Onyx-Lücke mit dem Bezeichner GAP_1). Mit Abgabe der Aufgabe kann ONYX überprüfen, ob die Aktion des Benutzers innerhalb des JSXGraph-Boards zu einer korrekten Lösung geführt hat.

Nutzeraktionen in der Grafik unterliegen einer Ungenauigkeit. Bedenken Sie diese bei Angabe der korrekten Lösung. 

Mit der letzten Zeile p.on('drag', function() {setOnyxGapValue({GAP_1}, p.X().toFixed(1));}); erfolgt bei Verschiebung des Punkts eine automatische Wertübernahme in die Lücke.

Alternativ kann man einen Button in der Grafik anzeigen mit der der verschobene Punkt aktiv bestätigt werden muss, ehe er in die Lücke übernommen wird. Für diesen Fall verwenden Sie statt der letzten Zeile folgenden Code:. 

const butt = brd.create('button', [2, 3, "Punkt bestätigen", function(){setOnyxGapValue({GAP_1}, p.X()); }],{fixed:true});

Beispiel3 - JSX-Objekt anlegen_de.png

Beispiel3 - Korrekte Lösung anpassen_de.png

Prüfen Sie in der Vorschau ihre Angaben und speichern Sie die Aufgabe.Beispiel3 - Vorschau der Aufgabe_de.png