Intermediate Web Literacy II | Storytelling with Interactive Fiction

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Paper prototype an interactive story that uses nested paper cups with windows cut out of them to display different parts of a story based on decisions users make about how to twist and turn the cups.
  2. Learn the meaning of "conditional statements" in JavaScript.
  3. Remix this Thimble project that returns different parts of a story depending on the input a user gives in response to a choice they are asked to make.
  4. Reflect on their learning.

  ---

  You should...

  Work through today's activity to get a feel for how each of its parts - the HTML, CSS, and JavaScript - looks and for how those parts work together. Review this lesson plan, as well, to make sure you're comfortable facilitating it.

  Be sure to read through the lesson so you can familairize yourself with its mark-up and code. Review form and input (from our lesson on storytelling with user input), as well as conditionals (from our lesson on storytelling with pictures), as well.

  You don't need to be an expert on JavaScript to teach this lesson. Just be able to explain that we can use conditional statements, like if statements, to display new parts of a story in response to user input. For example, if a user types "left" into an input, we can write a code that displays the part of a story that happens when a character turns left.

  Be sure to test your technology and Internet connectivity.

  Have somewhere highly visible that you can list web addresses.

  Prepare the paper cups (or plain paper) and markers you'll use for paper protoyping during today's lesson.

  Create a class account or several accounts for learners to use on Thimble, Mozilla's online code editor, and post the URL, or a shortened link, for today's project somewhere highly visible in the learning space.

• 2. Paper Prototyping for Interactivity

  20 minutes

  Welcome your learners and explain that today we'll be creating interactive stories that display different chapters, so to speak, depending on user input. For example, if we wrote a story in which we asked our user to choose a salad or sandwich for lunch, the next part of the story would match whether or not our user typed in "salad" or "sandwich" in the input field on our webpage.

  Today's lesson will combine work we've done in the past, connecting the form and input HTML elements we used in our fill-in-the-blanks stories with the JavaScript conditional statements, like if else, from our storytelling with pictures project.

  To think through how we might structure our stories, we're going to paper prototype some interactive fiction using markers and paper cups.

  Paper prototyping is a design practice people use to quickly and cheaply test out the ideas for the interface and behavior of apps, devices, and webpages. When you paper prototype, you use paper to model how a piece of technology will look and act from a user's perspective.

  Note: you can use paper instead of paper cups for this lesson. Adapt the instructions below if you do so. Essentially, everything will be the same, but the story will be flat instead of moving across the surface of a cylinder.

  Let's check out this video to get an idea of what we're after today. Thanks and credit go to user shin shinrashinge for the idea!

  We're going to make a version of this project that uses two paper cups. We'll use the outside paper cup as an interface, and we'll use the inside paper cup to tell our story using three panels - a central panel that shows some kind of decision to be made, and two outcome panels - one to the left and one to the right - that show what happens after our user makes their choice.

  Let's tackle this project step-by-step. If you already get how to do this, move ahead at your own pace and then help other classmates finish.

  1. Invite learners to grab two paper cups each, along with a handful or markers and a pair of scissors. Certainly share as needed.
  2. Take one paper cup and use it as the external interface for the story. To do so, cut out a window in one side of the cup. The window should take up no more than a quarter of the cup. Younger web literacy learners should get adult help with this step. All learners should be careful with the scissors.
  3. Draw a right-facing arrow to the right of the window on the external paper cup. This is a paper-prototyped interface button for selecting the choice to the right in this story.
  4. Draw a left-facing arrow to the left of the window on the external paper cup. This is a paper-prototpyed interface button for selecing the choice to the left in this story.
  5. Grab the other paper cup. This will be the internal paper cup that tells the story.
  6. Put the internal cup inside the external cup.
  7. Trace the external paper cup's window on to the internal cup.
  8. Turn the internal paper cup to the right until you can't see your first traced window. Trace another window.
  9. Turn the internal paper cup back to the left until you go past the first window again and can no longer see it. Trace a third window on to the internal paper cup.
  10. Take the internal paper cup out of the external one.
  11. In the middle panel or window on the internal paper cup, draw a scene that presents your user with a choice - like a choice between two foods or paths. You can use stick figures or any other kinds of drawing you want, and you can certainly help others or get help as needed.
  12. Move on to the panel or window on the right of your internal paper cup. Make a drawing there that shows what happens if your user makes the decision to the right in your story.
  13. Then move on to the panel or window on the left of your internal paper cup. Make a drawing there that shows what happens if your user makes the decision to the left in your story.
  14. Finally, put the internal paper cup back inside the external paper cup and move around the room sharing your story with others. When a user "clicks" one of the buttons on the external paper cup of your project, turn the internal paper cup to show them what happens next.
  
  

  After everyone has had a chance to complete and share a story, bring everyone together and hold a brief reflective conversation about how this project might connect to interactive storytelling online with if else statements. Ask learners if they can explain how their paper cup stories work using if else statements out loud.

  When you think your learners have heard enough explanations of the idea to understand the basics of if else statements and how they can add interactivity to a story or webpage, ask them to take their seats and to load today's project in their browsers.

