ENTA_5

Welcome to the 5(text-style:"superscript")[th] workshop of the European Network for Teaching Arabic (ENTA): ''Connected Learning Across Settings: Relational Learning and Digital Storytelling'' held in conjunction with the International Conference on Arabic Language and Linguistics. I am interested in: * [[Relational Learning PPT and handouts|Relational Learning]] * [[Project-Based Digital Storytelling PPT and handouts|PBDST]] * [[Non-Linear digital storytelling for differentiated instruction interactive tutorial|Twine Tutorial]] (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

(align:"=><=")+(box:"===XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX============")[''Non-Linear Learning Paths Dr. Hossam Ahmed, Leiden University''] In this section, we explore how our students can create parts of a non-linear narrative using Twine to cater for different levels and interests. Workshop PPT Workshop hands-on walkthrough: * [[What's Twine anyway, and why should I care?|introduction]] * [[I am a complete beginner, I want to create text-only stories|Too soon]] * [[I have seen HTML before, I want to add some features like external links and pictures|Too soon]] * [[I want to incorporate more skills by embedding YouTube videos|Too soon]](enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

(align:"=><=")+(box:"===XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX============")[''Beginning with Twine''] In this step we will create a short Twine story from scratch, save it to disk, and export it to a web page. * ''Start Twine: ''Go to <a href="https://twinery.org/" target="_blank" > https://twinery.org </a> and click "Use in browser. * Under "Story", click "New." Call your story "Three little pigs." Until you save or export the story to file, it is'' saved in the browser cash''. If you open twinery.org on another computer or another browser, you will ''not ''be able to locate this story. The basic storyline is that the pigs will build houses in differnt materials, leading to different outcomes. * ''Create a story: ''Twine creates a grid with an empty storyboard. Click a box (passage) to enter its title and text. Each passage is identified by its title. Double click on the first passage, and write the first part of the story. Click "Test From Here" to preview how this page will look like for the user. <iframe width="560" height="315" src="https://www.youtube.com/embed/iOXzYu9v3D8?si=qm-cB8-TNw-uZcS-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> * ''Expand and branch the story: ''Placing some text in double square brackets creates a link to a new slide whose title is that text(e.g. `[[target passage title]]`). Create three possible paths for the continuation of the story by placing each type of house the little pigs can build: straw, sticks, bricks. <iframe width="560" height="315" src="https://www.youtube.com/embed/WGdMfBufq3Q?si=3cARzB7i-obrCUEo&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> It is your turn! complete the story where the BBW beats the weak houses, and the happy ending only when the TLPs build the sturdy stone house. you can find a possible solution [[here|basic suggestion]]. Notice that I use the pipe character | to show a text different from the title of the target slide. ''Save and share the story: '' In the top menu of Twine, click Build to open a submenu with options to "Publish to File" or "Export As Twee." When you Publish to File, the file published is a web page (.html) that can be shared and opened in any web browser. It ''cannot'' be edited. To share and edit the story on other computers or browsers, use the Export As Twee option. Load the .twee file from the homepage of Twine, Library menu, and import. Try it for yourself: Download the Adel and Sanaa story from <a href="https://raw.githubusercontent.com/hdahmed/enta5/main/enta5_two_heros.twee" download="two_heros.twee" >here</a> , and import to to your Twine. You are now ready for the [[next step|intermediate setup]]. (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

<a href="https://twinery.org/" target="_blank">Twine</a> is a simple tool for creating digital stories and publishing them as web pages, utilizing branching nature of the web to facilitate non-linear narratives. * On the backend, it helps visualize how the plotline of a story branches or loops. The final product is an interactive story where the user chooses which direction the events go. * <a href="http://enta.network/wp-content/uploads/2023/12/ENTA5.html" target="_blank">Here</a> is an example of an interactive story created with Twine. Take a minute to follow Adel's journey finding a spouse. Think of how this story can be used in a teaching situation (see [[some suggestions|suggestions]]). * Creating a project using Twine does not require installation (optional). Creating simple text stories does not need experience with web authoring. Some experience with HTML or Javascript can help creating more complex scenarios. [[Get started with Twine|basic setup]] (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

Embedding YouTube videos or music Now that we are comfortable with the concept of embedding pictures in a story, we can move to videos. Embedding a video is more complex than using the `<img>` tage in a passage. Ironically, it is easier for a novice user because YouTube provides the code to use. In Sanaa's thread of the story, we would like to embed a video from the more modern sitcome عايزة اتجوز. It can be used for culture, comprehension, or otherwise. * ''Identify a video to embed:'' for our purposes, we will use <a href="https://youtu.be/ZT31_Kyb-D0?feature=shared" target="_blank">episode 12</a>, where she is proposed to by a psychologist who is interested in her as a research subject for his thesis. * ''Embed the video:'' from the Share button under the video, choose Embed and select the settings you like, then click Copy in the corner of the popup menu. Paste the code in your Twine passage to embed the video. The code below embeds the youtube video starting minute 34:50 `<iframe width="560" height="315" src="https://www.youtube.com/embed/ZT31_Kyb-D0?si=FwAHLOxKjaMl1jaG&controls=0&start=2090" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>` Feel free to experiment with the content of the code. For example, you can change the size of the video by changing the values for width and height. <iframe width="560" height="315" src="https://www.youtube.com/embed/ZT31_Kyb-D0?si=FwAHLOxKjaMl1jaG&controls=0&start=2090" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> * ''YouTube only? ''No! follow the same steps with any website that allows embedding its media. Soundcloud allows embedding music or other tracks if the owner of the media allows so. Example1 from from Kallimni ‘Arabi Mazboot: <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/938746078&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/aucpress" title="AUC Press" target="_blank" style="color: #cccccc; text-decoration: none;">AUC Press</a> · <a href="https://soundcloud.com/aucpress/kallimni-arabi-782705147" title="Kallimni ‘Arabi Mazboot - Book 4 - Module 08 - Track 01" target="_blank" style="color: #cccccc; text-decoration: none;">Kallimni ‘Arabi Mazboot - Book 4 - Module 08 - Track 01</a></div> and example 2 for autoplaying soundcloud background music: <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/212475169&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=false"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/relaxing-music-production" title="RELAXING MUSIC 😊 (Piano - Sleep - Study - Yoga)" target="_blank" style="color: #cccccc; text-decoration: none;">RELAXING MUSIC 😊 (Piano - Sleep - Study - Yoga)</a> · <a href="https://soundcloud.com/relaxing-music-production/sets/playlist-of-relaxing-soft" title="Relaxing Piano Music to Sleep, Study, Yoga, Meditation, Chill, Zen, Instrumental, Calm, Soft" target="_blank" style="color: #cccccc; text-decoration: none;">Relaxing Piano Music to Sleep, Study, Yoga, Meditation, Chill, Zen, Instrumental, Calm, Soft</a></div> The code I copied for Kallimni Arabic is : `<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/938746078&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/aucpress" title="AUC Press" target="_blank" style="color: #cccccc; text-decoration: none;">AUC Press</a> · <a href="https://soundcloud.com/aucpress/kallimni-arabi-782705147" title="Kallimni ‘Arabi Mazboot - Book 4 - Module 08 - Track 01" target="_blank" style="color: #cccccc; text-decoration: none;">Kallimni ‘Arabi Mazboot - Book 4 - Module 08 - Track 01</a></div>` You have now completed a brief introduction to the technical aspects of Twine. You can find out more about [[additional resources]] or [[pedagogical implications]] (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

''(align:"=><=")+(box:"XXX=")[Relational Learning Dr. Letizia Lombezzi, University of Sienna]'' Relational Learning allows students and teachers/professors to enter a dialogue about learning, so that they learn from each other, share ideas and together create the learning/teaching experience. For the PowerPoint <a href="http://enta.network/wp-content/uploads/2023/12/Connected-Learning.pptx">click here</a> (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

(align:"=><=")+(box:"XXXXXXX===")[''Digital Storytelling Mr. Zehad Sabry, University of Oslo ''] Telling stories using digital media, including webpages, songs, online games, or VR/AR (Nikki Zhi Li Lim et. al., 2002. * PowerPoint <a href="http://enta.network/wp-content/uploads/2023/12/DST.pptx"> presentation</a> * Handout: <a href="http://enta.network/wp-content/uploads/2023/12/DST.pptx">Crafting compleling digital stories</a> * Handout: <a href="http://enta.network/wp-content/uploads/2023/12/DST-Hands-on-.docx">DST Hands on</a> (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

The story itself (the product) can be used in teaching language and culture, as well as the Twine structure (process). The story itself can be used for: * narration(!) - students tell the story thread that they choose to follow. * describing people - students write a description of potential spouses. * listening/reading - students read or watch watch a scene (e.g. proposal) and answer comprehension questions. Culture: * compare perceptions of marriage in the 1980s and 2000s. * discuss men and women expectations of marriage/partner in Middle Eastern societies. (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

(align:"=><=")+(box:"X=")[''External links and pictures''] Now that we are familiar with creating a text-based non-linear story, we can move on to embed more content in our stories. If you have not already, make sure you have the basics covered in [[the first part|basic setup]] and downloaded <a href="https://raw.githubusercontent.com/hdahmed/enta5/main/enta5_two_heros.twee" download="two_heros.twee" >Adel and Sanaa story twee file</a>. * ''Evaluate the story: ''In your group, discuss some of the shortcomings of Adel's story given what you have learnt in [[Zehad's presenation about compelling digital stories|PBDST]]. Outline a 5-passage story for Sanaa that avoids these shortcomings. They should vary in level between Intermediate Low and Advanced Mid, and targets different aspects of TAFL (reading, writing, listening, culture). * ''Embed an external link:'' the passage editor in Twine is also an html parser. To include a link that points somewhere outside the story, write the html code for a hyperlink: `<a href="http://enta.network/wp-content/uploads/2023/12/ENTA5.html"</a>` * ''Embed images:'' Twine only supports text. The only workaround to show images in a Twine story is to embed them using html. Examine the passage with Adel's picture. It is embedded using the following code: `<img src="https://mediaaws.almasryalyoum.com/news/large/2023/10/25/2231677_0.jpg">` and it displays as: <img src="https://mediaaws.almasryalyoum.com/news/large/2023/10/25/2231677_0.jpg"> You can replace the url for this picture with the url of another picture from the web (or a picture you have uploaded to a web location) * ''Resize image: ''The image above is too large. You can change the size of the embedded image by specifying the width and height in the html tag: `<img src="https://mediaaws.almasryalyoum.com/news/large/2023/10/25/2231677_0.jpg" width=150 height=150>` which displays as <img src="https://mediaaws.almasryalyoum.com/news/large/2023/10/25/2231677_0.jpg" width=150 height=150> Now try for yourself. Change Sanaa's picture. * ''Support Arabic:'' Notice that our story has a text direction Right-to-Left. To set it this way, under the "Story" menu, check "JavaScript". it contains the line `$(document.documentElement).attr('dir', 'rtl');` . This line tells the browswer to make all the passages follow the Arabic language direction. Now that you can embed external content (links and images) and change their properties, you are ready to [[embed youtube videos|AV embedding]]. (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

You should first complete the steps leading to this step ;) (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

(align:"=><=")+(box:"X=")[''Additional Resources''] In this short workshop we only scratch the surface on using Twine. It is a very powerful tool. It builds on HTML for non-linear content, which we have explored today. It also enables users to utilize JavaScript for programming-like functionality (including variables, flow-control decision making), and CSS for visual representation. Those interested in delving deepers can refer to some resources: * <a href="https://twinery.org/cookbook/starting/twine2/firststory.html" target="_blank">The Twine cookbook</a> offers a getting started guide, followed by more advanced walkthroughs, as well as tips on possible locations to publish projects. * <a href="https://itch.io/games/tag-twine" target="_blank">itch.io</a> is a popular hosting site for many interactive games, including Twine-based games. ** <a href="https://thaisa.itch.io/rainy-day" target="_blank">Rainy Day</a> is an example of using advanced visual effects in a non-linear story. ** <a href="https://laburatory.itch.io/nanopesos" target="_blank">Nanopesos</a> is an example of how interactive stories can be used to tackle social issues, but showing the decisions faced everyday by low-income workers. Acknowledgement: Thanks to Amanda Viveiros from the University of Sao Paulo and Leiden University for sharing insights, ideas, and examples, many of them incorporated here. [[End of workshop|The end]] (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

Pedagogical implications * Twine is a web-authoring tool, stories themselves are nothing new. It's true pedagogical power lies in visualizing the path of a non-linear story: <img src="http://enta.network/wp-content/uploads/2023/12/enta5_story_flow.png"> The image above shows the flow of this tutorial. What does that mean in a teaching context? It means that students creating their own Digital Stories can potentially render better results than consuming teacher-created content. 1. Create skeleton of a non-linear story as a class activity, students populate individual passages. 2. Assign different LOs to different Passage for truely differentiated instruction. 3. Utilize different plot types (linear, branching, circular) to control amount of practice in mixed-level classes. 4. Allow students to improve their Digital Skills through exploring the tool for more "cool" options. Teacher Yield Control :) [[End of workshop|The end]] (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))

The End It is a pleasure meeting you in Cairo, and we look forward to seeing you in ENTA-6 later in 2024. We would love to hear from you if you have used Relational Learning, Digital Storytelling, or Twine. <a href="http://enta.network/" target="_blank" > ENTA </a> <a href="https://www.universiteitleiden.nl/en/staffmembers/hossam-ahmed" target="_blank" > Hossam </a> <a href="https://www.dispoc.unisi.it/it/dipartimento/persone/docenti-contratto/letizia-lombezzi" target="_blank" > Letizia </a> <a href="https://ahc.leeds.ac.uk/languages/staff/891/dr-ruba-khamam" target="_blank" > Ruba </a> <a href="https://www.hf.uio.no/ikos/english/people/aca/middle-east-studies/tenured/zszehad/" target="_blank" > Zehad </a> [[Restart The workshop|home]] (enchant:?page,(text-colour:#343a40)+(bg:#e3fafc))