Create, Compute, & Community Day!

Computer Science Activity Pack

6-8

Updated April 2020

 Create, Compute, & Community Day!
Computer Science Activity Pack

Table of Contents
A Day of Computer Science!
Other Grade Band Activities
Middle School Activities
Robot Zine
Behind a Web Page
Drawing with Code

Animate a Memory Activity

Computer Science At Home Activities
Computer Science Glossary
A Few Puzzles…
...And Some Jokes!
Get Computer Science Education into Your School!

1
 Create, Compute, & Community Day!
Computer Science Activity Pack

A Day of Computer Science!

This is a recommended schedule to follow when doing a full day of computer science. If
activities do not take the full hour, we recommend taking a movement break such as
GoNoodle (​gonoodle.com​) instead of moving to the next activity. Shift the day around
based on your needs or recommendations by your school.

Recommended Schedule

0​9 am - 10 am Robot Zine

10 am - 11 am Animate a Memory

11 am - 12 pm Behind a Web Page

12 pm -​0​1 pm Computer Science Lunch Break: ​tinyurl.com/PBJProgram

0​1 pm - ​0​2 pm Computer Science At Home

0​2 pm - ​0​3 pm Drawing with Code

Other Grade Band Activities

Above are the recommended activities that you can try based on your grade level. Feel
free to challenge yourself with activities from other grades as well by looking at our full
activity pack: ​tinyurl.com/CS4AllCSActivityPack​!

2
 Create, Compute, & Community Day!
Computer Science Activity Pack

Middle School Activities

Robot Zine
Type​: Unplugged

With advances in Artificial Intelligence (AI), it is more important than ever that we consider
how humans and computers will interact. How do you want the robots of the future to
behave towards you and others?

Vocabulary

● Robot ​- A machine capable of carrying out complex tasks automatically

● Zine ​- A self-made publication that might look like a small handmade magazine with
text, illustrations, and cutout images
More on Computer Science concepts at ​blueprint.cs4all.nyc/concepts

Materials needed

● Large paper or whiteboard for brainstorming

● Scissors
● Markers, crayons, pencils
● Construction paper and glue sticks
● Optional: magazines for cutting out images/text
● Optional: sticky notes
● How to fold a zine: ​zineopolis.blogspot.com/p/h.html
● Video tutorial for folding a zine: ​tinyurl.com/ZineVideo

Activity

● For this activity, you will create a “robot zine.” In this zine you will:
■ Identify what a robot is
■ Propose a new robot you wish existed or might invent someday
■ Include a code of conduct that you and your robot will follow

● First, read this article and watch the video:

■ What is a Robot?: ​wired.com/story/what-is-a-robot

3
 Create, Compute, & Community Day!
Computer Science Activity Pack

● On the first page of your zine, explain what a robot is in your own words
■ Add pictures and color too!
■ Make sure to highlight or bold what you consider key words

● On the next pages of your zine, add some surprising or interesting examples of robots
that you can find
■ Describe and/or draw them!
■ Make note of what they are used for and how they make human’s lives
easier/better

● On the next page of your zine, add a robot you wish existed
■ Describe and/or draw it!
■ You can look at these scenarios for inspiration: ​tinyurl.com/SpringBreakRobots
■ What robots do you think could help people get through the current
predicament?

● On your last page, add a code of conduct

■ Think of a code of conduct that your school, sport, or club follows
■ These will set rules and responsibilities for both you and your robot
■ What rules do you think your robot should follow?
■ What rules do you think all robots should follow?
■ What rules do you think people who make robots should follow?

● Share your zine with your friends and family

■ Ask them what robot they wish existed
■ Make a second issue of your zine with other robots you or your friends and
family come up with

Continue Your Learning

● The Ethical Robot: ​tinyurl.com/TheEthicalRobot

4
 Create, Compute, & Community Day!
Computer Science Activity Pack

Behind a Web Page

Type​: Unplugged

Hypertext Markup Language (HTML) is the standard way to publish information or

applications on the Internet. In this activity, you will identify what part of an HTML document
will be displayed on a web page and explore basic HTML tags.

Vocabulary

● Decomposition​ - Breaking a problem down into smaller pieces

● Pattern Recognition ​- Finding similarities between things
● Markup​ - The code that explains how a web page should be structured (e.g. HTML)
More on Computer Science concepts at ​blueprint.cs4all.nyc/concepts

Materials needed

● Print the Web page example: ​tinyurl.com/WebPageExample​ (screenshot below)

● Print the HTML code document: ​tinyurl.com/HTMLCodeExample​ (screenshot below)

5
 Create, Compute, & Community Day!
Computer Science Activity Pack

Activity

1. Look over the ​Web page on the web​ document, which is an example of a web
page, and the ​HTML code​ document, which is the HTML code for the example web
page

2. Find and highlight the content you see on the web page on the printed HTML
document

3. Do you notice which tags contain the highlighted content?

■ Don’t worry about what each tag does right now, just which tags you see

4. Some important information to know:

■ Web page​: A web page is what is displayed by a web browser
■ HTML document​: An HTML document contains the content that the web
browser turns into a web page
■ HTML tags​: HTML tags determine how the browser should display the content
such as paragraphs, bullet points or images. HTML tags are mostly paired,
opening and closing tags (i.e. <p>..</p>, <h1>..</h1>)

5. Which paired HTML tags do you see? What does the content of the web page look
like for each tag pair? What do you think each tag pair’s function is?

6. If you have a computer with access to the internet, open up ​codepen.io

■ Recreate the HTML document there and try changing content and tags!
■ Make your own website that can act as your resume or a website that shows
thanks for all of the hard work that hospitals are doing!

7. Share what you learned and/or created with a friend or family member!

Continue Your Learning

● Khan Acadedmy’s Intro to HTML: ​tinyurl.com/KhanAcademyHTML

● HTML Introduction: ​w3schools.com/html/html_intro.asp
● HTML tags references: ​w3schools.com/tags/default.asp

6
 Create, Compute, & Community Day!
Computer Science Activity Pack

Drawing with Code

Type​: Plugged

There are many different programming languages, and each come with their own strengths.
P5.js is one of the Javascript libraries that has a full set of drawing functions. In this activity,
you will explore drawing basic shapes like a square, rectangle and circle by coding with
p5.js.

Vocabulary

● Decomposition​ - Breaking a problem down into smaller pieces

● Algorithm Design ​- Creating clear instructions that can be executed without
confusion
● Programming Languages​ - Different languages have different applications and
require different amounts of prior knowledge
More on Computer Science concepts at ​blueprint.cs4all.nyc/concepts

Materials needed

● Computer
● Access to the p5.js online editor: ​editor.p5js.org

Activity

1. Computer and programming languages​: To tell a computer to complete tasks, we

need to give it clear instructions using a language that a computer understands. In
this activity, to tell a computer to draw shapes, we’ll be using p5.js

2. Canvas​: Before drawing anything, first p5.js requires you to create a canvas on your
screen by setting up its width and height. This canvas is where your shapes will be
displayed and it has a coordinate system so that a computer knows where and what
to display on the canvas

7
 Create, Compute, & Community Day!
Computer Science Activity Pack

3. P5 canvas coordinate system​: Note that the p5 canvas coordinate system is different
from any other usual coordinate system. See the image below:

4. Drawing a rectangle​: See an example below. To tell a computer to draw the

rectangle from the example, what information do you think a computer needs to
know?

■ Width of the rectangle​: In this example, it will be 40

■ Height of the rectangle​: In this example it will be 30
■ Location of the rectangle on the canvas​: with p5.js, to determine the location
of a rectangle, you need to let a computer know the coordinates of the
upper-left corner. In this example, it will be (20, 10)

8
 Create, Compute, & Community Day!
Computer Science Activity Pack

