Button

Mit dem Button-Element führst du Spielende per Tap zur nächsten Szene – klassisch für „Weiter“, Auswahl­optionen, Abzweigungen oder Bonus-Aktionen. Oben im Dialog siehst du eine Live-Vorschau deiner aktuellen Einstellungen.

Felder

Text
Beschriftung des Buttons (z. B. „Weiter“, „Zur Aufgabe“, „Norden wählen“).
Tipp: Kurze Verben + Nutzen („Öffnen“, „Lösen starten“).

Zielszene
Die Szene, die beim Tippen geöffnet wird.

• Üblich ist, hier immer eine Szene zu wählen.

• Wenn du bewusst ohne Ziel speicherst, verhält sich der Button wie ein „stummer“ UI-Button und löst keine Navigation aus (nur sinnvoll für Speziallogik).

Hintergrundfarbe
Hex-Wert für die Buttonfläche, z. B. #68bfdd (Brand Color).

Textfarbe
Hex-Wert für die Beschriftung, z. B. #ffffff.

Verhalten in der App

• Tap auf den Button öffnet sofort die gewählte Zielszene.

• Mehrere Buttons in einer Szene werden automatisch untereinander (mobilfreundlich) gerendert; die Reihenfolge entspricht der Reihenfolge im Editor.

• Buttons reagieren direkt; es ist kein GPS/Scan nötig (anders als bei Wegpunkten/QR/NFC).

• Buttons werden mit einem Sicherheitsabstand unterhalb von Content eingefügt.
• Position des Buttons kann mit DIV Klasse customButtonPosition gesteuert werden:

  <div class="customButtonPosition"></div>

Einsatzmuster

• Lineares Weiter: „Weiter“ → nächste Szene.

• Entscheidungen/Abzweigungen: Mehrere Buttons mit unterschiedlichen Ziel­szene(n) („Tür A“, „Tür B“).

• Optionale Inhalte: „Mehr erfahren“, „Hinweis anzeigen“, „Zur Karte“.

• Rücksprung: „Zur Übersicht“/„Zurück zur Karte“.

Gestaltungs- & UX-Tipps

• Kontrast sicherstellen: Helle Schrift auf dunklem Hintergrund oder umgekehrt (AA-Kontrast ≥ 4.5:1 anstreben).

• Konsistenz: Primäre Aktion (z. B. „Weiter“) immer gleiche Farbe; sekundäre Aktionen in neutralen Tönen.

• Größe/Touch-Ziel: Genug Platz (mind. ~44 px Höhe) und Abstand zwischen mehreren Buttons.

• Icon-Hilfe: Du kannst vor dem Text Emoji nutzen (z. B. 🔍 „Suchen“, 🧭 „Zur Karte“).

• Deaktivierte Logik: Wenn ein Button erst nach Bedingung aktiv sein soll, blende ihn vorher aus oder ersetze ihn durch Hinweistext (statt „toter“ Buttons).

Kombinationen

• Mit Wegpunkten: Button erst nach Erreichen eines Wegpunkts anzeigen (Story-Gating).

• Mit QR/NFC: Button bietet Wahl: „Scannen“ oder „Überspringen (Hinweis)“.

• Mit Dialogen/Medien: Unter Text, Bild, Audio oder Video als klare Call-to-Action platzieren.

Kurz-Checkliste

1. Text setzen (klar & kurz).

2. Zielszene auswählen.

3. Farben (Brand) wählen, Kontrast prüfen.

4. Vorschau checken → Speichern.

Fertig – der Button führt die Spielenden zuverlässig zur nächsten Station deiner Story.