Intermediate Web Literacy II | Storytelling with User Input

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Write their own fill-in-the-blanks stories.
  2. Exhange and complete stories with partners.
  3. Learn how the JavaScript function in this Thimble project can take user inout from a webpage to tell a story.
  4. Remix the story frame in the same project to create new fill-in-the-blanks stories that use user input.
  5. 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 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 the form and input elements of a webpage. These fields let users submit information to scripts and databases from webpages.

  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 Templates

  15 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, form and 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.

  1. Ask learners to form pairs.
  2. 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.
  3. 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!
  4. Let learners take a few minutes more to share their completed stories with their partners.
  5. 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 Input

  15 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.

  Then 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 building their own forms, inputs, and stories using HTML and JavaScript.

  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 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.

  • In your own words, how do the form and input elements 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

• 5. Optional: Badging

  You will learn how to use HTML, CSS, and JavaScript to turn user input into a brand new story on a webpage while learning how to compose.

  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 input sheet 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
  • 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.

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

  Next activity→Storytelling with Color