5. p5.js syntax​: In p5.js, these pieces of information are used in the form shown below:

6. p5.js online editor​: Open the online editor, ​editor.p5js.org​, and draw the example
rectangle! Write the syntax for the rectangle like the image below, then click the
play button at the top-left corner:

7. Drawing an ellipse (oval)​:

9
 Create, Compute, & Community Day!
Computer Science Activity Pack

8. Drawing order​: When drawing multiple shapes, the shape that you draw first will be
drawn first, then the second one, then the third one and so on. If there is any
overlap, the first shape will be below the second one, the second one will be below
the third one, and so on

9. Challenges!​ Here are some drawing challenges with rectangles and ellipses.
■ We recommend using grid paper to sketch out the drawing, it will help you
figure out the location of each shape

10. What else can you draw? Can you make an image that you can print out and put
on your door to show your appreciation for those working on the front lines?

Continue Your Learning

● hello p5.js video: ​hello.p5js.org

● p5.js reference: ​p5js.org/reference

10
 Create, Compute, & Community Day!
Computer Science Activity Pack

Animate a Memory Activity

PLEASE READ!

Note to Parent(s) & Teachers:

For this activity, students should begin by ​interviewing a friend or family member
(page 35), or jot down ideas about a memory that they have with a friend or
family member.

For Students in Grades K-2:

After the interview students should use the ​PBS Kids Design Squad Prototype
Template​ (page 39) to prototype their project (brainstorm what they will
include in it). To animate their interview, students can use PBS Kids Design
Squad: ​pbskids.org/designsquad/projects​.

For Students in Grades 3+:

After the interview, students should use the ​Scratch Prototype Template​ (page
36) to prototype their project (brainstorm what they will include in it). To
animate their interview, students can use Scratch: ​scratch.mit.edu​. Students are
new to programming with Scratch should try one of their tutorials first:
scratch.mit.edu/ideas​.

Alternate animation options:

● Code.org Labs: ​studio.code.org/projects/public
● Scratch Jr.: ​scratchjr.org/about/info

11
 Create, Compute, & Community Day!
Computer Science Activity Pack

Name: ____________________________ Date:__________________

Animate A Memory - Family/Friend Interview

Task​: Interview a friend or family member so you can get ideas for a digital story
created with Scratch or PBS Kids Design Squad.

Directions​: Interview a family member about their best memory from when they
were in school, or interview a friend about their best memory from a summer!
Type or write their responses under the questions below.

1) Who were you with?

2) What were you doing?

3) Where were you?

4) Why were you there?

5) When did this happen?

6) How were you feeling?

12
 Create, Compute, & Community Day!
Computer Science Activity Pack

Name: ____________________________ Date:__________________

Animate A Memory - Scratch Prototype Template

Task​: Write down your ideas for your Scratch project.

Directions​: Use this space to plan your design!

Required Scratch Elements (see below for specific blocks)

❏ 3 different sprites (all must have movement)
❏ 3 different backgrounds (Draw your own, choose from the library, or upload an image)
❏ Event blocks
❏ Loops and Conditionals blocks
❏ 1 “Sound” block
❏ 2 “Sensing and Operator” blocks
❏ Directions for the project using the following pages as guidelines

Loops Loop + Conditional Block

Conditional Blocks Event Blocks

Sound

Operators
Sensing

13
 Create, Compute, & Community Day!
Computer Science Activity Pack

Project Type
❏ movie animation
❏ interactive story

Project Description / Plot ​- How will a user interact with your project?

Storyboard Scenes ​- Draw and write what happens in your project as someone uses it.
What happens first? What happens next?

____________________________ ____________________________ ____________________________

____________________________ ____________________________ ____________________________
____________________________ ____________________________ ____________________________
______________________ _____________________ _____________________

Project End

____________________________ ____________________________ ____________________________

____________________________ ____________________________ ____________________________
____________________________ ____________________________ ____________________________
_____________________ _____________________ _____________________

