Genially hat keine offizielle Schnittstelle um Code auszuführen und auch keine interne Scriptsprache. Trotzdem kann man JavaScript in Genially ausführen. Zwei Beispiele will ich hier zeigen.
Ein Würfel
Im ersten Beispiel habe ich in Genially ein quadratisches Dokument angelegt und lediglich einen großen Button eingefügt. Anschließend habe ich eine Interaktion in Form eines Fensters („Windows“) hinzugefügt. Dort wechsle ich im Editor in den Code-Modus. Hier kann man nun inline HTML, CSS und JavaScript einfügen.
Auf dem Button liegt ein einfaches CSS und wenig HTML um einen Button zum Würfeln und die Ausgabe der gewürfelten Zahl auszugeben. Das JavaScript ist relativ einfach. Zunächst wird in einer Funktion eine Zufallszahl zwischen 0 und 5 erzeugt. Um einen Würfel abzubilden wird zum Ergebnis 1 addiert. Anschließend wird die Ausgabe des Ergebnisses durchgeführt. Am Ende folgt noch die Abfrage des Buttons, um einen Wurf auszuführen.
Wenn man auf den Button mit der Hand klickt, wird der HTML-Code gerendert und ein Button zum Würfeln und das Ausgabefenster erscheinen. Mit einem Klick auf den Button wird ein „Wurf“ ausgeführt.
Kollisionsabfrage
Eine zweite Möglichkeit um JavaScript einzubetten ist es, „unsichtbare“ Objekte über die Funktion Insert – others zu erzeugen. Im Fenster, welches dazu gedacht ist, externe Inhalte einzubetten, kann man auch JavaScript-Code ausführen, indem man in HTML ein <div>-Tag erzeugt.
Diesem <div>-Tag gibt man eine ID mit und hängt im Anschluss das <script>-Tag an.
<div id=„objekt1“></div>
<script>
MeinScript
</script>Mit einem Klick auf „Insert“ erscheint ein „leerer“ Rahmen auf der Arbeitsfläche. Diesen Rahmen kann man nun mit einem sichtbaren Objekt gruppieren und damit das JavaScript an dieses Objekt „anhängen“.
Nun kann man per JavaScript abfragen, ob sich entsprechende Objekte überschneiden. So kann man dann bewegliche Objekte (draggable Objects) hinsichtlich einer zu erreichenden korrekten Anordnung zu prüfen. Mit dieser Funktion kann man dann Aufgaben automatisch „korrigieren“ lassen und ein Feedback zu richtigen oder falschen Lösungen geben.
Ausführlich wird dies im folgenden Video erklärt (vorausgesetzt man kann Französisch)
Mein Dank geht an Julia Thurner, die mit ihrer Frage zu diesem Problem, mein Interesse an Genially + JavaScript angestoßen hat