Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

Activity 1 : The Signal

Example Project


This sample activity is a collaboration between Cartoon Network and CS First. Students tell a story using the characters from "The Amazing World of Gumball." This activity introduces students to computer science and the programming language Scratch and takes 40-75 minutes to complete. Sample activities consist of one single student activity. Printed materials are not provided for sample activities.

Volunteer Focus

  • Ensure that students have a positive experience and successfully create a program.
  • Encourage students to persevere through difficult problems and reflect on those challenges at the end of the activity.

Agenda Summary

Time (mins) Agenda Item
5 Activity Introduction
5 Transition to Computers
4 The Amazing World of Gumball and CS First
6 Foreshadow the Glitch with Dialogue
10 The Glitch and a Response
10 Create a New Scene
5 Reuse the Glitch
5 Conclude the Story
5 Amazing World of Gumball Wrap-Up
5 Conclusion

Topics Introduced

  • Sequencing
  • Loops
  • Procedures
We recommend you set up a CS First club to facilitate this activity. Doing so will enable students to generate CS First and Scratch usernames and passwords to save their work, and allow you to track their progress and see shared projects. Usernames can be used in future clubs and activities. To create a club, visit
Activity Introduction (5 minutes)
Directions Student Instructions
  1. If the students don't know you, introduce yourself.
  2. (Show script)

    [example] Welcome! I am Mr. Smith, and I am leading this Google CS First activity. I teach eighth grade math, and in my free time I like to read.

  3. Introduce and define Computer Science.
  4. (Show script)

    This is an activity for the computer science club CS First. Raise your hand if you can tell me what computer science is. [possible responses: programming, coding, creating things with a computer, solving problems.] One way to define computer science is the process of creating programs and solving problems using a computer.

  5. Introduce the activity. [If possible, project the example project linked at the top of the document].
  6. (Show script)

    In this activity you're going to build an animated story using the characters from the television show "The Amazing World of Gumball." You'll create your story using the premise from the episode "The Signal." If you've never seen this show, or this episode, that's okay. You'll watch videos that will provide you with the background you need to tell your story.

  7. Describe the programming environment Scratch.
  8. (Show script)

    When you program, or code, you provide instructions for the computer to follow. Today, you'll use the programming language Scratch. Many programmers write code in text, meaning that they type it out on the keyboard. With the Scratch language, you code using blocks that snap together like puzzle pieces.

CS First is a computer science club. Computer science is the process of creating programs and solving problems using a computer.
Transition to Computers (5 minutes)
Directions Student Instructions
To start with a CS First club:
  1. Tell students how to join your club using the code from your dashboard. For instructions that include images, view the solution sheet linked at the top of this page.
  2. (Show script)

    To start, join our club using our club code. Go to Then select "enter club code." Enter our club code, and select yes to receive a username and password. Write down your username and password so you can sign into Scratch and save your work. After receiving your username and signing in, watch the first video. Each video that you watch will provide instructions that describe how to complete this activity

  3. Check for questions.
  4. (Show script)

    Are there any questions before we begin?

  5. Release students to work.
  6. (Show script)

    You may begin. Please ask your neighbors if you have a question!

To start without a CS First club:
  1. Tell students how to get to the activity and how to navigate the CS First website.
  2. (Show script)

    To start this activity, open a web browser, and go to There you'll find videos that will guide you through creating your own animated story. Once there, plug in your headphones, and begin watching the first video. After watching each video, complete the steps described. Then, click the green arrow below the video to move on to the next step. After the second video, open the website Scratch, where you'll create your program.

  3. Check for questions.
  4. (Show script)

    Are there any questions before we begin?

  5. Release students to work.
  6. (Show script)

    You may begin. Please ask your neighbors if you have a question!

Follow your teachers instructions to get started.
The Amazing World of Gumball and CS First (4 minutes)
Directions Student Instructions
Walk around and ensure that students made it to the first video, and have begun to watch. At the conclusion of the video, students should open the starter project in a new tab, and sign in. Some students may move on to the second video without opening the Scratch project. If you notice that a student is watching any video after the first and doesn't have a tab with Scratch open, instruct them to return to the first video and open the starter project. Then, they can return to the second video.
In this collaboration between CS First and Cartoon Network, you will create an animated story based on The Amazing World of Gumball TV series.
  1. Click the starter project link next to this video.
  2. Click "remix," and sign in to save the project to your account.
  3. Return to this page, and click the "next" arrow to watch the next video.
Foreshadow the Glitch with Dialogue (6 minutes)
Directions Student Instructions
Refer to the solution sheet linked at the top of this page to see the code used in each video. For this video, students can select any characters to use as the main character and secondary character. To select a character, click the "show" block in the looks menu.
  1. Select a main character sprite and show it.
  2. Select a secondary character and show it.
  3. Select a backdrop
  4. Use "say for 2 seconds" blocks to foreshadow the glitch in your story.
The Glitch and a Response (10 minutes)
Directions Student Instructions
This video requires adding code to two different characters. After completing the steps described in this video students will have two characters with dialogue and one of the characters will experience a "glitch."
  1. Program a "glitch" using "repeat" and "change effect by" blocks.
  2. Reset the "glitch" using a "clear graphic effects" block.
  3. Add dialogue using "say for 2 seconds" blocks and "wait" blocks.
  4. Run both characters' code using "when flag clicked" blocks.
Create a New Scene (10 minutes)
Directions Student Instructions
If your class is shorter than an hour some students may not get to this video (that's okay). In this video, students add a second scene and a third character. Use this time to discuss with students the stories they've begun to tell, and how they see their stories ending.
  1. Switch the backdrop at the start of your story
  2. Switch the backdrop at the end of the first scene
  3. Hide your second character at the end of the first scene
  4. Select a new character to show when the backdrop changes, and make it hide when the flag is clicked.
Reuse the Glitch (5 minutes)
Directions Student Instructions
In this video, students create a new block using the "more blocks" menu. This is an example of the computer science concept "procedures."
  1. For your main character, use a "when backdrop switches to" block to continue dialogue.
  2. Use "say for 2 seconds" and "wait" blocks to build more into your story.
  3. Create a "glitch" block, and use it twice in your story.
Conclude the Story (5 minutes)
Directions Student Instructions
Encourage students to continue their story however they please. This video page also contains add-on ideas. Add-ons provide additional ideas and inspiration for ways that students can add to their story.
Draw your story toward a conclusion using dialogue, scene changes, or new characters.
Amazing World of Gumball Wrap-Up (5 minutes)
Directions Student Instructions
The wrap-up video features animators from "The Amazing World of Gumball" as they describe their jobs.
Congratulations on coding your The Amazing World of Gumball story. Watch this video to see the creators of The Amazing World of Gumball discuss their work.
Conclusion (5 minutes)
Directions Student Instructions
  1. Discuss the activity.
  2. (Show script)

    Finally, let’s discuss what you learned during this activity. [Read "discussion questions" from below].

  3. Facilitate dismissal by asking students to wrap headphones and shut down computers [ask students to either leave headphones at their seats or drop them off while exiting].
  4. (Show script)

    Please wrap your headphones. To do this, hold the headphones flat, and wrap the cord around the ear pieces [demonstrate]. Everyone, please try this now. [wait] Once your headphones are wrapped, please place them at your seats. Once I see that all of your headphones are wrapped, we will all leave together.

Discussion questions/topics:
  • Tell me about the program you made today.
  • What was your favorite part of this activity?
  • What did you learn about computer science and coding?
  • What was the most challenging part of this activity?
  1. Reflect on the activity
  2. When instructed to, wrap your headphones and shut down computers.

After members have exited the room: