Interaktive Geschichten mit Twine

# Interaktive Geschichten mit Twine <style> div.block { hyphens: auto; text-align:justify; } div.blue { hyphens: auto; text-align:justify; background: rgba(7, 60, 110, 0.3); padding-left:5px; padding-right: 5px; } div.orange { hyphens: auto; text-align:justify; background: rgba(222, 110, 6, 0.3); padding-left:5px; padding-right: 5px; } img.picturezoom { transition: transform 0.2s; } img.picturezoom:hover { transform: scale(2.0, 2.0); z-index: 100; } </style> ### **Einleitung:** <div class = "block"> Noch nie von »Twine« gehört? Dann probieren Sie es hier aus: [Entscheide Dich](https://mmmsued.github.io/twine/) Mit »<a href="https://twinery.org/" target="_blank">Twine</a>« kann man sehr einfach interaktive Geschichten, Textadventures und kleine Spielformate selber herstellen. Im Grunde genommen benötigt man nur zwei eckige Klammern. Alles, was innerhalb dieser Klammern steht, wird zu einem anklickbaren Link. Mit deren Hilfe navigiert man durch die »Passagen« (»Passagen« heißen die Seiten in »Twine«). <div style="position: relative;z-index: 10;"> <img src="https://www.multimediamobile.de/fileadmin//Daten/Dokumente/sued/bilder/web-twine-sued.png" class="picturezoom"></div><br> Doch schnell möchte man mehr. Wie kann ich Texte formatieren? Bilder, Töne und Videos einbinden? Um diese Fragen zu beantworten, finden Sie in den »<a href="https://www.multimediamobile.de/sued-twine" target="_blank">Twine-Materialien</a>« auf unserer Webseite eine Datei namens »LIES MICH.html«. Öffnen Sie sie in »Twine« mit »Aus Datei importieren«. Die Datei enthält links oben eine kleine Hilfe in Form von »Passagen«, die Sie bei Ihren ersten Schritten zu einer interaktiven Geschichte unterstützt. <br /><br /> </div> ### **Einsatz im Unterricht:** <div class = "block"> Der Einsatz von »Twine« im Unterricht kann grundsätzlich auf zwei Arten erfolgen. Entweder Sie erstellen eine Geschichte und lassen diese dann Ihre Schüler:innen oder Teilnehmer:innen spielen. Oder aber, Sie schaffen einen zeitlichen und organisatorischen Rahmen, in dem Ihre Schüler:innen oder Teilnehmer:innen selber mit »Twine« eine kleine Anwendung entwerfen. Für den Einsatz von »<a href="https://twinery.org/" target="_blank">Twine</a>« wird zum einen das Programm selber und ein Laptop oder Desktop-PC benötigt. Grundsätzlich könnte man »Twine« auch komplett über einen Webbrowser bedienen. Empfohlen wird dies aber nicht, da beim (versehentlichen) Schließen des Browserfensters die gesamte Arbeit verloren geht (wenn man nicht vorher exportiert hat ...). Ein Internetzugang während der Erstellung einer Geschichte ist hilfreich bei der Suche nach Bildern und anderen Medien, die man einbinden möchte. Spätestens, wenn man die Geschichte per Cloud o.ä. verteilen möchte, ist eine Online-Anbindung sinnvoll. <br /><br /> </div> ### **Geeignete Inhalte** <div class = "block"> Inhaltlich eignet sich »Twine« gut für sogenannte »<a href="https://de.wikipedia.org/wiki/Dilemma" target="_blank">Dilemma-Geschichten</a>«, also Situationen, in denen es um eine (moralische) Entscheidung geht: * <a href="https://www.zum.de/Faecher/kR/BW/wagner/dilemma1.htm" target="_blank">www.zum.de</a> * <a href="https://material.rpi-virtuell.de/material/dilemmageschichten" target="_blank">material.rpi-virtuell.de</a> Aber es gibt natürlich viele andere Themen, bei denen sich der Einsatz von »Twine« lohnt: * Quiz (Verschwörungstheorien oder jedes andere Sachthema) * Interaktive Gedichte (Heinrich Heine: Das Fräulein stand am Meere) * Brief an eine literarische Figur schreiben (+ Antworten Empfänger:in) * Märchenwelten mischen (Rotkäppchen trifft Rapunzel trifft Schneewittchen ...) * Romanwelten mischen (Werke einer Zeitepoche, eines Themas, ein:e Autor:in) * Stadtreise (Schulausflug – fremdsprachig) * Geschichtssynopsis (Mittelalter in Europa, Amerika, Afrika, Asien) * Kunstsynopsis (wer schrieb & komponierte, während die Impressionist:innen malten?) * NaWi-Versuche (Vorbereitung – Durchführung – Ergebnisse – verwandte Themen) <br /><br /> </div> ### **Eine Geschichte schreiben:** <div class = "block"> Bei einfachen und überwiegend linearen Geschichten kann man oft ohne große vorherige Überlegungen direkt loslegen. Wird die Geschichte aber länger und komplexer oder sollen mehrere Teams parallel an einzelnen Strängen arbeiten, muss man planen. Ein Storyboard in Form eines Mindmaps ist dann sehr hilfreich: * <a href="https://map.kits.blog/" target="_blank">map.kits.blog</a> Nützliche Tipps zum Verfassen einer Geschichte gibt es hier: * <a href="https://www.zebis.ch/unterrichtsmaterial/eine-interaktive-geschichte-schreiben" target="_blank">www.zebis.ch</a> * <a href="https://www.plot-generator.org.uk" target="_blank">www.plot-generator.org.uk</a> * <a href="https://digitale-spielewelten.de/methoden/interaktives-storytelling/174" target="_blank">digitale-spielewelten.de</a>  <details style="background-color: #eeeeee; border: 1px solid grey;"> <summary style="padding: 4px; border: 4px;">Twine-Geschichten mit KI schreiben:</summary> <div style="hyphens: auto;text-align:justify;background: rgba(124, 124, 124, 0.3);padding-top:5px;padding-bottom:5px;padding-left:20px;padding-right: 20px;"> Keine Idee für eine Geschichte? Vielleicht hilft Künstliche Intelligenz weiter? Fragen Sie »<a href="https://chat.openai.com/" target="_blank">ChatGPT</a>« oder eine KI <a href="https://www.futurepedia.io/" target="_blank">Ihrer Wahl</a> nach einer Story für »Twine« oder ein Textadventure. Ein Prompt könnte so aussehen: »Erstelle mir eine Geschichte für ein Textadventure. Die Geschichte soll handeln von [... einer Person ...]. In der Geschichte muss vorkommen [... Ort, Zeit, Gegenstände, ...]. Der Stil der Geschichte soll sein [... witzig, gruselig, ...]. Schreibe die Geschichte in kurzen Passagen mit maximal 50 Wörtern. Am Ende einer Passage stelle drei Fragen, wie die Geschichte weitergehen soll. Schreibe auf deutsch.«<br /><br /> Mehr zum Thema: <a href="https://www.taskcards.de/#/board/d20aeef0-ffac-42ce-a6b3-a4225ae06e57?token=6b828a23-0b75-4112-9f46-f2478b17c5e1" target="_blank">Hey KI, ich will Abenteuer ...</a> </div> </details> <br /><br /> </div> ### **Aufgabe:** <div class = "block"> Entwerfen Sie eine eigene interaktive Geschichte mit Twine. Nehmen Sie beispielsweise ein Thema aus Ihrem aktuellen Unterricht oder einen Inhalt mit persönlichem Bezug (Hobby). Oder greifen Sie auf unsere Vorschläge zurück: **Quiz:** Entwerfen Sie ein Quiz zum Thema Verschwörungstheorien. Nutzen Sie hierfür das Infoblatt von »<a href="https://www.br.de/sogehtmedien/stimmt-das/wilde-theorien/unterrichtsmaterial-un-wahrheiten-wilde-theorien-download-100.html" target="_blank">so geht Medien: Quiz – So entlarvt man Verschwörungstheorien</a>«. **Fake News:** Entwerfen Sie eine Geschichte, die zeigt, wie man mit Fake News entlarvt. Nutzen Sie das klicksafe-Infoblatt »<a href="https://www.stage.klicksafe.de/fileadmin/cms/download/Sonstiges/Themen/Problematische_Inhalte/Verschwoerungstheorien/klicksafe-Infoblatt_TippsUmgangVerschw%C3%B6rungstheorien.pdf" target="_blank">Umgang mit Fake News und Verschwörungstheorien</a>«. **Gedicht:** Verwenden Sie ein Gedicht und bereiten Sie es in »Twine« auf: Heinrich Heine: Das Fräulein stand am Meere Das Fräulein stand am Meere Und seufzte lang und bang, Es rührte sie so sehre Der Sonnenuntergang. »Mein Fräulein! Sein Sie munter, Das ist ein altes Stück; Hier vorne geht sie unter Und kehrt von hinten zurück.« **WICHTIG:** Denken Sie daran, Ihr Storyformat zu Beginn auf »SugarCube 2.36.1« umzustellen. <div style="position: relative;z-index: 10;"> <img src="https://www.multimediamobile.de/fileadmin/Daten/Dokumente/sued/bilder/web-twine-storyformat.png" class="picturezoom"></div><br> Sie können natürlich auch eine der anderen Geschichtsformate wählen. Aber »SugarCube 2.36.1« ist oft einfacher, wenn man später die Gestaltung der »Passagen« mit HTML und CSS beeinflussen möchte. </div><br /> ### **Branching: Geschichten verzweigen** <div class = "block"> Das besondere an den Geschichten in »Twine« ist ja, dass sie Verzweigungen (englisch: Branching) aufweisen. Es gibt vielfältige Formen, wie diese Verzweigungen aussehen können: <div style="position: relative;z-index: 10;"> <img src="https://emshort.files.wordpress.com/2019/11/gauntlet.jpg?w=768"></div><br> Genauere Beschreibungen der verschiedenen Verzweigungsformen finden Sie auf diesen Webseiten: * <a href="https://heterogenoustasks.wordpress.com/2015/01/26/standard-patterns-in-choice-based-games/" target="_blank">Standard Patterns in Choice-Based Games</a> * <a href="https://emshort.blog/2019/11/29/storylets-you-want-them/" target="_blank">Emily Short's Interactive Storytelling</a> Egal, ob Sie sich am Ende für die oben abgebildete »Gauntlet« (Fischgräte), den »Bootleneck« (Flaschenhals), einen »Sorting Hat« oder für eine Mischung verschiedener Formate entscheiden: Haben Sie stets im Blick, dass Sie nicht – versehentlich – ein »Death End« produzieren, also eine Passage, aus der es für Spieler:innen kein Entrinnen mehr gibt. </div><br /> ### **Geschichte verfeinern: Textformatierung** <div class = "block"> Verfeinern Sie Ihre Twine-Geschichte indem Sie den Text mit Markup-Anweisungen, HTML-Befehlen oder CSS formatieren. Hier ein paar Beispiele: <div> TYPISCHE MARKUP-BEFEHLE: !Level 1 Überschrift (entspricht h1 in HTML) - geht bis Level 6 - wirkt pro Zeile ''Fett'' - Achtung: keine Anführungszeichen, sondern zweimal Apostroph //Kursiv// __Unterstrichen__ *Liste mit Punkt - Zeile muss linksbündig stehen, sonst keine Liste #Liste mit Zahl am Anfang </div> <div> TYPISCHE HTML-BEFEHLE: <b>Fett</b> <i>Kursiv</i> <hr> - horizontale Linie (benötigt keine schließende Klammer) <p>Erzeugt einen Absatz</p> <br> - Umbruch (benötigt keine schließende Klammer) <div>Behandelt mehrere eingeschlossene Objekte als Gruppe</div> <span>Wie div, aber der beeinflusste Bereich ist kleiner</span> <ul type="Typ"><li>Listeneintrag mit angegebenem Typ</li></ul> <ol type="Typ"><li>Listeneintrag mit Zahl</li></ol> <blockquote>eingerücktes Zitat o. ä.</blockquote> <center>Dieser Text wird auf der Seite zentriert</center> <pre>Darstellung wie eingetippt (Lücken, Umbrüche, Einrückungen)</pre>  /% Auch so kann ein Kommentar eingefügt werden %/ Tabellen: https://www.cssportal.com/html-table-generator </div> <div> TYPISCHE CSS-BEFEHLE (inline): <div style="font-size:30px; color:red">div-Bereich mit CSS formatiert</div> siehe auch: http://tutorium.drdanielappel.de/Uebersicht_CSS.html </div> Außerdem gibt es die Möglichkeit mit einem CSS-Stylesheet, JavaScript und Variablen zu arbeiten. Die genaue Vorgehensweise finden Sie in den »<a href="https://www.multimediamobile.de/sued-twine" target="_blank">Twine-Materialien</a>« auf unserer Webseite in der Datei »LIES MICH.html« beschrieben. Die weiteren Dateien im Download-Material machen regen Gebrauch von diesen Techniken. </div><br /> ### **Geschichte verfeinern: Medien einbinden** <div class = "block"> Verfeinern Sie Ihre Twine-Geschichte mit Bildern, Tönen und Videos. Legen Sie unbedingt vorher einen Ordner an, in dem Sie die Medien und die exportiere Twine-Geschichte zentral sammeln. <div style="position: relative;z-index: 10;"><img src="https://www.multimediamobile.de/fileadmin/Daten/Dokumente/sued/bilder/twine-projektordner-anlegen.png" class="picturezoom"></div><br> Die Befehle zum Einbinden von Medien in »Twine« lauten: KURZFASSUNG (für das Geschichtsformat »SugarCube 2.x.x«): Bild: <img src="bild_ordner/bild_name.png" alt="Alternativer Text"> Audio: <audio src="audio_ordner/audio_name.mp3" autoplay controls /> Video: <video src="video_ordner/video_name.mp4" autoplay controls>Ersatztext</video> YouTube: Rechtsklick auf das YouTube-Video und Einbettungscode kopieren **Hinweis:** Medien werden in »Twine« nicht angezeigt, wenn Sie die Geschichte in der Software mit »Testen« oder »Spielen« starten. Sie müssen sie zunächst mit dem Dreiecks-Symbol links unten »Als Datei veröffentlichen« und dann die exportierte Datei per Doppelklick in einem Browser starten. <br /> </div> ### **QUELLEN FÜR BILDER, VIDEOS, MUSIK UND GERÄUSCHE:** <div class = "block"> »Twine« kann als reine Text-Anwendung gestaltet werden. Aber natürlich wirkt die Geschichte oft interessanter, wenn man sie mit Bilder, Tönen und Videos aufpeppt. Hier ein paar Downloadquellen:  <details style="background-color: #eeeeee; border: 1px solid grey;"> <summary style="padding: 4px; border: 4px;">Bilder:</summary> <p style="background-color: #dddddd; padding: 4px;"> * http://pixabay.com * https://wordpress.org/photos * www.morguefile.com/archive * http://commons.wikimedia.org * www.freepik.com * www.vecteezy.com * www.freevectors.com * www.dafont.com/de * www.flaticon.com * https://picto.kits.blog * https://thenounproject.com * https://openmoji.org * https://illlustrations.co </p> </details>  <details style="background-color: #eeeeee; border: 1px solid grey;"> <summary style="padding: 4px; border: 4px;">Bilder mit KI-Generatoren erstellen:</summary> <p style="background-color: #dddddd; padding: 4px;"> * https://stablediffusionweb.com * https://deepdreamgenerator.com * https://ideogram.ai * https://playground.com/ * https://perchance.org/ai-text-to-image-generator * https://firefly.adobe.com * https://www.craiyon.com * https://enterpix.app * [https://deepai.org](https://deepai.org/machine-learning-model/text2img) * https://lexica.art/aperture * https://www.mage.space * https://enterpix.app * https://playgroundai.com * [https://huggingface.co/.../ml-mgie](https://huggingface.co/spaces/tsujuifu/ml-mgie) * [https://huggingface.co/.../stable-diffusion](https://huggingface.co/spaces/stabilityai/stable-diffusion) </p> </details>  <details style="background-color: #eeeeee; border: 1px solid grey;"> <summary style="padding: 4px; border: 4px;">Videos:</summary> <p style="background-color: #dddddd; padding: 4px;"> * https://videos.pexels.com * https://invideo.io * https://mixkit.co * https://retroflix.org * https://pixabay.com/de/videos </p> </details>  <details style="background-color: #eeeeee; border: 1px solid grey;"> <summary style="padding: 4px; border: 4px;">Musik</summary> <p style="background-color: #dddddd; padding: 4px;"> * http://dig.ccmixter.org * https://musopen.org * https://filmmusic.io * https://pixabay.com/de/music </p> </details>  <details style="background-color: #eeeeee; border: 1px solid grey;"> <summary style="padding: 4px; border: 4px;">Geräusche:</summary> <p style="background-color: #dddddd; padding: 4px;"> * www.hoerspielbox.de * www.soundalbum.de * https://freesound.org * www.audiyou.de * www.auditorix.de * http://soundbible.com * www.geraeuschesammler.de * https://sound-effects.bbcrewind.co.uk * www.medienpaedagogik-praxis.de/kostenlose-medien * https://pixabay.com/de/sound-effects </p> </details> <br /> **Aber Achtung:** Unbedingt die AGBs bzw. Lizenzbestimmungen auf den Webseiten lesen! Denn »<a href="https://de.wikipedia.org/wiki/Creative_Commons" target="_blank">Creative Commons</a>« oder »kostenfrei« heißt nicht, dass man alles mit dem Material machen darf. Bestimmte CC-Lizenzen erlauben z. B. nur die unveränderte Verwendung einer Datei. Kürzungen oder das Ausschneiden einzelner Passagen wären also nicht erlaubt. Fast immer muss der Namen des/der Künstler:in und der Titel des Stücks/Materials im Abspann genannt werden.  <details style="background-color: #eeeeee; border: 1px solid grey;"> <summary style="padding: 4px; border: 4px;">Urheber- und Nutzungsrechte:</summary> <p style="background-color: #dddddd; padding: 4px;"> * <a href="https://www.youtube.com/watch?v=JVJPH5axlgI" target="_blank">Musik trifft Urheberrecht (YouTube-Video)</a> * <a href="https://www.arminhanisch.de/2018/10/bilder-finden" target="_blank">www.arminhanisch.de</a> * <a href="https://www.playfair.hmtm-hannover.de/uploads/media/Fragenkatalog_UrhG_PDF_04.pdf" target="_blank">www.playfair.hmtm-hannover.de</a> * <a href="https://www.internet-abc.de/lehrkraefte/praxishilfen/urheberrecht-in-der-schule" target="_blank">www.internet-abc.de</a> </p> </details> <br /> </div> ### **Geschichte veröffentlichen:** <div class = "block"> Da es sich bei der exportierten Twine-Geschichte um eine reine HTML-Datei handelt, können Sie zum Beispiel einfach als E-Mail-Anhang verschicken, zum Download auf Ihrer Webseite anbieten oder über Cloudspeicher (dropbox, iServ etc.) verteilen. Alternativ wählen Sie den etwas komplexeren Weg über eine der folgenden Plattformen: * <a href="https://glitch.com/~meintwine" target="_blank">Glitch</a> * <a href="https://youtu.be/ILKmNf0SOII?t=180" target="_blank">Github</a> * <a href="https://itch.io" target="_blank">Itch</a> Falls Sie in Ihrer Geschichte Bilder, Töne oder Videos verwendet haben, müssen Sie diese natürlich in der passenden Ordnerstruktur mitliefern, sonst können sie nicht angezeigt werden. <br /> </div> ### **Weiterführende Links und Videos:** <div style="block"> * <a href="https://www.ict-regelstandards.ch/kompetenzraster/unterrichtseinheit/verzweigte-geschichten" target="_blank">ICT-Regelstandards</a> * <a href="https://www.vcrp.de/digitale-lehre/tools/twine/" target="_blank">Twine – VCRP</a> * <a href="https://www.storiesinderschule.ch/beispiele.html" target="_blank">Stories in der Schule</a> <br /> <div width="100%"> <iframe width="100%" height="538" src="https://www.youtube.com/embed/7NJ1tLAWOfU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <br /> <div width="100%"> <iframe width="100%" height="538" src="https://www.youtube.com/embed/YDUU5yZq4og" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <br /> </div> ### **ALTERNATIVEN ZU »TWINE«:** <div class = "block"> Sie suchen Alternativen zu »Twine«? Dann sehen Sie sich unser Material zum Thema »[Erstellung eines (digitalen) Escape Rooms](https://hackmd.io/@mmm-sued/escape-room)« an. Hier finden Sie eine Einführung in die Webplattform »Genially« und ganz am Ende der Seite eine umfangreiche Auflistung von weiteren Tools fürs Storytelling. Falls Sie lieber in Richtung Informatik gehen möchten, schauen Sie auf unsere Seite zu »[Swift Playground](https://hackmd.io/@mmm-sued/swift-playgrounds)«. Auch hier gibt es am Ende der Seite eine Auflistung, dieses Mal zu diversen Programmier-Werkzeugen. <br /> </div> ### **INTERESSIERT AN EINER KOSTENFREIEN FORTBILDUNG:** <div class = "block"> Sie wollen sich intensiver mit dem Einsatz digitaler Technik im Unterricht beschäftigen? Dann buchen Sie das »<a href="https://www.multimediamobile.de/sued/" target="_blank" title="multimediamobil: Kostenfreie Fortbildungen für Lehrkräfte">multimediamobil</a>«. Wir bieten kostenfreie Fortbildungen zu fast allen Themen rund um Multimedia an. Falls Sie also wissen möchten, wie Sie Bilder, Töne, Videos, Animationen oder das Internet pädagogisch sinnvoll einsetzen können oder was sich mit Computerspielen, 3D-Modelling oder Autorensystemen, Tablets, Apps und interaktiven Tafeln oder künstlicher Intelligenz (KI) im Schulunterricht, Studienseminar, in der Erwachsenenbildung und Jugendarbeit oder im universitären Bereich machen lässt, werden Sie bei uns bestimmt fündig. <br /> </div>  <div style="font-size: 10px;hyphens: auto;text-align:justify;background: rgba(124, 124, 124, 0.3);padding-left:5px;padding-right: 5px;text-align:center"> Verwendung dieser Inhalte & Materialien im Bildungsbereich unter CC-BY-SA-NC 4.0 mit dem Vermerk »<a href="https://www.multimediamobile.de/workshops-sued" target="_blank">© multimediamobil – Region Süd</a>«. </div>