Lesson 14: Project – Interactive Card

Game Lab | Project


In this cumulative project for Chapter 1, students plan for and develop an interactive greeting card using all of the programming techniques they’ve learned to this point.


This end of chapter assessment is a good place for students to bring together all the pieces they have learned (drawing, variables, sprites, images, conditionals, user input) in one place. Students should still be working with code that is easily readable and doesn’t involve very many high level abstractions. Giving students the opportunity to really be creative after learning all these new concepts will help to engage them further as we head into Chapter 2.


Students will be able to:

  • Use conditionals to react to keyboard input or changes in variables / properties
  • Sequence commands to draw in the proper order
  • Apply an iterator pattern to variables or properties in a loop

Warm Up (10 min)

Demo Project Exemplars (Level 2)

Goal: Students see an example of a final project and discuss the different elements that went into making it.

Display: On the projector, run the exemplar for students. Since this is on level 2 of the progression, if its easier for students to do it on their own computers you could do that as well.

 Code Studio levels

  • Interactive Card

Example Project

Run the program a few times and answer the following questions:

1) Which elements appear to use drawing commands?

2) Which elements appear to be Sprites?

3) For each Sprite, which properties are being updated?

4) Where do you see conditionals being used?

5) Are there elements that you don’t understand?

Discuss: Have students share their observations and analyses of the exemplar.

Encourage the class to consider that there are multiple approaches to programming anything, but that there may be clues as to how something was created. In particular, when they are sharing their thoughts ask them to specify the following :

  • Clues that suggest a Sprite was used
  • Clues that suggest a conditional was used
  • Clues that suggest an iterator pattern was used

Display: Show students the rubric. Review the different components of the rubric with them to make sure they understand the components of the project.

Activity (2 days)

Unplugged: Interactive Card Planning

Goal: Students should plan out what they want to create before they head to the computer so that once they get to the computer they are just executing the plan.

Distribute: Hand out the project guide to students. This is the tool students will use to scope out their projects before getting onto the computers. Give students some time to brainstorm the type of card they want to create and who the recipient will be.


1) The first layer of the interactive card is a background drawn with just the commands in the Drawing drawer. The front of the Activity Guide provides a grid for students to lay out their background, a reference table of drawing commands, and an area for students to take notes and write pseudocode.

2) Next students think through the Sprites they’ll need, filling out a table of each Sprite’s label, images, and properties

3) Finally students consider the conditionals they’ll need in order to make their card interactive.

Levels: Implementing Interactive Card (Level 3 – 7)

 Transition: Once students have completed their planning sheet, it’s time to head to the Code.org website for Lesson 10. The short level sequence asks students to complete each element of their project.

 Code Studio levels

  • Making an Interactive Card

Your Interactive Card

In the next few levels, you’ll be completing your own interactive card. Here are some examples to give you some ideas. Don’t forget to look at the code to see how they work.



Leave a Reply

Your email address will not be published. Required fields are marked *