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 

 

 

 Text setzen (klar & kurz). 

 

 

 Zielszene auswählen. 

 

 

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

 

 

 Vorschau checken → Speichern . 

 

 

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