Plugins

Plugins sind eigene interaktive Komponenten, gebaut von anderen Lehrpersonen (oder dir). Alles, was du mit HTML/CSS/JS bauen kannst, kann ein Plugin sein: eine Modulo-Uhr, ein Dijkstra-Visualisierer, eine eigene Umfrage, ein 3D-Molekülbetrachter, ein Konjugationstrainer für lateinische Verben.

Dieses Kapitel behandelt das Einbetten bestehender Plugins in deine Seiten. Zum Bauen eines neuen Plugins siehe das Kapitel zu Plugins im Entwicklerhandbuch.

Ein Plugin einbetten

Eine Zeile:

<plugin src="author-page-slug/plugin-slug" ></plugin>

src ist <owner-slug>/<plugin-slug> — wie eine GitHub-Repo-Kennung.

<plugin src="marie/mod-clock" ></plugin>
<plugin src="marcchehab/dijkstra" ></plugin>
<plugin src="informatikgarten/excalidraw" ></plugin>

Das Plugin rendert inline als sandboxed Widget auf deiner Seite. Schüler können damit interagieren; ihr Zustand wird pro Schüler und pro Seite gespeichert.

Konfiguration übergeben

Attribute am <plugin>-Tag werden zu Konfigurationswerten innerhalb des Plugins:

<plugin
  src="informatikgarten/mod-clock"
  max="100"
  mod="7"
  font="14"
  lang="de"
></plugin>

Der Plugin-Autor definiert, welche Attribute sein Plugin versteht. Fahre in Dashboard → Plugins über den Eintrag eines Plugins, um dessen unterstützte Konfigurationsschlüssel zu sehen.

Keine Allowlist

Der Host validiert Attributnamen nicht gegen ein Schema. Du kannst jedes beliebige Attribut übergeben; nutzt das Plugin es nicht, passiert einfach nichts. Plugin-Autoren dokumentieren ihre Konfigurationsschlüssel (meist in der Beschreibung des Plugins oder einem Info-Popup).

Inhalt übergeben

Text zwischen den Tags wird als content-Konfiguration übergeben:

<plugin src="marie/concept-graph">
node A -> node B -> node C
node B -> node D
</plugin>

Das Plugin bekommt "node A -> node B -> ..." als Inhalt und rendert entsprechend. Wird von Plugins verwendet, die eine domänenspezifische Eingabesprache erwarten (Graphenbeschreibungen, mathematische Ausdrücke, Musiknotation usw.).

Ausgangshöhe

<plugin src="marie/mod-clock" height="500" ></plugin>

Setzt die anfängliche Höhe des Iframes in Pixeln. Nach dem Laden passt sich das Plugin automatisch an seinen Inhalt an (über den ResizeObserver des SDKs) — das hier dient hauptsächlich dazu, ein Layout-Shift-Aufblitzen beim ersten Rendern zu vermeiden.

Wie Plugins funktionieren, in einem Diagramm

Plugins laufen in sandboxed Iframes und kommunizieren mit dem Host über postMessage

Plugins laufen in sandboxed Iframes mit strikter Content-Security-Policy:

• Kein Netzwerkzugriff (kann kein fetch() auf beliebige URLs machen)
• Kein Zugriff auf die Cookies, den Speicher oder das DOM deiner Seite
• Kann nur über den Host persistieren (rate-limitiert, grössenbegrenzt)
• Kann Skripte nur von genehmigten CDNs laden

Das bedeutet, ein Plugin einzubetten ist sicher — selbst eines von jemandem, den du nicht kennst, kann keine Schülerdaten exfiltrieren, Browser fingerprinten oder aus seinem Iframe ausbrechen.

Zustand pro Schüler

Interagiert ein Schüler mit einem Plugin (klickt, gibt Text ein, trifft eine Auswahl), kann das Plugin den Zustand über das SDK speichern. Dieser Zustand:

• Ist pro Schüler (der Zustand jedes Schülers ist privat)
• Ist pro Seite (dasselbe Plugin auf zwei Seiten eingebettet hat zwei separate Zustände)
• Ist pro Plugin-Instanz (zwei Einbettungen desselben Plugins auf derselben Seite würden sich einen Zustand teilen — es gibt nur einen Slot)
• Bleibt über Sitzungen hinweg erhalten

Schüler müssen nichts tun, um zu speichern — das läuft automatisch. Sie sehen ihren vorherigen Zustand, wenn sie zurückkommen.

Plugins durchsuchen und entdecken

Dashboard → Plugins → Browse listet alle veröffentlichten Plugins auf der Plattform. Filtern nach:

• Kategorie (Visualisierung, Berechnung, Interaktion usw.)
• Autor
• Zuletzt aktualisiert
• Am häufigsten eingebettet

Klick auf ein Plugin zeigt:

• Eine Live-Vorschau
• Beschreibung und unterstützte Konfigurationsschlüssel
• Autor und Quell-HTML
• "Embed in skript" — kopiert das Markdown in deine Zwischenablage
• "Fork" — erstellt eine Kopie unter deinem Namespace, die du bearbeiten kannst

Ein Plugin forken

Ist das Plugin einer anderen Person fast das, was du willst, forke es:

1. Öffne das Plugin in Dashboard → Plugins → Browse
2. Klick auf Fork
3. Bearbeite den Entry-HTML-Code nach deinem Geschmack
4. Speichere unter deinem eigenen Slug

Die Einbettung <plugin src="your-slug/forked-plugin" ></plugin> verwendet deine geforkte Version. Das Original bleibt unverändert.

Wann einbetten, wann ein Plugin bauen

Einbetten, wenn

• Genau das, was du willst, existiert bereits
• Du es über Attribute anpassen kannst (keine Code-Änderungen nötig)
• Du dem folgen willst, was andere Lehrpersonen in deiner Organisation nutzen

Bauen (oder forken), wenn

• Du ein Verhalten brauchst, das es nirgends gibt
• Du eine Domäne mit spezifischen Visualisierungen unterrichtest (Wellenformen, Chemie-Moleküle, Sprachkonjugations-Übungen)
• Du ein Plugin willst, das zu deinem Unterrichtsstil passt (Farben, Layout, Sprache)

Das Bauen wird im Entwicklerhandbuch behandelt. Kurzversion: Schreib eine einzelne HTML-Datei mit eingebettetem JS, füg sie ins Formular Plugins → New ein, gib ihr einen Slug, veröffentliche.

Einbetten-Spickzettel