14
 Create, Compute, & Community Day!
Computer Science Activity Pack

Sprites / Characters

Name: Name: Name:

What will this sprite do? What will this sprite do? What will this sprite do?

Blocks Needed: Blocks Needed: Blocks Needed:

Will this sprite be ​shown ​or Will this sprite be ​shown ​or Will this sprite be ​shown ​or
hidden ​at the project start? hidden ​at the project start? hidden ​at the project start?

Background Images You Will Need:

What will the backdrop be at the start of the project?

____________________________________________

When will the backdrop change?

____________________________________________________________

Sounds / Sound Effects You Will Need:

15
 Create, Compute, & Community Day!
Computer Science Activity Pack

Name: ____________________________ Date:__________________

Animate A Memory - PBS Kids Design Squad Prototype Template

Task:​ Write down your ideas for your PBS Kids Design Square project.

Directions​: Use this space to plan your design!

Who will be in the digital Where does the memory When did this happen?
story? take place?

16
 Create, Compute, & Community Day!
Computer Science Activity Pack

Computer Science At Home Activities

There are many Computer Science (CS) activities available online! Not only are there
activities that schools usually do during Computer Science Education Week (​csedweek.org​),
but many organizations are creating additional activities for when families are stuck at home
too!

Included are some recommended activities that families can try at home. For even more
ideas, check out our Computer Science Remote Learning Guide for Families
(​tinyurl.com/CS4AllRemoteParent​)!

Hour of Code (​hourofcode.com/us/learn​)

One-hour tutorials designed for all ages and ability levels offered in over 45 languages.
These activities are designed to demystify coding and computer science, show that
anybody can learn the basics, and broaden participation in the field of CS.

Code.org At Home (​code.org/athome​)

Code.org wants to support teachers, students, and families in any way they can. One
way they are doing this is by putting together a set of resources that can be used to
learn computer science at home.

Scratch At Home (​sip.scratch.mit.edu/scratchathome/​)

The Scratch team is providing children, families, and educators with ideas for
engaging in creative learning activities using the free Scratch coding environment.
Several times a week new activities are added to the site.

Computer Science Colouring Book (​tinyurl.com/CSColouring​)

Learn about computers and what makes them tick while you relax and color.
Re-imagine computer hardware and software in the colors of your choice, while
taking steps on your computer science journey.

17
 Create, Compute, & Community Day!
Computer Science Activity Pack

Computer Science Glossary

Abstraction ​- A simplified representation of something more complex

Algorithm ​- A list of steps to finish a task

Algorithm Design​ - Creating clear instructions that can be executed without confusion

Binary ​- A way of representing information using only two options

Bug​ - An error in a program that prevents the program from running as expected

Code​ - The language that programmers create and use to tell a computer what to do

Command​ - An instruction for the computer. Many commands put together make up
algorithms and computer programs

Computational Thinking​ - Modifying a problem in such a way that it can be modeled or

solved using a computer or machine. Strategies include: decomposition, pattern matching,
abstraction, algorithms

Computer ​- A machine that runs programs

Computer Science​ - Using the power of computers to solve problems

Conditionals​ - Statements that only run under certain conditions

Debugging ​- Finding and fixing problems in an algorithm or program

Decomposition ​- Breaking a problem down into smaller pieces

F.A.I.L.​ - First Attempt In Learning

Function ​- A piece of code that you can easily call over and over again

Internet ​- A group of computers and servers that are connected to each other

Iteration​ - A repetitive action or command typically created with programming loops

18
 Create, Compute, & Community Day!
Computer Science Activity Pack

Loop​ - The action of doing something over and over again

Markup ​- The code that explains how a web page should be structured (e.g. HTML)

Pattern Recognition​ - Finding similarities between things

Persistence ​- Trying again and again, even when something is very hard

Pixel ​- A single point or dot of color in a larger image

Program ​- An algorithm that has been coded into something that can be run by a machine

Programmer ​- Someone who creates a program

