JavaScript-Aktion ausführen

Übersicht

Die Aktion JavaScript ausführen ermöglicht es Ihnen, spezifische Ereignisse zu programmieren und Labvanced-Variablen zu lesen/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.

Wenn die obige Aktion JavaScript ausführen ausgewählt wird, sehen Sie eine Option für Ausführungsumgebung sowie den Code-Editor, in dem der JavaScript-Code geschrieben werden sollte (in dem sich einige hilfreiche Anweisungen befinden):

Optionen der Ausführungsumgebung

Hier können Sie die Art des JavaScript angeben, das Sie ausführen, 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, was das Bearbeiten von Bildschirminhalten ermöglicht, was nützlich ist, um interaktive, auf JavaScript basierende Spiele zu integrieren und dynamischere Inhalte über JavaScript zu erstellen.

Verwendung von Native JavaScript

Bei der Verwendung von Native JavaScript, um Elemente innerhalb des Document Object Model (DOM) zu steuern, ist ein wichtiger Aspekt zu beachten, was für einen HTML-Knoten anzuhängen ist, sowie einige Stilrichtlinien zu berücksichtigen.

Eine einfache ID, die Sie in Betracht ziehen sollten, ist der background-Identifikator, und er ermöglicht es, dass andere Labvanced-Objekte ebenfalls im Rahmen angezeigt werden 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 die 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 können Sie hier in dieser Demo sehen, in der wir die Option Native JavaScript verwendet haben, um das Pong-Spiel in Labvanced zu implementieren: https://www.labvanced.com/page/library/75148

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