Intermediate Web Literacy II | Storytelling with Scripts | 4. Storytelling with Pictures

• 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 read through the lesson to familairize yourself with if statements. Statements like these are called "conditionals" in JavaScript because they set up statements or commands that happen when a certain condition is met on the webpage. The if statement looks for that condition and reacts to it.

  You don't need to be a JavaScript expert for this lesson. Just be able to explain that conditionals can check to see what's happening on a webpage and then make different things happen under different conditions.

  Be sure to test your technology and Internet connectivity.

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

  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. Setting the Tableau

  15 minutes

  Once you've welcomed your students, explain that today we'll use pictures to tell our stories. We're each going to use three pictures to show the beginning, middle, and end of a story. Today our script will use logic to figure out which picture to show next and when to restart the story.

  To get the hang of that idea, we're going to perform three-part stories in groups of three using an activity called "Setting the Tableau." Tableau is another word for scene. Here is how to play:

  1. Form groups of three with one student playing the beginning of the story, another student playing the middle, and the last student playing the end of the story.
  2. Each group comes up with an idea for a three-part story they can tell by performing the same character at three different moments of time. For example, the first students plays someone stirring a pot; the second student ladles food from the pot on to a plate; the last student eats the food. Each student plays the same character, but does something different to show the beginning, middle, and end of the story.
  3. Each student should begin facing right.
  4. Each student should then turn to the left as they perform their part of the story.
  5. When the previous student faces to their left, the next student begins their performance, also moving from right to left.
  6. This right-to-left motion is meant to reflect how an if statement works - if the last student is facing right, don't perform. If there is no last student (like at the beginning) or if the last student is facing left, then perform.
  7. At the end of the story, the group should "reset" and all group members should face right again.
  8. Give groups 5 minutes to come up with a story and to rehearse it incorporating the right-to-left motion.
  9. Take another five minutes or so for each group to perform.

  Encourage classmates to applaud one another's work. After the last performance, ask students, "What condition had to be met for you to perform? How did you know when to start your part of the story?"

  After facilitating a few volunteers' responses to those questions, ask students to take their seats at their computers and to open today's project in their broswers.

• 3. Storyboarding Your Script

  15 minutes

  Give students a few minutes to click through the story on today's project page. Ask them how they think the page works? How does it know which picture to show next? Can they think of if kinds of statements that might explain what's going on here?

  Tell students that we'll look inside the project and begin coding our own stories in a few minutes. First though, we'll plan the stories that we want to tell using a simple storyboarding template. Our storyboards don't need to be fancy; we can use stick figures. The big idea is just to figure out what kinds of pictures we should search for later on to tell our own stories. If we decide on our stories now, we'll save time searching for images later.

  Hand out copies of the storyboarding template you want to use and give students about 10 minutes to sketch and describe the three images they want to find for their stories. Each student should finish with a drawing and description of the beginning, middle, and end of their story. Here is an example template:

  
  Image credit public domain by Tomas Mitkus

  After ten minutes, ask the group to turn its attention towards the project's code and explain that students who aren't finished storyboarding can put their templates aside and work on them later.

• 4. Using if Statements to Tell a Story

  15 minutes

  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 searching for their images and swapping them into the JavaScript code included in the project.

  You can also use this external tutorial about finding openly shared images online or this external image search resource.

  Syntax and punctuation will be especially important today, so help students place their brackets, 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 webpages and read one another's stories. Then ask them to gather together again to debrief on the lesson.

• 5. 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 if statements work?
  • How else could people use if statements on a webpage or, say, in a game or in a robot's brain?
  • Can you think of a time in real life when you used if statements in your head?
  • What are some similarities and differences between this lesson and our previous ones?
  • What's your favorite way to tell a story? Through words? Pictures? Both? Something else?
  • 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 User Input