# 🛠️ Hacks & Tipps

Kleine Kniffe mit großer Wirkung: hier findest du kompakte Rezepte, Code-Snippets und Best-Practices, die Szenen schneller schöner und smarter machen. Ideal zum Nachbauen – von Mini-Effekten bis zu cleveren Utilities.

# Passwort-Abfrage innerhalb einer Szene

Wenn du eine eigene Passwort- oder Wertabfrage implementieren möchtest, dann erstelle zunächst eine neue, leere Szene.

1. Füge die Funktion "Javascript" hinzu:

```javascript
    window.passwort = function () {
    
    let content = '<input type="text" id="passwort" name="name" required size="10" placeholder="Passwort?">'
    
    $.confirm({
        title: 'Bitte gib ein gültiges Passwort ein:',
        content: content,
        buttons: {
            'Flug suchen': {
                text: 'Passwort prüfen',
                btnClass: 'btn-blue',
                action: function () {
                    var passwort = this.$content.find('#passwort').val();
                    if(!passwort){
                        $.alert('Bitte gib ein Passwort ein!');
                        return false;
                    }
                    if(passwort == "123456") {
                        // do something!
                        $.alert('Richtig!');
                        window.story.go('ZIELSZENE'); // Hier den Titel deiner Ziel-Szene eingeben
                    } else {
                        $.alert('Das Passwort ' + name + ' ist leider falsch!');
                    }
                }
            },
            'Abbrechen': function () {
                //close
            },
        },
        onContentReady: function () {
            // bind to events
            var jc = this;
            this.$content.find('form').on('submit', function (e) {
                e.preventDefault();

            });
        }
    });
    };


```

2\. Editiere in deiner Szene den HTML Code und füge folgenden Coder an einer beliebigen Stelle ein:

```html
<button name="test" onClick="window.passwort();">Passwort</button>
```

# Typewriter Effekt

#### Demo

####  <video class=" align-left" controls="controls" height="270" src="https://docs.scenario.app/attachments/36?open=true" width="480"></video>

Wenn der Text in einer Szene wie von einer Schreibmaschine getippt werden soll, dann kann dieser Effekt mit einem Javascript Code in einer globalen Sektion erreicht werden:

#### Globale Sektion -&gt; Funktion Javascript

```javascript
window.showSpeechBubble = function (text) {
    var output = document.getElementById("output");

    // Sprechblase erstellen
    var bubble = document.createElement("div");
    bubble.classList.add("speech-bubble");
    output.appendChild(bubble);

    // Text Typing Effekt
    let index = 0;
    bubble.style.opacity = 1; // Blendet die Sprechblase ein
    
    function typeWriter() {
        // HTML-Interpretation sicherstellen
        bubble.innerHTML = text.substring(0, index);

        if (index < text.length) {
            index++;
            setTimeout(typeWriter, 50); // Geschwindigkeit des Tippens
        }
    }

    typeWriter();
}
```

#### Globale Sektion -&gt; Stylesheet

\*optional, damit sieht der Text ähnlich wie eine Sprechblase aus.

```css
.speech-bubble {
    position: absolute;
    top:100px;
    left: 5%;
    max-width: 90%;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    border: 2px solid black;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    font-family: mom;
    font-size: 14px;
    color: black;
    line-height: 1.4;
    opacity: 0; /* Startet unsichtbar */
    transition: opacity 0.5s; /* Sanftes Einblenden */
}

.speech-bubble::after {

    position: absolute;

    left: 5%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    border-left: 0;
    margin-left: -5px;
}
```

#### Szene -&gt; Funktion Javascript

```javascript
setTimeout(function() {
    window.showSpeechBubble('HIER DER TEXT, DER GETIPPT WERDEN SOLL');
},2000);
```

####   

# KI-Generator

Der **KI-Generator** baut dir aus einer kurzen Beschreibung einen **Story-Entwurf** mit **Szenenstruktur, Titeln und Textideen**. Perfekt, um schnell vom leeren Board zu einem spielbaren Rohling zu kommen.

