Technischer Hinweis: Dieses HTML-Tool ist vollständig offlinefähig. Es lädt keine externen Ressourcen und funktioniert ohne Internetverbindung. Es werden keinerlei Daten übertragen und es findet kein Tracking statt.
Du kannst diese Datei lokal speichern, per USB weitergeben oder im Browser über Doppelklick starten.
Mobilnutzung: Die Anwendung funktioniert auch auf Smartphones und Tablets. Aufgrund des begrenzten Platzes empfehlen wir Querformat oder Tablet-Größe für komfortables Schreiben und Lesen. Ein Speichern von JSON-Daten ist ebenfalls mobil durch Kopieren möglich.
Dieses Tool hilft dir beim Erstellen von verzweigten Erlebnissen: sogenannte "Entscheidungsgeschichten". Leserinnen und Leser können durch ihre Entscheidungen den Verlauf beeinflussen. Jede Szene bekommt einen eindeutigen Schlüsselnamen, einen Text und eine oder mehrere Auswahlmöglichkeiten, die zu anderen Szenen führen. Du kannst Szenen anlegen, verknüpfen, Vorschauen anzeigen lassen und am Ende das komplette Story-Konstrukt als JSON weiterverwenden oder speichern – alles direkt im Browser, komplett offline und lokal.
Die Geschichte wird ab der Szene mit dem Schlüssel start gestartet
Diese einfache Textdarstellung zeigt, welche Szene zu welcher führt. Sie wird automatisch aus deinem Story-Aufbau generiert.
(noch kein Baum erstellt)
Lade eine bestehende Geschichte (JSON) oder exportiere deine aktuelle Arbeit.
(kein Import durchgeführt)
Du kannst dein JSON in dieses Template einsetzen, um eine Wiedergabeseite zu erstellen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>My Story-Viewer</title>
</head>
<body>
<div id="game"></div>
<script>
const story = {
// INSERT JSON STORY HERE
};
function showScene(key)
{
const scene = story[key];
if (!scene) return;
let html = `<h2>${key}</h2><p>${scene.text}</p>`;
if (scene.choices !== undefined && scene.choices.length !== 0) {
scene.choices.forEach(c => {
html += `<button onclick='showScene("${c.next}")'>${c.text}</button><br>`;
});
}
document.getElementById('game').innerHTML = html;
}
showScene("start");
</script>
</body>
</html>