```
---
## Praxis-Tipps
- **Eindeutigkeit:** Vermeide Lösungen, die leicht zu raten sind („JA“, „OK“).
- **Toleranz:** Nutze **„vereinfacht“**, wenn Tippfehler durch Groß-/Kleinschreibung nicht entscheidend sind.
- **Zahlenrätsel:** Wähle **Darstellung → Zahlenfeld** (falls verfügbar), damit direkt das Ziffern-Keyboard erscheint.
- **Barrierefreiheit:** Button-Kontrast hoch halten (helle Schrift auf dunklem Button oder umgekehrt).
- **Feedback:** In der Szene kurz erklären, **wo** die Lösung zu finden ist („Die Antwort steht auf dem Typenschild“).
---
## Kurz-Checkliste
1. **Lösung** eintragen (ggf. Varianten mit `|`).
2. **Prüfung** wählen (**vereinfacht** für tolerant, **exakt** für streng).
3. **Darstellung** festlegen (Eingabe/Zahl).
4. **Zielszene** setzen.
5. Button-**Text** und **Farben** anpassen → **Speichern**.
# Dialog
Mit **Dialog** zeigst du einen oder mehrere Textbausteine mit optionalen **Buttons** an – ideal für kurze Erklärungen, Zwischentexte, Entscheidungen oder Abzweigungen. Oben siehst du im Editor eine **Live-Vorschau** von Text & Button-Stil.
---
[](https://docs.scenario.app/uploads/images/gallery/2025-09/T6lgrafik.png)[](https://docs.scenario.app/uploads/images/gallery/2025-09/dTzgrafik.png)[](https://docs.scenario.app/uploads/images/gallery/2025-09/K2Kgrafik.png)
## Tabs & Felder
### 1) Texte
- **Text (mehrfach)**
Füge beliebig viele Einträge hinzu („Text 1“, „Text 2“, …).
Jeder Eintrag wird in der App **nacheinander** angezeigt.
- Zeilenumbruch wird übernommen.
- Emojis sind erlaubt.
- **Ablauf**
- Spieler:innen tippen auf **„…/Weiter“** (oder irgendwo in den Dialogbereich), um zum **nächsten Textelement** zu wechseln.
- Nach dem letzten Text bleibt der Dialog stehen; Buttons (falls vorhanden) sind weiterhin sichtbar.
### 2) Buttons
- **Button (mehrfach)**
- **Szene**: Zielszene, die beim Tippen geöffnet wird.
- **Text**: Beschriftung (z. B. „Weiter“, „Zurück“, „Abzweigung A“).
- **Verhalten**
- Buttons werden **unter dem Text** angezeigt.
- Du kannst **mehrere** Buttons gleichzeitig verwenden (Entscheidungen).
- Lässt du **alle Szenen leer**, tun die Buttons nichts (nur sinnvoll, wenn du eigene Logik verwendest).
### 3) Einstellungen
- **Textfarbe** – Farbe der Dialogtexte (Hex).
- **Hintergrundfarbe-Button** – Hintergrund der Buttons (Hex).
- **Textfarbe-Button** – Beschriftungsfarbe der Buttons (Hex).
---
##
Verhalten in der App
- Die Texte erscheinen **sequenziell**; ein Tap auf den Dialog/Weiter-Button zeigt den **nächsten Text**.
- Buttons sind die **Call-to-Action** unter dem Text. Ein Tap öffnet sofort die gewählte **Zielszene**.
- Gibt es **keine Buttons**, dient der Dialog als **reiner Infoblock** (Spielfluss geht weiter, wenn du in der Szene weitere Elemente hast).
---
## Einsatzmuster
- **Storybeat/Erklärung:** Mehrere kurze Sätze als einzelne Textschritte, darunter „Weiter“.
- **Entscheidung:** Zwei oder mehr Buttons („Tür A“, „Tür B“) mit unterschiedlichen Zielszenen.
- **Rücksprung/Navi:** „Zur Karte“, „Zur Übersicht“.
- **Hinweis nach Rätsel:** Text + Button „Aufgabe starten“.
---
## UX-Tipps
- **Kurz & konkret** – lieber 2–3 kurze Texte als eine Textwand.
- **Kontrast prüfen** – Button- und Textfarben mit ausreichendem Kontrast wählen.
- **Primäraktion konsistent** – z. B. immer dieselbe Farbe für „Weiter“.
- **Reihenfolge beachten** – die Anzeige folgt exakt der Reihenfolge im Tab **Texte**.
- **Barrierefreiheit** – Buttons groß genug (min. ~44 px Höhe) und mit klaren Labels.
---
## Kurz-Checkliste
1. Texte in sinnvoller Reihenfolge anlegen.
2. Buttons (Zielszene + Label) hinzufügen – oder weglassen für Info-Dialoge.
3. Farben in **Einstellungen** setzen.
4. Vorschau prüfen → **Speichern**.
Fertig – dein Dialog führt sauber durch Textschritte und lenkt mit Buttons zur passenden nächsten Szene.
# Hintergrundbild
# Hintergrundfarbe
Mit **Hintergrundfarbe** gibst du deiner Szene einen einfarbigen oder **zweifarbigen Verlauf**.
Hinweis: **Wenn ein Hintergrundbild gesetzt ist, überschreibt es die Hintergrundfarbe** (Bild hat Vorrang).
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/u91grafik.png)Felder
**Farbe 1 / Farbe 2**
- Hex-Werte (`#RRGGBB`, z. B. `#84bee2`, `#1a767a`).
- Für **einfarbig**: in beide Felder **denselben** Wert eintragen.
**Verlaufsrichtung**
- Steuert, wie der Verlauf verläuft:
- **Horizontal** (links → rechts)
- **Vertikal** (oben → unten)
- **Diagonal nach unten rechts** (oben-links → unten-rechts)
- **Diagonal nach unten links** (oben-rechts → unten-links)
Live-Vorschau oben zeigt das Ergebnis der aktuellen Auswahl.
---
## Verhalten in der App
- Ohne Hintergrundbild füllt die Farbe/der Verlauf die Szene **vollflächig**.
- **Mit Hintergrundbild** bleibt die Farbe unsichtbar (als Fallback im Hintergrund vorhanden).
- Alle anderen Elemente (Texte, Buttons, Dialoge etc.) liegen **darüber**.
---
## Design-Tipps
- **Kontrast**: Wähle Farben so, dass Texte/Buttons gut lesbar sind (ggf. helle/dunkle Varianten testen).
- **Ruhige Flächen**: Sanfte Verläufe lenken weniger ab als harte Kontraste.
- **Branding**: Nutze eure Primär- (z. B. `#68bfdd`) und Sekundärfarben konsistent über alle Szenen.
- **Fallback**: Setze immer eine sinnvolle Hintergrundfarbe – falls ein Bild später entfernt wird, bleibt die Szene stimmig.
---
## Kurz-Checkliste
1. Farben wählen (einfarbig = Farbe1 = Farbe2).
2. Verlaufsrichtung festlegen.
3. Vorschau prüfen → **Speichern**.
4. Falls **Hintergrundbild** aktiv ist: beachten, dass dieses die Farbe überlagert.
# Szenen-Übergang (pageTransition)
Mit **Szenen-Übergang** legst du fest, **wie eine Szene erscheint** (In-Transition) und **wie sie verschwindet** (Out-Transition). Die Animation läuft jeweils beim Betreten bzw. Verlassen der Szene auf dem gesamten Szenen-Container. (Hintergrundbild/-farbe, Texte, Buttons usw. animieren damit gemeinsam.)
---
##
[](https://docs.scenario.app/uploads/images/gallery/2025-09/uHugrafik.png)
---
## Felder
- **Einblendung (In-Transition)** – Animation beim **Öffnen** der Szene.
- **Ausblendung (Out-Transition)** – Animation beim **Wechsel** zu einer anderen Szene.
- **none** = keine Animation (schnellste Option, Standard).
---
## Verfügbare Optionen
### In-Transitions
- `fadeInScene` – sanft einblenden
- `zoomInScene` – leicht hineinzoomen
- `slideInLeftScene` / `slideInRightScene` – von links/rechts einschieben
- `bounceInScene` – federnde Einblendung
- `rotateInScene` – leicht hereinrotieren
- `magicScaleInScene` – Skalierungs-/Weichzeichner-Effekt
- `iphoneBounceInScene` – iOS-artiger Bounce
- `macSlideInScene` – macOS-artiger Slide
- `materialExpandInScene` – Material-Expand (Card wird groß)
- `androidSlideUpInScene` – Android-Slide von unten
- `rippleInScene` – Wellen-/Ripple-Eintritt
- `cardStackInScene` – Kartenstapel kommt nach vorn
- `materialFlipInScene` – Material-Flip nach vorn
### Out-Transitions
- `fadeOutScene` – sanft ausblenden
- `zoomOutScene` – leicht herauszoomen
- `slideOutLeftScene` / `slideOutRightScene` – nach links/rechts heraus schieben
- `bounceOutScene` – federnde Ausblendung
- `rotateOutScene` – herausrotieren
- `magicScaleOutScene` – Magic-Scale zurück
- `iphoneBounceOutScene` – iOS-artiger Bounce out
- `macSlideOutScene` – macOS-artiger Slide out
- `materialExpandOutScene` – Material-Shrink/Collapse
- `androidSlideDownOutScene` – Android-Slide nach unten
- `rippleOutScene` – Ripple-Ausgang
- `cardStackOutScene` – zurück in Kartenstapel
- `materialFlipOutScene` – Material-Flip nach hinten
---
## Empfohlene Paare (stimmige Kombis)
- **Fade:** `fadeInScene` ⇄ `fadeOutScene` (ruhig, universell)
- **Slide links/rechts:** `slideInLeftScene` ⇄ `slideOutRightScene` *(oder umgekehrt für Gegenrichtung)*
- **Zoom:** `zoomInScene` ⇄ `zoomOutScene`
- **Material/Card:** `materialExpandInScene` ⇄ `materialExpandOutScene` / `cardStackInScene` ⇄ `cardStackOutScene`
- **Platform-Look:**
- iOS: `iphoneBounceInScene` ⇄ `iphoneBounceOutScene`
- Android: `androidSlideUpInScene` ⇄ `androidSlideDownOutScene`
- macOS: `macSlideInScene` ⇄ `macSlideOutScene`
---
## Hinweise & Best Practices
- **Konsistenz:** Wähle für ein Projekt 1–2 Animationsstile und bleibe dabei.
- **Tempo & Performance:** Dezente Effekte wirken professioneller und laden schneller. Auf älteren Geräten ist `none`/`fade` am flüssigsten.
- **Richtung beachten:** Wenn der Spielfluss „vorwärts“ geht, nutze z. B. **In von rechts → Out nach links** (oder umgekehrt), um eine klare Bewegungslogik zu erzeugen.
- **Barrierefreiheit:** Übertreibe Rotationen/Bounce nicht – sie können empfindliche Nutzer stören.
- **Konflikte vermeiden:** Kombiniere keine starken In/Out-Stile, die gegeneinander arbeiten (z. B. `rotateIn` mit `slideOutRight` kann unruhig wirken).
---
## Kurz-Checkliste
1. **In**- und **Out**-Transition wählen (oder `none`).
2. In der Vorschau prüfen, ob es zum **Ton der Szene** passt.
3. Einheitlich im gesamten Spiel anwenden.
4. Bei Performance-Problemen: auf **fade/none** wechseln.
# Inventar
Mit **Inventar** gibst du Spieler:innen Gegenstände an die Hand – z. B. Schlüssel, Hinweise, Karten oder Fotos (zoombar). Items können **gesammelt**, **verbraucht** oder **für Bedingungen** in Szenen verwendet werden.
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/KgBgrafik.png)Felder
**Bild**
Optionales Vorschaubild. Bilder können im Inventar **vollbild/zoombar** geöffnet werden – ideal für Karten, Notizen, Codes.
**Name**
Eindeutige Bezeichnung des Gegenstands (z. B. „Rostiger Schlüssel“, „Karte Nordwald“).
**Beschreibung**
Kurzer Begleittext (Hinweis, Notiz, Nutzungshinweis).
**Anzahl**
Startmenge (Standard **1**). Kann im Spiel erhöht/gesenkt werden.
---
| ## Verhalten in der App
- Items erscheinen im **Inventar-Menü** der App.
- Tippen auf ein Item öffnet **Detailansicht** mit **Zoom** für das Bild (falls vorhanden) und Beschreibung.
- Mengenänderungen werden live angezeigt (z. B. „Seil ×2“).
|
## Verhalten in der App
- Items erscheinen im **Inventar-Menü** der App.
- Tippen auf ein Item öffnet **Detailansicht** mit **Zoom** für das Bild (falls vorhanden) und Beschreibung.
- Mengenänderungen werden live angezeigt (z. B. „Seil ×2“).
---
## Logik im Spiel
Du kannst Inventar **abfragen** und **verändern**:
**Bedingungen (typische Checks)**
- *hat Item*: „Wenn **Karte Nordwald** vorhanden → Button anzeigen / Szene freigeben“
- *Menge*: „Wenn **Batterie** ≥ 2 → Taschenlampe aktivieren“
- *nicht vorhanden*: „Wenn **Schlüssel** fehlt → Hinweis anzeigen“
**Aktionen (typische Manipulationen)**
- **Hinzufügen**: Item neu ins Inventar legen (mit Startmenge)
- **Erhöhen/Verringern**: Menge +1/–1 oder um einen festen Wert
- **Setzen**: Menge exakt auf n stellen
- **Entfernen**: Item komplett aus dem Inventar löschen
> Praxis: Nach dem Benutzen eines „Einweg“-Items (z. B. Sicherung) die Menge **–1** setzen. Bei wiederverwendbaren Items (z. B. Schlüsselbund) die Menge belassen.
---
## Einsatzbeispiele
- **Schlüssel & Schlösser**
- Szene fragt: *„Schlüssel vorhanden?“* → Ja: Tür öffnet, Nein: Hinweis „Suche den Schlüssel“.
- **Fotos/Belege als Hinweis**
- Item „Foto Schaltschrank“ (zoombar) enthält eine abfotografierte Zahlenfolge → späteres Rätsel.
- **Karte/Plan**
- Zoombare Karte im Inventar, die jederzeit aufgerufen werden kann.
- **Ressourcen**
- „Batterie ×3“ – wird beim Einschalten der UV-Lampe schrittweise verbraucht.
---
## Design- & UX-Tipps
- **Eindeutige Namen & Icons**: schneller Wiedererkennungswert.
- **Kurze Beschreibung** mit klarer Funktion („Öffnet Tür im Keller“).
- **Wichtige Bilder** hochauflösend genug für Zoom, aber < 1 MB wenn möglich.
- **Tutorial-Hinweis**: Einmal erklären, dass Inventar über das Rucksack-Symbol erreichbar ist.
---
## Kurz-Workflow
1. **Bild** wählen (optional, zoombar), **Name**, **Beschreibung**, **Anzahl** setzen.
2. In späteren Szenen **Bedingungen** auf dieses Item legen (vorhanden / Menge ≥ n).
3. Bei Bedarf per Aktion **Menge ändern** oder Item **entfernen**.
So steuerst du Spielfortschritt, Rätsel und Hinweise elegant über ein flexibles, sichtbares **Inventar-System**.
# Inventar – Menge anpassen
Mit **Menge anpassen** veränderst du die Anzahl eines vorhandenen Inventar-Items – entweder **relativ** (±) oder als **fester Wert**. So kannst du Verbrauchsmaterialien abziehen, Belohnungen geben oder Zählerstände steuern.
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/4Uvgrafik.png)Felder
**Inventar**
Wähle das Item, dessen Menge geändert werden soll.
**Modus**
- **+/− (relativ):** addiert oder subtrahiert den eingegebenen Wert.
- Beispiele: `+1` = einen Schlüssel erhalten, `-1` = Batterie verbrauchen.
- **fester Wert:** setzt die Menge exakt auf den eingegebenen Wert.
- Beispiel: `0` = Item leeren/aufgebraucht, `3` = exakt drei Stück besitzen.
**Menge**
Ganzzahl (negativ erlaubt im ±-Modus).
---
## Verhalten in der App
- Die Anpassung passiert **sofort**, wenn die Szene/Interaktion mit dieser Aktion ausgeführt wird (also sofort wenn eine Szene aufgerufen wird.).
- Mengen werden auch als **negativ** behandelt: fällt das Ergebnis unter 0, wird also auch -1 angezeigt.
- Optionales Projektverhalten: Wenn eine Menge 0 erreicht, kann das Item im Inventar **ausgeblendet** oder **entfernt** werden (je nach Projekteinstellung).
---
## Typische Use-Cases
- **Verbrauch:** „UV-Lampe einschalten“ → Batterie **−1**.
- **Belohnung:** Rätsel gelöst → Münzen **+3**.
- **Reset/Zwangswert:** Beim Levelstart „Seile = 2“ (fester Wert).
- **Schlüsselabgabe:** Tür geöffnet → Schlüssel 0 (fester Wert) oder **−1**.
---
## Praxis-Tipps
- **Vor dem Abziehen prüfen:** Kombiniere mit einer **Bedingung** („Menge ≥ 1?“), um Fehlzustände zu vermeiden.
- **Klar kommunizieren:** Zeige nach Anpassungen eine kurze Rückmeldung („Batterie −1“).
- **Balancing:** Nutze feste Werte für Checkpoints, relative Werte für dynamisches Gameplay.
- **Testfälle:** Prüfe Grenzwerte (von 1 → 0, mehrfaches Klicken, Offline-Wiederaufnahme).
---
## Kurz-Workflow
1. Aktion **Menge anpassen** zur gewünschten Szene/Interaktion hinzufügen.
2. **Inventar-Item**, **Modus** (± oder fester Wert) und **Menge** setzen.
3. Optional: Vorher **Bedingung** (Menge ≥ n) und/oder danach **Hinweis** anzeigen.
4. Speichern – fertig.
# Variablen
**Variablen** sind interne Spielwerte – für Spielende **unsichtbar** – mit denen du Logik, Zustände und Verzweigungen steuerst (Flags, Zähler, Punkte, Fortschritt).
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/D73grafik.png)Anlegen
**Name** – frei wählbar (nur Buchstaben/Zahlen/\_), z. B. `Szene_gesehen`, `punkte`, `tresor_fehlversuche`.
**Anzahl** – Startwert (Ganzzahl, Standard 0/1).
> Verwende `0/1` als **Boolean-Flag**: `Szene_gesehen = 1` bedeutet „Intro schon gezeigt“.
---
## Verhalten & Reichweite
- Gilt **projektweit** für den aktuellen Durchlauf/Spielstand.
- Für Spielende **nicht sichtbar** (nur für Bedingungen & Aktionen nutzbar).
- Bleibt erhalten, bis du sie änderst oder den Spielstand zurücksetzt.
---
## Nutzung in Bedingungen
Du kannst Variablen an jeder Stelle abfragen, um Elemente/Wege zu steuern.
Unterstützte Vergleiche (typisch):
- `==` gleich `!=` ungleich
- `>` größer `<` kleiner
- `>=` mindestens `<=` höchstens
**Beispiele**
- Intro überspringen: nur anzeigen, **wenn** `Szene_gesehen == 0`.
- Bonus freischalten: Button zeigen, **wenn** `punkte >= 50`.
- Sicherheitslogik: Hinweis zeigen, **wenn** `tresor_fehlversuche >= 3`.
---
## Variablen ändern (Aktionen)
- **Erhöhen/Verringern**: `punkte += 10`, `tresor_fehlversuche += 1`.
- **Setzen**: `Szene_gesehen = 1` (Flag aktivieren), `timer = 0` (reset).
- **Beispiel-Workflow**: Beim Szenenstart `Szene_gesehen = 1`; beim richtigen Code `punkte += 20`; beim falschen Code `tresor_fehlversuche += 1`.
---
## Muster & Best Practices
- **Benennung**: klein\_schreiben\_mit\_unterstrich (eindeutig & sprechend).
- **Flags statt Text**: nutze Zahlen (0/1) statt Strings – schneller & fehlerarm.
- **Initialisierung**: setze Startwerte bewusst zu Beginn des Spiels/Levels.
- **Sicherheit**: prüfe vor dem Abziehen auf Grenzwerte (z. B. nicht unter 0).
- **Dokumentation**: kurze Tabelle deiner Variablen (Name, Bedeutung, Startwert).
---
## Mini-Beispiele
- **Intro-Once**
- Bedingung: „Intro-Dialog nur, wenn `intro_seen == 0`“
- Aktion beim Anzeigen: `intro_seen = 1`
- **Punktesystem**
- Rätsel gelöst: `punkte += 10`
- Bonuspfad: sichtbar, wenn `punkte >= 30`
- **Fehlversuche**
- Bei falscher Eingabe: `fails += 1`
- Zeige Hilfe, wenn `fails >= 2`
Mit Variablen baust du vom simplen „Schon gesehen?“ bis zur komplexen Quest-Logik alles sauber und wiederverwendbar.
# Elemente entfernen
Mit **Elemente entfernen** kannst du während des Spiels bereits platzierte, dynamische Elemente **ausblenden bzw. deaktivieren**. So steuerst du, was nach einer Aktion noch sichtbar/benutzbar ist.
**Unterstützte Typen**
- **Wegpunkt** (Map-Marker)
- **QR-Code**
- **NFC-Tag**
- **Countdown**
- **Inventar-Gegenstand**
> Der Effekt gilt für den **aktuellen Spielstand/Teamlauf**. Andere Teams/Spielstände bleiben unberührt.
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/W8Hgrafik.png)Bedienung
1. **+ Element** → Typ wählen (z. B. *Inventar*).
2. Je nach Typ das **konkrete Ziel** auswählen (z. B. Inventar-Item „Byte“ oder Wegpunkt „Brücke“).
3. Mehrere Elemente können in **einem Schritt** hinzugefügt und entfernt werden.
4. **Speichern** – die Entfernung passiert, **wenn diese Szene/Aktion ausgeführt** wird.
---
## Verhalten pro Typ
- **Wegpunkt**: Marker verschwindet; Auto-Select/Proximity löst nicht mehr aus.
- **QR/NFC**: Code/Tag ist für diesen Lauf **inaktiv** (Scan hat keine Wirkung).
- **Countdown**: Läuft nicht weiter und wird aus der UI entfernt.
- **Inventar**: Item wird **aus dem Inventar gelöscht** (entspricht Menge → 0 und ausblenden).
Wenn ein anvisiertes Element **nicht (mehr) existiert**, passiert still **nichts** (idempotent).
---
## Typische Einsatzfälle
- Nach Betreten eines Wegpunkts den **Marker entfernen**, damit die Karte clean bleibt.
- Ein **einmaliger QR/NFC** soll nur für den ersten Fund zählen.
- **Rätsel verbraucht** ein Item → Item aus dem Inventar entfernen.
- **Countdown** bei Pfadwechsel stoppen und ausblenden.
---
## Best Practices
- **Klarer Zeitpunkt**: Entfernen meist **nach** Abschluss eines Tasks (z. B. am Ende der Erfolgs-Szene).
- **Feedback** geben: „Wegpunkt erreicht – Marker entfernt“, „Schlüssel abgegeben“.
- **Sicherheit**: Entfernen von QR/NFC nur, wenn der Folgeschritt garantiert erreichbar ist (kein Soft-Lock).
- **Testen**: Lauf zweimal spielen – prüfen, dass entfernte Elemente nicht unerwartet wieder auftauchen.
---
## Kurz-Checkliste
1. In der Szene **Elemente entfernen** hinzufügen.
2. **Typ** und **Ziel** wählen (ggf. mehrere).
3. Platzierung prüfen (wann soll es passieren?).
4. Speichern → auf dem Gerät testen.
# Countdown
Mit dem **Countdown** gibst du einer Szene (oder einer ganzen Aufgaben-Sequenz) ein **Zeitlimit**. Der Timer läuft sichtbar in der App herunter. Er startet, sobald die Szene mit dem Countdown **betreten** wird und läuft weiter, bis er **abgelaufen** ist oder du ihn **entfernst**.
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/dfOgrafik.png)Felder
**Zeit (in Min.)**
Gib die Dauer in **Minuten** an (z. B. `1`, `5`, `15`).
Tipp: Kurze Tests immer mit `1`–`2` Minuten anlegen.
**Zielszene** *(optional)*
Szene, die **automatisch geöffnet** wird, wenn der Countdown 0 erreicht.
- Setzt du keine Zielszene, endet der Countdown ohne Szenenwechsel (du kannst z. B. selbst Hinweise/Buttons in der Szene platzieren, was passieren soll).
---
| ## Verhalten in der App
- Startet beim **Szenenaufruf** und zählt **sichtbar** herunter.
- Läuft **szenenübergreifend weiter**, wenn du es so planst (z. B. durch direktes Weiterleiten ohne Entfernen).
- Bei **Ablauf**:
- **mit** Zielszene → sofortiger Wechsel in diese Szene (z. B. „Zeit abgelaufen“).
- **ohne** Zielszene → Timer stoppt bei 0; du kannst den nächsten Schritt selbst steuern.
|
## Typische Einsätze
- **Zeitdruck für Rätsel** (z. B. 3 Minuten zum Entschlüsseln).
- **Bonusfenster**: Nur innerhalb von 2 Minuten gibt’s Extra-Punkte / alternative Szene.
- **Pacing**: Nach 10 Minuten automatisch zur nächsten Story-Phase springen.
---
## Best Practices
- **Klar kommunizieren**: In der Szene kurz erwähnen, was beim Ablauf passiert.
- **Fallback planen**: Eine **Zielszene** für „Zeit abgelaufen“ wirkt sauberer als ein „stiller“ Ablauf.
- **Nicht stapeln**: Parallel laufende Timer verwirren – nutze **einen** aktiven Countdown gleichzeitig.
- **Entfernen nach Erfolg**: Wenn das Team die Aufgabe vorzeitig schafft, den Countdown mit **Elemente entfernen → Countdown** stoppen, damit er nicht weiterläuft.
- **Playtests**: Zeiten real testen (Wegstrecken, Eingaben, GPS-Latenz berücksichtigen).
---
## Kurz-Workflow
1. **Countdown** hinzufügen → **Zeit** setzen.
2. (Empfohlen) **Zielszene** für Ablauf wählen.
3. In Erfolgs-/Abbruchpfaden ggf. **Countdown entfernen**.
4. Speichern → auf Gerät testen.
# Hinweise (Hints)
Mit **Hinweisen** gibst du zeitgesteuerte Hilfe zu einer Szene – bis hin zur **Lösung**. Du kannst bis zu **3 Hinweise** und **1 Lösung** definieren. Die Freigabe erfolgt **automatisch nach Zeit** (ab Betreten der Szene).
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/MqXgrafik.png)Felder
**Hinweis 1–3**
- **Zeit (in Minuten):** Nach wie vielen Minuten der Hinweis **verfügbar** wird.
- `0` = sofort verfügbar.
- Feld leer lassen = Hinweis wird **nicht** verwendet.
- **Text:** Inhalt des Hinweises.
**Lösung**
- **Zeit (in Minuten):** Freigabezeit für die **komplette Lösung** (meist deutlich später als die Hinweise).
- **Text:** Lösungstext.
---
| ## Verhalten in der App
- Die Uhr startet **beim Eintritt in die Szene**.
- Sobald ein Hinweis freigegeben ist, erscheint in der UI das **Hinweis-Badge** (mit Zähler) – Spielende können ihn dann **öffnen**.
- Hinweise bleiben nach Freigabe **dauerhaft verfügbar** (auch wenn die Szene kurz verlassen wird).
- **Gelesen/ungelesen** wird getrackt; das Badge-Icon zeigt den Status (z. B. noch ausstehende/neu verfügbare Hinweise).
- Erreicht die Szene das Lösungs-Zeitfenster, wird zusätzlich **„Lösung“** angeboten.
- Wenn du einzelne Felder leer lässt, werden sie **übersprungen**.
> Tipp: Die Hinweiszeiten sind **relativ** und **unabhängig** voneinander. Beispiel: H1 nach 2 min, H2 nach 5 min, Lösung nach 10 min.
---
|
---
## Gute Praxis
- **Staffelung:**
- H1: kleiner Schubs (z. B. Richtung/Ort).
- H2: konkreterer Tipp.
- H3: fast direkt vor die Nase.
- Lösung: vollständig.
- **Zeiten real testen:** GPS-/Wegzeiten und Gruppen-Tempo berücksichtigen.
- **Klar & kurz schreiben:** Ein Hinweis = ein Gedanke.
- **Keine Spoiler in H1:** Spannung erhalten.
- **Mit Countdown kombinieren:** Bei engem Zeitlimit Lösung ggf. früher anbieten.
- **Barrierefrei:** Wichtige Zahlen/Begriffe eindeutig (keine reinen Farbhilfen).
---
## Beispiele
- Stadt-Rätsel: `H1 2′` „Schau auf Augenhöhe an der Tür.“, `H2 4′` „Links neben der Klingel.“, `Lösung 7′` „Code: 4711“.
- Suchaufgabe im Wald: `H1 3′` „Folge dem schmalen Pfad.“, `H2 6′` „Moosiger Stein rechts.“
---
## Kurz-Checkliste
1. Für jede Szene sinnvolle **H1–H3 + Lösung** planen.
2. **Zeiten** eintragen (nicht benötigte Felder leer lassen).
3. **Texte** klar formulieren.
4. Szene testen → Zeiten ggf. anpassen.
# Foto-Challenge
Mit der **Foto-Challenge** sollen Spielende ein **neues Foto** aufnehmen, das zu deiner **Aufgabenbeschreibung** passt (z. B. „Brücke **und** Kirchturm gemeinsam im Bild“). Das Foto wird automatisch bewertet; je nach **Score** (0–100) leitest du in eine **Erfolgs-** oder **Fehl-Zielszene** weiter.
---
## [](https://docs.scenario.app/uploads/images/gallery/2025-09/55Ggrafik.png)Felder
**Aufgabenbeschreibung**
Kurze, klare Anweisung, was auf dem Foto zu sehen sein soll.
Beispiele:
- „Rotes Fahrrad **vor** dem Brunnen“
- „Zwei Straßenschilder **im selben Bild**“
- „Teammitglied hält Ticket **lesbar** in die Kamera“
**Schwellenwert (0–100)**
Grenze, ab der die Challenge als **bestanden** gilt.
- **Niedriger** = toleranter, **höher** = strenger.
- Praxiswerte: Outdoor 60–75, nahe/klare Motive 70–85.
**Retry erlauben**
- **An**: Nach Fehlversuch direkt **neues Foto** möglich.
- **Aus**: Bei Fehlversuch geht es sofort in die **Fehl-Zielszene**.
**Erfolgs-Zielszene / Fehl-Zielszene**
Szenen für **bestehen** bzw. **nicht bestehen** (z. B. „Gut gemacht!“ / „Versuch’s noch mal – Tipp“).
**Notiz (optional)**
Interne Redaktionsnotiz (für dich, nicht sichtbar im Spiel).
---
## Verhalten in der App
1. Die App öffnet die **Kamera** und zeigt die Aufgabenbeschreibung.
2. Nach dem Auslösen wird das Bild **automatisch bewertet** (Score 0–100).
3. **Score ≥ Schwellenwert** → **Erfolgs-Zielszene**.
4. **Score < Schwellenwert** → mit **Retry** neuer Versuch, sonst **Fehl-Zielszene**.
5. (Optionales Projektverhalten) Aufgenommene Fotos können im **Verlauf/Upload** erscheinen.
> Kamera-/Speicherrechte müssen erlaubt sein. Diese Funktion erfordert zwingend eine Internetverbindung. Die Aufgabenprüfung erfolgt mit künstlicher Intelligenz.
---
## Gute Aufgaben schreiben (wirkt direkt auf den Score)
- **Konkret statt vage:** „Brücke **und** Kirche im selben Bild“ statt „Macht ein schönes Foto“.
- **Objekte & Beziehungen nennen:** „Person hält **Zeitung** **vor** Café-Schild“.
- **Zählwörter verwenden:** „**Zwei** Straßenschilder“, „**eine** rote Blume“.
- **Meide Negationen:** „ohne Menschen“ ist schwer zuverlässig prüfbar – besser positiv formulieren.
- **Lesbarkeit/Qualität:** Wenn Text erkennbar sein soll, schreibe „**Text lesbar**“.
- **Kontext nutzen:** Ortsmerkmale (Brunnen, Turm, Logo) sind leichter prüfbar als Stimmungen.
---
## Praxis-Tipps
- **Schwelle testen:** Starte mit **70** und prüfe vor Ort unterschiedliche Licht-/Winkel-Situationen.
- **Hinweise kombinieren:** Nutze das **Hinweise**-Feature, falls Teams häufiger scheitern.
- **Cheat-Sicherheit:** Galerie-Import deaktivieren (falls Projektoption vorhanden) → nur **Live-Foto**.
- **Klare Kommunikation:** Kurz sagen, was bei Misserfolg passiert („Du kannst es gleich nochmal versuchen“).
- **Datenschutz:** Keine identifizierbaren Personen als Pflichtobjekt in sensiblen Bereichen.
---
## Kurz-Workflow
1. **Aufgabenbeschreibung** formulieren.
2. **Schwellenwert** setzen (z. B. 70), **Retry** wählen.
3. **Erfolgs-** und **Fehl-Zielszene** festlegen.
4. Speichern und **vor Ort testen** → Schwelle ggf. feinjustieren.
So baust du flexible Foto-Missionen, die ohne Referenzbild auskommen und trotzdem automatisch bewertet werden.
# Javascript
Mit **Javascript** kannst du Szenen mit eigener Logik erweitern – z. B. UI anpassen, kleine Effekte einbauen, Zeiten messen oder externe Schnittstellen triggern.
> **Wichtig:** JS ist **inkonstant** – beim Betreten **jeder** Szene wird es **neu** ausgeführt. Teile, die überall gelten sollen, gehören in die **Masterszene** `[[ ]]`.
> Starte dein Script immer **leicht verzögert**, damit die Szene fertig gerendert ist:
```
setTimeout(function () { // dein Code hier }, 300);
```
---
## Gute Praxis (sehr wichtig)
- **Idempotent denken:** Code darf mehrfach laufen, ohne doppelten Effekt zu erzeugen.
Nutze einen „Once“-Guard:
- **Aufräumen:** Wenn du `setInterval`/Event-Listener setzt, räume sie auf (oder nutze `{ once:true }` bei `addEventListener`).
- **Robust warten:** Wenn du ein Element brauchst, das evtl. später kommt, warte kurz darauf:
```
function waitSel(sel, cb, tries=20){ const el = document.querySelector(sel); if (el) return cb(el); if (tries--) return setTimeout(()=>waitSel(sel, cb, tries), 100); } setTimeout(()=>waitSel('.btn-primary', btn=>{ btn.classList.add('pulse'); }), 200);
```
- **Keine Blocker:** Lange Schleifen vermeiden; lieber Timings/Promises verwenden.
- **Fallbacks:** Netzaufrufe können an CORS/Offline scheitern → Fehler behandeln.
---
## Häufige Mini-Rezepte
### 1) Button-Label/Style anpassen
### 2) Szene nach X Sekunden automatisch fortsetzen
### 3) Einfache „Einmal“-Animation
### 4) Soft-Gate per Tageszeit (Beispiel)
### 5) Ereignis mitzählen (lokal)
---
## Typische Stolperfallen
- **Doppelte Listener**: Bei jeder Rückkehr in die Szene wird JS neu ausgeführt → `once`-Option nutzen:
- **Zu früher Zugriff**: Ohne Delay (`setTimeout`) existieren DOM-Elemente evtl. noch nicht.
- **Starke Manipulation am Layout**: Bedenke, dass die App auf vielen Displaygrößen läuft – nur sanft stylen.
- **Blockierende Prompts/Alerts**: Sparsam einsetzen; sie unterbrechen den Flow.
---
## Checkliste
1. **Delay** einbauen (`setTimeout` 150–300 ms).
2. **Idempotent** & ggf. **Once-Guard** verwenden.
3. Wo nötig: **waitSel**/Observer nutzen.
4. Netz-/Fehlerfälle abfangen.
5. Auf mehreren Geräten testen.
Damit bekommst du stabile, kleine Scripts, die zuverlässig mit der Szenenlogik zusammenspielen.
Gute Beispiele "ready to use" findest du auch unter [Hacks](https://docs.scenario.app/books/storyboard/chapter/hacks-tipps "05 Hacks & Tipps").
# Stylesheets (Benutzerdefinierte Stile)
Mit **Stylesheets** kannst du eigenes **CSS** einbinden.
Wichtig: **Stylesheets sind konstant** – einmal geladen, wirken sie **im ganzen Spiel** (alle Szenen). Plane also **global** und arbeite bevorzugt mit **Klassen**, nicht mit generischen Element-Selektoren.
---
## Grundprinzipien
- **Global & dauerhaft**: Regeln gelten szenenübergreifend, bis du sie änderst oder entfernst.
- **Mit Klassen arbeiten**: Viele Features (z. B. 360°-Hotspot) haben ein Feld **„CSS-Klasse“** – dort trägst du Klassen wie `hs-primary` ein und definierst sie hier im Stylesheet.
- **Schonend stylen**: Keine globalen Resets wie `*{ margin:0 }` oder `button{… }`, das kann UI-Elemente der App unerwartet verändern.
- **Spezifität niedrig halten**: Lieber `.hs-primary` als `div .container .hs-primary`. So bleibt es wartbar.
---
## Beispiele
### 1) Eigene Hotspot-/Button-Stile
```
/* im Feature als CSS-Klasse: hs-primary */ .hs-primary{ background: #3faace; color:#fff; border:1px solid rgba(0,0,0,.25); border-radius:10px; padding:.5rem .75rem; box-shadow:0 6px 16px rgba(0,0,0,.15); } .hs-primary:hover{ transform:translateY(-1px); }
```
### 2) Utility-Klassen für Inhalte
Nutze sie in Textblöcken, Dialogen, etc. (wo Klassen gesetzt werden können).
```
.u-shadow { box-shadow:0 8px 24px rgba(0,0,0,.18); } .u-round { border-radius:16px; } .u-muted { opacity:.75 } .u-center { text-align:center } .u-spacious { padding:1rem }
```
### 3) Farb-Theme per CSS-Variablen
```
:root{ --brand:#68bfdd; --brand-ink:#fff; } .btn-primary{ background:var(--brand); color:var(--brand-ink); }
```
### 4) Sanfte Szene-Einstiegsanimation (klasse auf Container setzen)
```
.scene-fadein{ animation:scnFade .45s ease-out both; }
@keyframes scnFade{ from{ opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
```
---
## Best Practices
- **Scoping**: Wenn möglich, gib Szenen/Features eigene Klassen und style **nur** diese (`.quiz-intro .u-muted`).
- **Kontrast & Lesbarkeit**: Farben so wählen, dass AA-Kontrast (≥ 4.5:1) erreicht wird – besonders bei Buttons/Links.
- **Animationen sparsam**: Kurze, dezente Effekte (≤ 500 ms, `ease-out`).
- **Testen auf Geräten**: Unterschiedliche Displays, Dark-Mode und Zoomstufen durchprobieren.
- **Rollback**: Wenn etwas „zu global“ wirkt, überschreibe gezielt oder entferne die Regel (Stylesheets wirken sofort in allen Szenen).
---
## Mini-Checkliste
1. Klassen in Features vergeben (z. B. **CSS-Klasse** im Hotspot-Editor).
2. Passende Regeln hier definieren (keine globalen Tag-Selektoren).
3. Responsiv & kontrastreich gestalten.
4. Auf mehreren Geräten testen.
So bleibt dein Look konsistent – und trotzdem präzise steuerbar pro Feature/Szene.
# Team-Sync deaktivieren
Mit **Team-Sync** werden Szenenwechsel können normalerweise **für das ganze Team gespiegelt** werden.
Das Feature **„Team-Sync deaktivieren“** unterbricht diese Synchronisierung **für die aktuelle Szene**.
---
## Was passiert genau?
- **In dieser Szene gilt:**
Jeder spielt **lokal** auf seinem Gerät. **Szenenwechsel**, Button-Klicks, Medien-Starts usw. werden **nicht** an die anderen Teamgeräte gespiegelt.
- **Danach:**
Verlässt man die Szene (oder in der nächsten Szene ohne dieses Feature), greift der normale **Team-Sync wieder**.
- **Spielstand:**
Globale Zustände (z. B. Punkte/Variablen/Inventar, die du per Logik setzt) bleiben **teamweit** konsistent – du unterdrückst nur die **Navigation/Sync der Szene**, nicht deine eigenen Spielregeln.
> Kurz: **Navigation & UI-Interaktionen lokal**, **deine Variablen/Inventar-Logik weiterhin global** (so wie du sie definierst).
---
## Typische Einsätze
- **Geheime Auswahl / Voting**
Jede Person wählt erst **alleine**; danach führst du per Logik wieder zusammen (z. B. Auswertungsszene).
- **Parallele Aufgaben**
Zwei Hinweise/Wege werden separat gelöst, ohne dass ein Gerät die anderen „mitzieht“.
- **Medien in Ruhe ansehen**
Video/Audio individuell abspielen, ohne dass ein „Weiter“ alle anderen rauswirft.
---
## So nutzt du es
1. **Feature „Team-Sync deaktivieren“** in **die betreffende Szene** einfügen.
2. Buttons/Navigation normal anlegen – sie wirken **nur lokal**.
3. In der Folgeszene (ohne dieses Feature) kann das Team wieder synchronisieren.
---
## Best Practices
- **Kommuniziere es im Text**: „Ihr entscheidet jetzt **jeweils für euch**.“
- **Wieder zusammenführen**: Plane eine **gemeinsame Folgeszene** (z. B. Auswertung), in der Team-Sync wieder aktiv ist.
- **Soft-Locks vermeiden**: Achte darauf, dass jede lokale Entscheidung **einen Weg zurück** oder **einen klaren Abschluss** hat.
- **Status trotzdem speichern**: Nutze Variablen/Inventar, um individuelle Eingaben zu sichern und später auszuwerten.
- **Karten/Orts-Trigger**: Wenn in dieser Szene noch Wegpunkte/QR/NFC genutzt werden, lösen sie **nur auf dem jeweiligen Gerät** aus – plane die Folgeaktionen entsprechend.
---
## Muster
- **Geheime Wahl**: Team-Sync aus → alle wählen A/B → Variable pro Gerät setzen → Sammelszene liest Variablen aus und zeigt Ergebnis.
- **Parallel-Lesen**: Jeder öffnet ein anderes Dokument/Foto im Inventar → danach gemeinsamer Button „Fertig – weiter“.
Mit „**Team-Sync deaktivieren**“ verhinderst du gezielt das Mitziehen der Gruppe – perfekt für individuelle Schritte innerhalb eines gemeinsamen Spiels.