Programming ​- The art of creating a program

Programming Languages​ - Different languages have different applications and require

different amounts of prior knowledge

Pseudocode​ - A simple way of writing programming code in English without knowing any
programming languages

Remixing ​- A variant of an original creation made by rearranging or adding to the original

Robot ​- A machine capable of carrying out complex tasks automatically

Sequence ​- Commands put in order so computers can read them correctly

Syntax ​- A set of commands and ‘grammar rules’ each language has that must be followed

Zine ​- A self-made publication that might look like a small handmade magazine with text,
illustrations, and cutout images

19
 Create, Compute, & Community Day!
Computer Science Activity Pack

A Few Puzzles…

The first group of trainee astronauts are all sitting around the table, waiting to start their first
day of training. From the clues given below, can work out where everyone sits?

Note​: Seat 1 is next to Seat 2 and Seat 8, etc. Seat 5 is across from Seat 1, and Seat 7 is across
from Seat 3, etc. Seat 2 is a higher seat number than Seat 1, etc.

1. William is next to Alisa and Nick.

2. William is across from Gabbie.
3. Amanda is next to Sarah.
4. Sarah is across from Eric.
5. Nick is next to Eric.
6. Sydney is at Seat 4 and sits next to Gabbie
7. Gabbie has a higher seat number than Sydney.
8. Alisa is not in Seat 2.

20
 Create, Compute, & Community Day!
Computer Science Activity Pack

At the recent spring fete, four keen gardeners were each displaying their two fine roses In
total there were four colours and each rose colour appeared twice.

From the clues below can you tell who had which colour roses?
● Mr Green had a yellow rose.
● Mr Yellow did not have a red one.
● Mr Red had a blue rose but not a green one.
● Mr Blue did not have a yellow one.
● One person with a red rose also had a green one.
● One person with a yellow rose also had a blue one.
● One of the persons with a green rose had no red.
● Neither of the persons with a yellow rose had a green one.
● No person has two roses of the same colour.
● No two persons had the same two colour roses and their names provide no clues.

21
 Create, Compute, & Community Day!
Computer Science Activity Pack

...And Some Jokes!

Q: How many programmers does it take to change a light bulb?

A: It can’t be done. It’s a hardware problem!

Q: What did the spider do on the computer?

A: It made a website

Q: What do you call a pirate with a Computer Science Degree?

A: A programerrrrrrrrrr!

Q: What did the computer do at lunchtime?

A: It had a byte to eat!

Q: Why did the computer show up late to work?

A: It had a hard drive.

Q: What do you call 8 Hobbits?

A: A Hobbyte!

22
 Create, Compute, & Community Day!
Computer Science Activity Pack

Q: Why do many Java programmers wear glasses?

A: Because they don’t C#!

There are 10 types of people in the world, those who understand binary, and those who do
not.

Algorithm​ (noun.)
Word used by programmers when they do not want to explain what they did.

Endless Loop​: n., see Loop, Endless.

Loop, Endless​: n., see Endless Loop.

Q: Why do programmers always mix up Halloween and Christmas?

A: Because Oct 31 == Dec 25!

Q: What do you call a good joke about computer science?

A: Trick question, there are none!

23
 Create, Compute, & Community Day!
Computer Science Activity Pack

Get Computer Science Education into Your School!

Computer science (CS) is the study of the capabilities and limitations of computers to help
humans solve problems creatively. Rather than being passive users of a computer, children
learn to create with a computer. CS provides children with the opportunity to learn
computational thinking, problem-solving, creativity, and critical thinking—skills that are
relevant to and support many other subjects. CS lessons are a creative outlet and can
empower your children to change the world.

Parents Who Love CS

If you loved any of the activities from this pack,​ ​encourage your child’s school to join​ the
Computer Science for All community by going to ​cs4all.nyc!​

Schools Who Want CS

Principals and teachers can l​ earn more and register​ to bring computer science education to
their school by going to ​cs4all.nyc!​

24