Intermediate Web Literacy II | Storytelling with User Input
30 to 45 minutes
Web Literacy Skills
21st Century Skills
- Code a button and script that work together to gather user input to complete a story.
- Intermediate web users
- An Internet-connected, projected instructor computer
- Internet-connected computers
- Optional: pre-made fill-in-the-blanks story templates
In this lesson, your learners will:
- Write their own fill-in-the-blanks stories.
- Exhange and complete stories with partners.
- Remix the story frame in the same project to create new fill-in-the-blanks stories that use user input.
- Reflect on their learning.
You don't need to be an expert on webforms to teach this lesson. Just be able to explain that forms and inputs let users send information from a webpage to a program or service somewhere else on the web.
Be sure to test your technology and Internet connectivity.
Come up with an equitable way for your learners to form pairs.
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.
Print a class set of fill-in-the-blanks story templates (a.k.a Mad Libs) or come up with instructions for learners to make their own stories to complete with partners.
2. Storytelling with Fill-in-the-Blanks Templates15 minutes
Welcome your learners and share that today we're going to code stories that allow for user input. When we provide "user input," we do things like type words into forms on a webpage. We'll use two HTML elements today,
input. This will look an awful lot like fill-in-the-blanks stories which are popularly known as Mad Libs. You can see several brief examples here.
An example of a fill-in-the-blanks story, CC-BY Jenna
Let's try completing our own fill-in-the-blanks stories with input from classmates.
- Ask learners to form pairs.
- Distribute fill-in-the-blanks story templates if learners are going to complete stories you've already prepared. Otherwise, pass out blank paper or invite learners to use a computer or recording device for composing.
- If you distributed templates, have learners ask one another for input to fill in the blanks. If you distributed blank paper, give learners 5-8 minutes to write their own short fill-in-the-blanks stories and then to ask their partners for input to complete those stories. Remind learners of community norms in writing and responding to avoid hurtful and offensive stories!
- Let learners take a few minutes more to share their completed stories with their partners.
- Invite 2-3 volunteers to shate especially funny or cool stories with the class.
After learners have had the chance to share, facilitate a brief discussion using questions like these:
- How is collaborating on a story like this different from writing one yourself?
- How do you imagine "blanks" in stories like this work on a computer? How can you imagine coding something like this?
- Why are stories like this funny? How can you imagine capturing a similar mood and sense of humor through code?
After the discussion, ask learners to take their seats at their computers and to load today's project in their browsers.
3. Rewriting Stories and Prompts for User Input15 minutes
First, have learners fill in the blanks themselves and hit the button on the page several times to see what's happening on the page. Ask a few learners what they notice about the page and how they think it works before moving on to the rest of the lesson.
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.
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 to test their forms and inputs stories. Then ask them to gather together again to 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.
- In your own words, how do the
inputelements work with buttons and scripts?
- How else could people use webforms?
- What are some privacy, safety, and security concerns you could imagine having with forms that send information online?
- What are some similarities and differences between this lesson and our previous ones?
- How can creativity and humor show up in code?
- How would this lesson have been different if you had to write it from scratch instead of remixing it?
- What seemed easiest about today's work? Most difficult? Why?
- 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.Next activity→Storytelling with Color
- In your own words, how do the
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 input sheet and/or upload a screenshot of your creation!
If you successfully complete the above, you will practice the following skills:
- Problem solving
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.Next activity→Storytelling with Color