Intermediate Web Literacy II | Storytelling with Scripts | 1. Buttons and Alerts

• 1. Preparation

  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 test your technology and Internet connectivity.

  Come up with an equitable way for your learners to form groups of four.

  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.

• 2. Building Human Machines

  15 minutes

  Welcome your learners and explain that today we'll begin learning how even a basic webpage can connect to styling instructions and code that can make the page interactive, rather than static or unchanging, for its users. We're going to connect a webpage to a CSS stylesheet that tells the page how to look. Then we're going to connect the page to a script that tells the page what to do when we click on a button.

  First, though, we're going to explore this idea of connectedness and interactivity with a game called Human Machines.

  Human Machines is an improv game - a game actors sometimes use to practice performing new ideas right on the spot.

  In Human Machines, each person in a group forms part of the machine and repeats a function - or job - over and over again as part of the way the machine works. For example, a group might make an assembly line of robots that make paper airplanes or sandwiches or the group members might combine to perform something more abstract like a machine that makes dreams.

  We're going to perform a webpage with a button. Here are the rules:

  1. We will form groups of four.
  2. One person will be the user - the person using the computer or webpage.
  3. One person will be the webpage.
  4. One person will be a button on the webpage.
  5. One person will be a piece of code connected to the button that does something.
  6. Group members can only give verbal instructions - you don't need to actually press or click anything.
  7. The user will say something like, "I'm clicking the button to blank," and "blank" will be whatever you want your webpage to do - it can even do something silly. Maybe it sings a song. Maybe it plays a cat video. Maybe it buys you a new pair of kicks.
  8. Then the webpage will tell the button something like, "You've been clicked!"
  9. Then the button will tell the code something like, "Hey! The user wants blank!" Again, change "blank" to be whatever your webpage does.
  10. Then the code will perform doing whatever it is the code does. The person playing the code might sing a song or perform a cat video or box up a new pair of shoes for shipping.
  11. The button will then mimic te code the same action to the webpage, passing along whatever the code did to the webpage. The button connects the code to the webpage.
  12. Then the webpage performs whatever the button did to the user. The webpage connectes the user to the button and code.
  13. Finally, the user celebrates and says something like, "What a great song!", or, "What a cute video!", or, "Aw yes, my shoes are here!"
  14. Each group will perform its machine for the whole group.
  15. Audience members should give a little cheer at the end of each performance.
  
  

  Once each small group has had a chance to perform, bring the whole group back together and facilitate a brief reflective discussion on the activity using questions like these:

  • Can you describe, in your own words, how a user, webpage, button, and code might work together to make something happen on that webpage?
  • What would the web be like if there was no interactivity - if it was only webpages and no stylesheets or pieces of code?
  • What questions do you have about how these kinds of interactions and connections work? What do you wonder about HTML, CSS, and JavaScript or other coding languages?

  Finally, invite learners to gather around your projected computer for an introduction to JavaScript and computational thinking.

• 3. Discovering JavaScript

  10 minutes

  Explain that JavaScript and other coding languages give webpages and other technologies - like video game consoles - instructions about what to do. For example, the "next" button on a webpage goes to the next picture or page. The "up" button on a video game controller makes a character move on-screen. Languages like JavaScript have code that detects when a user clicks a button, as well as code that produces a response.

  Any action that a program takes can be called a "function" - a set of steps that the code executes or makes happen. Inside each function, different things can happen, but usually the function uses a set of "variables" - which are like building blocks - to define what happens next. For example, in a video game, code can keep track of something like your score, health, or inventory and tell the webpage or gaming console how much you have and how to show you that information on-screen through a health bar of inventory tab or something.

  Let's say that we have a function called "keepScore." One variable in that function would be your score while other variables, like the number of coins you collect or enemies you defeat, would trigger the function to update your score as you play.

  Or let's say we have a function that counts the money in our piggy banks. Counting is the function; how much we count or put into the bank at any given time is a variable.

  Functions can use values attached to variables, and can change those values.

  Check out these brief videos to learn more. Consider playing each video 2-3 times since they are short and ask learners to try to pick up something new each time they watch.

  Functions

  
  by Chloe Varelidi

  Variables

  
  by Chloe Varelidi
  
  

  Once you've shared the videos, ask learners what they thought about coding before they saw the videos and what they think now after viewing them. Encourage 3-5 volunteers to share their thinking. You can also ask, "What's a function?", or, "What's a variable?" Then, invite learners to their computers and ask them to load today's project in their broswers.

• 4. Coding a Button and Alert

  15 minutes

  Once learners have loaded the webpage for today's activity, ask them to hit the button on the page a few times to see what it does. This button doesn't do much - it just launches an alert box with a tiny, one-sentence story in it. We're going to remix this page to edit that story and see how parts of the page connect to one another.

  Invite learners to hit the "Remix" button in the upper right-hand corner of the 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.

  The tutorial will take learners through changing the background color of the page on the stylesheet and changing the text in the alert box in the JavaScript file so they can see how parts of the page connect to one another. Encourage students to mess around with the code to see what else they can change or if they can add to the story in the box.

  Look at how the alert command in script.js is part of the function on the page. Above the alert, the variable microstory holds the string - or the exact sentence - that the button calls into the webpage. Our alert takes that vairable in its parentheses and delivers its value - the string or the words in the variable - to the webpage.

  To put it another way: alert is as a method, a command that's built-in to JavaScript. Our alert calls whatever is inside its parentheses into the alert box on the webpage. We've put the microstory variable in the alert box and we've defined that variable just above the alert. In effect, the alert is calling the value of the variable into the alert box on the web page whenever we hit the button. There's a lot of connection-making here!

  Once you've gone through the tutorial, ask learners 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 webpages and read one another's stories. Then ask them to gather together again for a closing conversation.

• 5. Reflection and Assessment

  5 minutes

  Finally, facilitate a brief, reflective discussion about the day's learning using prompts like these - or make your own!

  • In your own words, can you describe how today's webpage worked?
  • How did our human machines activity connect to our Thimble project?
  • How do HTML, CSS, and JavaScript connect?
  • What other examples of interactivity have you seen on other webpages? How do you think those pages work?
  • Was it difficult or easy to begin remixing a Thimble project? How would the activity have been different if you had to start from scratch?
  • What surprised, delighted, or frustrated you about the activity or about HTML, CSS, and JavaScript?
  • What else do you wonder about HTML, CSS, and/or JavaScript?
  • How would you improve this lesson?

  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 Three Buttons