Intermediate Web Literacy II | Storytelling with Interactive Fiction
45 to 60 minutes
Web Literacy Skills
21st Century Skills
- Code a button and script that work together to tell an interactive story that responds to user input.
- Intermediate web users
- An Internet-connected, projected instructor computer
- Internet-connected computers
- Paper cups or paper
In this lesson, your learners will:
- 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.
- 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.
- Reflect on their learning.
Be sure to read through the lesson so you can familairize yourself with its mark-up and code. Review
input(from our lesson on storytelling with user input), as well as conditionals (from our lesson on storytelling with pictures), as well.
ifstatements, 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 Interactivity20 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
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.
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.
- Invite learners to grab two paper cups each, along with a handful or markers and a pair of scissors. Certainly share as needed.
- 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.
- 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.
- 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.
- Grab the other paper cup. This will be the internal paper cup that tells the story.
- Put the internal cup inside the external cup.
- Trace the external paper cup's window on to the internal cup.
- Turn the internal paper cup to the right until you can't see your first traced window. Trace another window.
- 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.
- Take the internal paper cup out of the external one.
- 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.
- 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.
- 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.
- 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 elsestatements. Ask learners if they can explain how their paper cup stories work using
if elsestatements out loud.
When you think your learners have heard enough explanations of the idea to understand the basics of
if elsestatements 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 Conditionals20 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
Invite a few volunteers to share their thinking with the group.
Inside Thimble, learners can see the code for the webpage itself (
index.html), as well as the CSS stylesheet (
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 Assessment5 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.
5. Optional: Badging
Steps to complete this task:
- Click on “Tutorial”.
- Follow the steps in the tutorial. The tutorial will walk you through how to make changes to the code.
- Once you are finished, you can save your work and share it. Log into your Webmaker account and hit "Publish."
Share a link to your remixed Interactive story and/or upload a screenshot of your creation.
If you successfully complete the above, you will practice the following skills:
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.Back to the →Index