Intermediate Web Literacy II | Storytelling with Pictures
45 to 60 minutes
Web Literacy Skills
21st Century Skills
- Code a button and script that work together to tell a story through three sequential pictures.
- Intermediate web users
- An Internet-connected, projected instructor computer
- Internet-connected computers
- A storyboarding template like this one (contributed to the public domain by Tomas Mitkus).
In this lesson, your learners will:
- Create human storytelling machines in which each person in a line tells the next part of the same story through movements.
- Storyboard three-panel comics using printed copies of a template like this.
- Use Creative Commons Search to find online images that reflect their storyboards.
- Learn about
- Remix this Thimble project to replace the images in its comic with the images they searched for online.
- Reflect on their learning.
Be sure to read through the lesson to familairize yourself with
ifstatement looks for that condition and reacts to it.
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 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.
2. Setting the Tableau15 minutes
Once you've welcomed your learners, 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:
- Form groups of three with one learner playing the beginning of the story, another learner playing the middle, and the last learner playing the end of the story.
- 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 learners plays someone stirring a pot; the second learner ladles food from the pot on to a plate; the last learner eats the food. Each learner plays the same character, but does something different to show the beginning, middle, and end of the story.
- Each learner should begin facing right.
- Each learner should then turn to the left as they perform their part of the story.
- When the previous learner faces to their left, the next learner begins their performance, also moving from right to left.
- This right-to-left motion is meant to reflect how an
ifstatement works - if the last learner is facing right, don't perform. If there is no last learner (like at the beginning) or if the last learner is facing left, then perform.
- At the end of the story, the group should "reset" and all group members should face right again.
- Give groups 5 minutes to come up with a story and to rehearse it incorporating the right-to-left motion.
- Take another five minutes or so for each group to perform.
Encourage classmates to applaud one another's work. After the last performance, ask learners, "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 learners to take their seats at their computers and to open today's project in their broswers.
3. Storyboarding Your Script15 minutes
Give learners 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
ifkinds of statements that might explain what's going on here?
Tell learners 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 learners about 10 minutes to sketch and describe the three images they want to find for their stories. Each learner 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 learners who aren't finished storyboarding can put their templates aside and work on them later.
ifStatements to Tell a Story15 minutes
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.
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 learners 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 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
- How else could people use
ifstatements 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
ifstatements 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 activity→Storytelling with User Input
- In your own words, how do
6. 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 new story and/or upload a screenshot of your creation.
If you successfully complete the above, you will practice the following skills:
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 User Input