JavaScript-Aktion ausführen

Überblick

Die Run JavaScript-Aktion ermöglicht es Ihnen, spezifische Ereignisse zu programmieren und Labvanced-Variablen zu lesen/zu setzen, aber auch Objekte in Ihrer Studie zu steuern, indem Sie benutzerdefiniertes JavaScript eingeben, das als Aktion ausgeführt wird, wenn es ausgelöst wird.

Die JavaScript-Aktion im Aktionsmenü von Labvanced.

Wenn die oben genannte Run JavaScript-Aktion ausgewählt ist, sehen Sie eine Option für Execution Environment sowie den Code-Editor, in dem der JavaScript-Code geschrieben werden sollte (in dem sich einige hilfreiche Anweisungen befinden):

Der JavaScript-Code-Editor in Labvanced.

Optionen für die Ausführungsumgebung

Hier können Sie die Art des JavaScripts, das Sie ausführen, angeben. Die Optionen umfassen:

Acorn Interpreter: Ideal für Szenarien, in denen nur Variablen gelesen/geschrieben werden.
Native JavaScript: Ermöglicht die Ausführung von benutzerdefiniertem JavaScript zur direkten Manipulation des Document Object Model (DOM) innerhalb von Experimenten, wodurch die Bearbeitung von Bildschirmelementen ermöglicht wird, was nützlich ist, um interaktive, auf JavaScript basierende Spiele zu integrieren und dynamischeren Inhalt über JavaScript zu erstellen.

Verwendung von nativem JavaScript

Bei der Verwendung des Native JavaScript, um Elemente innerhalb des Document Object Model (DOM) zu steuern, ist ein wichtiger Faktor zu berücksichtigen, zu wissen, an welchem HTML-Knoten man anheften sollte, sowie einige Stilrichtlinien zu beachten.

Eine einfach zu berücksichtigende ID ist der background-Identifikator, und es ermöglicht, dass andere Labvanced-Objekte ebenfalls im Rahmen vorhanden sein können, wie im folgenden Beispiel:

const container = document.getElementById('background');
container.appendChild(gameContainer);

In den hier skizzierten Beispielen ist gameContainer dann der Hauptcontainer / div des benutzerdefinierten Inhalts und sollte eine absolute-Position einnehmen, für die Sie dann width und height festlegen müssen:

const gameContainer = document.createElement('div');
gameContainer.style.position = 'absolute';
gameContainer.style.width = window.innerWidth +"px";
gameContainer.style.height = window.innerHeight +"px";

Die Ergebnisse eines solchen Ansatzes sind hier in dieser Demo zu sehen, in der wir die Native JavaScript-Option verwendet haben, um das Pong-Spiel in Labvanced zu implementieren: https://www.labvanced.com/page/library/75148

Für Fragen zur allgemeinen Benutzerfreundlichkeit der Run JavaScript-Aktion können Sie uns gerne per E-Mail oder Chat kontaktieren.