Vidcode: Deal With It

Educator Resources

60 minutes

JavaScript

STUDENTS: START YOUR HOUR OF CODE TUTORIAL HERE

The Activity

Start coding for good by creating animations featuring notable women leaders and quotes that express their point of view. Explore leadership, power and strength of conviction by repurposing the popular "deal with it" meme.

Big Idea: Animation requires setting up a scene, then making it change over time!

  • CSTA 1B-AP-09 Create programs that use variables to store and modify data.

    CSTA 1B-AP-10 Create programs that include sequences, events, loops, and conditionals.

    CSTA 1B-AP-15 Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended.

    CSTA 1B-IC-21 Use public domain or creative commons media, and refrain from copying or using material created by others without permission.

    CSTA 1B-IC-18 Discuss computing technologies that have changed the world, and express how those technologies influence, and are influenced by, cultural practices.

Lesson Plan

Time: 45-60 minutes

1 hour:

  • 10 minutes background

  • 20-35 minutes coding

  • 10 minutes sharing

  • 10 minutes reflection

Background (10 minutes)

Animation has three core components: an initial state, a final state, and an algorithm that controls the changes between them. In this lesson, students will experience the basic workflow of creating objects, setting their properties, changing them over time using a loop, and controlling when they stop using a conditional.

Code Challenge (20-35 minutes)

Show the example project. Challenge the class to create a simple animated meme based on their own research. Direct students to the WHM tutorial. They should go through the instructions in pairs using the sample images. Not everyone will complete the tutorial, but each pair should have something to reflect on.

Extension

Invite students to complete the tutorial again with their own images. Search for Creative Commons licensed images using the "Usage Rights" option in Google Images, or use photosforclass.com.

  • Add a multi-line quote that doesn't animate (use multiple text blocks).

  • Experiment with different fonts by consulting the Reference tab.

  • Make an animation that changes two properties at once, like x and y, or y and rotation.

  • Research the origin of "Nevertheless, she persisted" and make a meme about what you learned.

Sharing (10 minutes)

Be Prepared to share what you created and share/explain how it worked.

Reflection (10 minutes)

Set up each computer with a published project and have a gallery walk.

  • What things did other students create that you'd like to know how to do?

  • What things did you create that you are proud of figuring out?

  • Does order matter when you're writing code?

  • What did every project have in common? What was different?

  • What properties did each team decide to change?

  • Why do memes make it easy to remember things? Why are some memes more popular than others?

Sign up to our Hour of Code Newsletter for additional resources and updates!