Funktionsweise STACK-JS Skizze
Der Code greift somit nicht mehr wie bisher direkt auf die Inhalte der Lernumgebung zu, sondern wird isoliert in einem iFrame aufgerufen und kommuniziert mittels Schnittstellenfunktionen von STACK-JS mit der Lernumgebung.
Zwei Anwendungsbeispiele mit Scripting
Bislang konnte der JavaScript-Code einfach mittels Script-Tag in den Fragetext oder das Feedback eingebaut werden. Um beispielsweise nach erfolgreicher Beantwortung einer Teilaufgabe die folgende Teilaufgabe aufzudecken konnte folgendes Snippet im PRT-Feedback eingefügt werden:
<script>
document.getElementById('teilaufgabe2').style.display = 'block';
</script>
Dieses Skript hat Zugriff auf den HTML-Baum der aktuellen Seite und somit kann mittels verschiedener Selektoren auf andere HTML-Elemente innerhalb und auch außerhalb der jeweiligen Frage zugegriffen werden.
Auch bei JSXGraph Applets kann JavaScript helfen, den Graphen nach erfolgreicher Beantwortung der Frage anzupassen. Beispielsweise kann dann im Code für das Applet mittels Selektoren geprüft werden, ob ein anderes Element, welches im Feedback platziert wurde, vorhanden ist. Dadurch kann das Applet je nach Feedback verändert werden. Denkbar ist beispielsweise das Einblenden der Musterlösung nach erfolgreicher Beantwortung.
Anpassung der Beispiele für STACK-JS
Wollen wir nun in einer mehrteiligen Aufgabe nach und nach die Teilaufgaben aufdecken, nutzen wir den JavaScript-Block von STACK. Dabei Nutzen wir die Schnittstellenfunktion toggle_visibility, mit der wir vom iFrame unseres Skripts heraus die Sichtbarkeit eines bestimmten HTML-Elements in der Frage anpassen können. Angenommen wir wollen die Teilaufgabe 2 anzeigen, welche in einem HTML div-Element mit der ID "teilaufgabe2" liegt. Im Feedback zur Teilaufgabe 1 brauchen wir also das folgende Snippet:
[[javascript]]
stack_js.toggle_visibility("teilaufgabe2", true);
[[/javascript]]
Durch die Umstellung auf das STACK-JS System wird auch der JSXGraph-Code im JSXGraph-Block ([[jsxgraph]]) innerhalb eines iFrame ausgeführt. Dadurch ist es bereits jetzt nicht mehr so einfach möglich, auf Elemente in der Frage zuzugreifen. Will man nun die Musterlösung anzeigen, sobald Feedback in der Frage angezeigt wird, erfolgt dies mittels einer der Schnittstellenfunktionen im JSXGraph-Block:
[[jsxgraph]]
...
stack_js.get_content("feedback1").then((content) => {
// Code zum Anzeigen der Musterlösung im Applet
});
...
[[/jsxgraph]]
Dabei kann wie bisher ein einfacher Span mit einer eindeutigen ID (in unserem Beispiel “feedback1”) im Feedback genutzt werden. Im Codebeispiel ist zu beachten, dass die Funktion get_content ein Promise zurückgibt und asynchron mittels then auf das gefundene Objekt zugegriffen werden kann. Auch die Funktion zum Auslesen von Inputfeldern ist Promise-basiert.
Fazit
Insgesamt wurde durch STACK-JS ein kompletter Umbau der Funktionsweise von Scripting in STACK vollzogen. JavaScript-Code in JSXGraph-Applets existiert bereits schon ab Version 4.3.3 in einem iFrame und kann nur über einige Schnittstellenfunktionen mit dem Elterndokument der Lernumgebung kommunizieren. Für einfache Skripte, welche bisher mit dem Script-Tag eingebunden wurden, gibt es den neuen JavaScript-Block, der das Skript in einem iFrame ausführt. Script-Tags sollen in den kommenden Versionen von STACK verboten werden, wodurch es sich also lohnt, bereits jetzt bestehende Scripting-Lösungen zu überarbeiten und den neuen JavaScript-Block einzusetzen.
Weitere Infos zu STACK-JS finden Sie in den STACK Docs unter docs.stack-assessment.org/en/Developer/STACK-JS/.
Bei Fragen und Anregungen zum Einsatz von JavaScript mit STACK-JS können Sie mich gerne unter der Mail b.gailer@oth-aw.de
