Intermediate Web Literacy II | Storytelling with Scripts | 5. Storytelling with User Input

• 1. Preparation

  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 students 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 students to form pairs.
  2. Distribute fill-in-the-blanks story templates if students are going to complete stories you've already prepared. Otherwise, pass out blank paper or invite students to use a computer or recording device for composing.
  3. If you distributed templates, have students ask one another for input to fill in the blanks. If you distributed blank paper, give students 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 students of community norms in writing and responding to avoid hurtful and offensive stories!
  4. Let students 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 students 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 students 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 students 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 students 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 students 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 students 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 --> Storytelling with Color