Grade Levels: 3-5, 6-8

This lesson plan, adaptable for grades 4-8, features Creative Coding, a project-based approach to coding that prompts students to show what they know about a topic by using BrainPOP assets. This lesson focuses specifically on the Doodle Augmented Reality (Doodle AR) project in which students bring videos to life by using JavaScript to draw and write on them.  

Lesson Plan Common Core State Standards Alignments

Students will:

  1. Program in JavaScript
  2. Apply knowledge of variables
  3. Explain a point or show what they know
  4. Apply their knowledge of a BrainPOP topic



functions, JavaScript, sequence, strings, variables


Preview the Doodle AR tutorial screencast.  

Preview and play with Doodle AR project. To access, click the Creative Coding button on a BrainPOP topic page. NOTE: You must be logged in with My BrainPOP on individual accounts.

For help getting started and other support resources, such as differentiation and collaboration tips, review the Creative Coding Teaching Resources.

Preview the associated BrainPOP topic movie.

Lesson Procedure:

  1. Tell students that today they will bring a video to life by customizing and personalizing it with drawings, and they will do this by coding. Explain that this coding project is called Doodle Augmented Reality. Ask students to share what they know about augmented reality or what they think it means. After students share, explain that to augment means to add and that augmented reality is the idea of adding to what exists to make it better and interesting.
  2. Display the Doodle AR project for the topic you’re studying on the whiteboard. Read aloud the prompt at the top of the screen. Explain that there is more than one way to respond to the prompt, and that they should be as creative as they can. Point out that they may want to add graphics, text, and/or symbols in order to highlight something important about the topic, add something that may explain an idea from the movie or convey an idea, compare or contrast two or more concepts, clarify steps in a process, etc.
  3. Write the word VARIABLE on the whiteboard. Tell students that a variable is an object that holds data. Explain that variables are useful because they let you call something by name so you can change it later. Share these examples:

    var my_drawing = drawing();

    var message = “Hello BrainPOP!”;

  4. Before beginning their Doodle AR projects, show the related BrainPOP movie on the whiteboard for the whole class to watch.
  5. Working individually or in pairs, have students review the video options in the assets panel on  the lower right. While they’re deciding, distribute the Doodle AR planning sheet.
  6. After selected the video for their project, have students use the planning sheet to sketch out their idea. If working in pairs, suggest that one student be the artist and the other the coder or programmer. Suggest that they may want to make notes on the back side of the sheet about how their drawing will address the prompt. This will help them stay on track when coding.
  7. If necessary, you can model the first few steps of the project on the whiteboard as students follow along at their computers or devices. Drawing with a mouse or trackpad can be frustrating, so suggest that students keep their drawings simple. Circulate as students work, providing support as needed.
  8. After students feel they’ve completed their projects, have them compare their projects with a partner. Have them note how their projects are alike and different.
  9. Once everyone has completed and shared their Doodle AR projects, come together as a class and discuss these questions:

    How can you move your drawing to the right? (my_drawing.x = positive number)

    Give an example of a property the drawing object. (my_drawing.x, my_drawing.color, etc.)

    Take a look at the following code: var my_drawing = drawing("blue", 10);

    What does the first argument of the function do? (It changes the color of the drawing.)

    What does the second argument do? (It changes the line width of the drawing.)

    Does the order of the arguments matter? (Yes! The first argument is for the color and it expects a string. The second is for line width and expects a number.)

Extension Activities:

Invite students to explain the meaning of “there’s more than one way to do it”. Ask how this idea can make programming easier or more challenging.