---

## <video class=" align-center" controls="controls" height="434" src="https://docs.scenario.app/attachments/54?open=true" style="width: 773px; height: 434px;" width="773"></video>

## Felder

**Beschreibe dein Szenario**  
Freitext-Prompt: Worum geht’s? Wo spielt es? Welche Orte/Elemente sollen vorkommen?  
Beispiel:

> „Erstelle eine Geschichte vom verschwundenen Gold in der Braunschweiger Innenstadt, die zu den 3 wichtigsten Sehenswürdigkeiten führt.“

**Max. Szenen**  
Obergrenze für die erzeugte Szenenzahl (z. B. *10*). Die KI versucht, darunter zu bleiben.

**Sprache**  
Sprache des Entwurfs (z. B. *Deutsch*, *Englisch* …).

**Tageslimit**  
Oben siehst du, wie viele **Generierungen heute** noch möglich sind (z. B. *0 verwendet • übrig: 20/Tag*).

**Buttons**

- **Generieren** – startet die Erstellung.
- **Abbrechen** – schließt ohne Ergebnis.

---

## Ergebnis – was erzeugt wird

- **Szenen** mit **Titeln** und **Kurztexten/Dialogschnipseln**
- **lineare oder leichte Verzweigungen** (je nach Prompt)
- **Platzhalter** für Interaktionen (z. B. „Hier QR/Wegpunkt einsetzen“)
- **Ideen** für Hinweise, Rätsel oder Medien

> Der Entwurf ist absichtlich **leichtgewichtig**: Du verfeinerst danach Inhalte, fügst echte Trigger (Wegpunkt, QR/NFC), Medien und Logik hinzu.

---

## Typischer Workflow

1. **Prompt schreiben** → *Generieren*.
2. Entwurf prüfen: **Reihenfolge**, **Ton**, **Länge**.
3. Szenen öffnen und mit Features füllen (Wegpunkte, Dialoge, Eingaben, Medien …).
4. **Feintuning**: Namen, Orte, Hinweise, Inventar/Variablen ergänzen.
5. **Vorschau** starten und iterieren.

---

## Gute Prompts – Tipps

- **Ort + Ziel + Stimmung**:  
    *„Outdoor-Rätsel für Familien im Stadtzentrum, 60–90 Min., freundlich-entspannt.“*
- **Pflichtstationen nennen**:  
    *„Muss Rathaus, Dom und Burgplatz enthalten.“*
- **Interaktionstypen** nennen\*\*:\*\*  
    *„Mind. 2 QR-Scans, 1 Foto-Challenge, 1 Dialog.“*
- **Grenzen setzen**:  
    *„Max. 8 Szenen, keine Horror-Elemente, barrierearm formulieren.“*

---

## Bearbeiten &amp; Regenerieren

- Du kannst **jeden erzeugten Knoten** (Szene/Notiz) normal bearbeiten.
- Unpassendes einfach löschen; bei Bedarf **erneut generieren** (gleicher oder angepasster Prompt).
- Mehrere Läufe lassen sich **kombinieren** (Entwürfe mischen).

---

## Hinweise &amp; Grenzen

- **Echtwelt-Daten** (Koordinaten, Öffnungszeiten etc.) sind **Platzhalter** – prüfe sie und setze echte Wegpunkte/Trigger.
- **Konsistenz**: Namen/Begriffe ggf. vereinheitlichen.
- **Urheberrecht**: Für Bilder/Audio/Video eigene Assets nutzen.
- **Datenschutz**: Keine sensiblen Personendaten in Prompts verwenden.

---

## Kurz-Checkliste

- Klarer Prompt (Ort, Ziel, max. Szenen, Stil).
- Generieren → Entwurf sichten.
- Features &amp; Logik ergänzen.
- Vorschau testen, iterieren.

So kommst du in Minuten vom **Nichts** zu einem **spielbaren Grundgerüst** – und kannst dich aufs kreative Feintuning konzentrieren.