• 3. Coding Interactivity with Conditionals

  20 minutes

  After learners have loaded today's project in their browsers, ask them to "play" through the short story on the page several times to see how it works.

  Ask learners to think about the page in terms of conditionals. How do they think the page is responding each time a user types something into an input?

  Invite a few volunteers to share their thinking with the group.

  After hearing from a few learners, ask learners to hit the "Remix" button in the upper right-hand corner of today's activity page. This will take them into Thimble, Mozilla's online code editor.

  Inside Thimble, learners can see the code for the webpage itself (index.html), as well as the CSS stylesheet (style.css) and JavaScript code (script.js) for the page. Those files are accessible in the left-hand FILES sidebar and can be edited in the central column of the page. A preview of what the webpage will look like when published is over on the right.

  At this point, ask learners to log-in to Thimble using their accounts or a class account you provide.

  Notice that the preview pane also has a "Tutorial" tab above it. Click on this tab to show learners the tutorial and then work through it with the group, inviting learners who feel comfortable doing so to work ahead.

  This tutorial will take learners through revising the text and conditionals in an interactive story.

  Syntax and punctuation will be especially important today, so help learners place their semi-colons and quotation marks when they have trouble.

  Once you and your learners have gone through the tutorial, ask them to hit "Publish" in the upper-right hand corner of the screen. This will give them a URL they can use to visit their own versions of this page and they can share the URL with friends and family, as well.

  Give learners a few minutes to visit each other's computers and play through each other's stories.

  Finally, ask learners to gather and debrief on the lesson.

• 4. Reflection and Assessment

  5 minutes

  At the end of the lesson, use questions like these (or make your own!) to facilitate a brief, reflective discussion of the day's work.

  • Can you explain, in your own words, how conditionals can work with user input to change a webpage?
  • When do you think someone would use conditionals in another way online?
  • When do we use conditonals in real life? How do they help us make sense of our worlds?
  • What seemed easiest about today's work? Most difficult?
  • How would this project have been different if you had to start from scratch instead of remixing someone's work?
  • How would you improve this lesson or project?

  You can record learners' responses for the purpose of assessment, as well, but be sure to do so in a way that doesn't disadvantage those who struggle with composing in any particular medium. For example, be ready to record spoken answers, as well as to read typed or written responses.

  If you and your learners are ready for more JavaScript, check out this introductory module from the Mozilla Developer Network (MDN). You can also find JavaScript First Steps and the Silly Story Generator at the MDN Learning Area, as well.

  Back to the →Index
  
  
  

• 5. Optional: Badging

  You will learn how HTML, CSS, and JavaScript connect to one another by creating an interactive story that responds to user input while learning to synthesize, code, compose, and remix.

  Steps to complete this task:

  1. Go to this Thimble project and click the "Remix" button. This will open Thimble, a tool that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript. You will see web stickers we have created to get you started.
  2. Click on “Tutorial”.
  3. Follow the steps in the tutorial. The tutorial will walk you through how to make changes to the code.
  4. Once you are finished, you can save your work and share it. Log into your Webmaker account and hit "Publish."

  Evidence:

  Share a link to your remixed Interactive story and/or upload a screenshot of your creation.

  21st Century Skills:

  If you successfully complete the above, you will practice the following skills:

  • Communication
  • Creativity

  The skills that you have learned through this activity can be recognized and validated by earning credentials or badges.

  Through a partnership with the Open Badges Academy (OBA), you can earn over 15 Web Literacy and 21st Century Skills credentials or badges. Once you earn them, you can share the credentials/badges via your social media or resume or use them to connect with others.

  If you are interested in applying for badges, visit the OBA and/or reach out to Matt Rogers or DigitalMe to schedule a demonstration.

  Back to the →Index