Vidcode: Deal With It

Vidcode Educator Resourse

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.

Standards

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

  • 5 minutes reflection

  • (10-20 minutes extended reflection)

Background

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

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.

Reflection

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

  • 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?

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.

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