🛠️ 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:
    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:

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

 

Typewriter Effekt

Demo

 

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 -> Funktion 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 -> Stylesheet

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

.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 -> Funktion 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.

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

Ergebnis – was erzeugt wird

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

Bearbeiten & Regenerieren

Hinweise & Grenzen

Kurz-Checkliste

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