< Interactive Animations and Games ('24-'25)

Lesson 1: Programming for a Purpose

45 minutes

Overview

To kick off a unit devoted to problem-solving and developing animations and games, students begin by investigating the design of different animations and games. Students look at a variety of animations and games and attempt to match each design with a potential user. Then students choose a user and attempt to prototype an animation or game design for them on paper or in a digital template. To conclude the activity, students consider what it means to be an animation and game designer and create resources for other users.

Question of the Day: How can we design animations and games based on the needs of a user?

CSTA K-12 Computer Science Standards (2017)
    • 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.

Agenda

Objectives

Students will be able to:
  • Create a prototype of an animation or game design to meet the needs of a user using the problem-solving process
  • Identify features of an animation or game design that match the needs of users
  • Understand the steps of the problem-solving process

Preparation

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the teachers
For the students

Teaching Guide

Before the Lesson

Preparing for the Unit

Getting Started with Code.org: Consider watching our Getting Started with Code.org video series for an overview of how to navigate lesson plans, setup a classroom section, and other important features of the Code.org platform. Each video also has a support article if you'd prefer to read or print instructions - click here to learn more.

Setup a Classroom Section: You can use a class section in Code.org to manage your students, view their progress, and assign specific curriculum - click here to learn more.

If you are using a learning management system, there may be additional steps to sync your classes with Code.org:

  • Click here for steps to setup your classes with Google Classroom
  • Click Here for steps to setup your classes with Clever

Become a Verified Teacher: Lesson plans and levels have additional resources and answer keys for Verified Teachers, which is quick process that verifies your position at an educational institution. Click here to complete a form and you should have access to verified teacher resources in ~1 business day. Verified teachers also have access to the "Teacher's Lounge" section of the forums.

Get Inspired: Consider watching our Teacher Tips video playlist, featuring current CS Discoveries teachers.

Technical Requirements: For the very best experience with all Code.org content, we recommend consulting with your school or district's IT department to ensure specific sites are allowed and are not blocked. Click here to see a list of sites to unblock.

You can also find mobile and tablet support details, hardware recommendation information such as minimum Internet connection speed, smallest screen size supported, and other hardware recommendations, as well as a list of supported browsers and platforms at the same technical requirements website.

Warm Up - Option 1

Teaching Tip

Two Warm-Up Options: This lesson has two warm-up options, depending on whether or not students have been previously introduced to the Problem-Solving Process.

Option 1 is for classrooms that have not been introduced to the Problem-Solving Process. The warm-up is longer than normal because it introduces the Problem-Solving Process through a brief activity and a video.

Option 2 is for classrooms that have been introduced to the Problem-Solving Process in a previous unit. The warm-up is shorter and acts as a quick review of the Problem Solving Process.

Problem Solving Word Search (10 minutes)

Remarks

In this unit, we'll be learning how to build interactive animations and games. While creating these animations and games, you might encounter some problems. The word "problem" can refer to lots of different situations - I could say I have a problem for homework, a problem with my brother, and a problem with my car, and all three mean very different things.

Prompt: What's an example of a problem you've had to solve recently?

Circulate & Distribute: Have students share their thoughts with a neighbor. Listen for examples that may be worth using as examples throughout the lesson.

As students share, distribute a copy of the (Warm Up) Word Search to each student, face down. Make sure students don't start the word search ahead of time.

Remarks

Since we will most likely be faced with some problems to solve in this unit, today, we are going to learn about and practice an effective strategy for when we need to solve problems. We'll start with a simple problem: solving a word search.

Prompt: What is the problem you are trying to solve when you do a word search?

Discuss: Allow students to discuss their ideas with a classmate before sharing them with the entire class.

Discussion Goal: Guide students to the idea that the problem of a word search is that there are hidden words throughout the grid of letters and thus the goal of a word search is to find all the words in the list.

Prompt: What are the different strategies that someone could use for finding words? What are the pros and cons of each strategy?

Discuss: Allow students to silently record their ideas in writing for a minute. Afterward, invite them to share what they wrote with a neighbor and then finally bring the whole class together to develop a classwide list of strategies.

Discussion Goal: This is a quick, low-stakes brainstorm that asks students to bring in their own experiences with word searches and identify strategies they may have used or could use. Student responses may vary but may include the following strategies:

  • Scan each row from left to right followed by scanning each column from top to bottom.
  • Check surrounding letters. Once you found the first letter or a key letter in a word you’re searching for, check the letters around it to see if you should keep going. For example, if you have a word with Q in it, if there’s no U next to it, then you need to keep searching.
  • Look for words that have less-common letters in them such as words with a Q, X, J, or Z
  • Look for words with letter pairs, such as double letters or QU
  • Look for more than one word at a time.
  • Turn the puzzle upside down

Do This: Direct students to pick ONE strategy from the list that they want to try and put a “#1” next to it in their journals to indicate it was their first strategy used. Once they pick a strategy, direct students to use that strategy in their word search.

Teaching Tip

It is important to let the students know that if at any time the strategy they picked is not working, they should feel free to go back to the list of strategies and pick a different one, making sure to put a number next to the new strategy.

Circulate: Give students a few minutes to find as many words as possible. It is okay if they don’t find every word. You may bring everyone back together once everyone has found at least several of the words on the list.

Prompt: Display and have students reflect on each of the following prompts:

  • Were you successful in solving this word search problem? How do you know?
  • What strategy did you pick and how did it work for you?
  • Did anyone change strategies at any point … why or why not?
Teaching Tip

As you lead this discussion, you may choose to do a quick raise of hand poll to find out who was successful, or on track to be successful if they didn’t get a chance to finish. Additionally, you can also instruct students to pick two of the questions to answer.

Discussion Goal: This discussion serves as a way to get students to reflect on how they did solving this problem and to give students a moment to recognize if they changed strategies and why or if they would solve a problem like this differently next time.

The Problem Solving Process (5 minutes)

Display: Show students the The Problem Solving Process video in the slides.

Questions to Consider with Video:

  • What are the 4 steps to the Problem-Solving Process?
Teaching Tip

Videos are used throughout the curriculum to spark discussions, supplement key concepts with additional explanations and examples, and expose students to the various roles and backgrounds of individuals in computer science.

While interacting with the video, turn on closed captioning so students can also read along as they watch.

To encourage active engagement and reflection, use one or more of the strategies discussed in the Guide to Curriculum Videos.

Discuss and Display: Briefly discuss with students what parts of the warm-up activity they felt fell into each step of the problem-solving process before displaying the example answers in the slides:

  • Define: when we put into our own words what the problem of a word search is and what the goal is
  • Prepare: the brainstorming of different strategies that could be used to solve a word search
  • Try: when we picked a strategy and tried to find the words
  • Reflect: when we reflected on how they did at the end
Teaching Tip

This is a good point to remind students that the problem-solving process is a cycle and there should be times when they need to repeat steps. For example, if they went back to the list of strategies and picked a different one at any point when solving this problem, they were not only doing the “Reflect” step without realizing it but going back to the “Prepare” and “Try” steps again.

Remarks

Now that we're familiar with the problem-solving process, let's explore how we can use it when designing animations and games.

Warm Up - Option 2 (5 minutes)

Teaching Tip

Two Warm-Up Options: This lesson has two warm-up options, depending on whether or not students have been previously introduced to the Problem-Solving Process.

Option 2 is for classrooms that have been introduced to the Problem-Solving Process in a previous unit. The warm-up is shorter and acts as a quick review of the Problem-Solving Process.

Revisit The Problem Solving Process (5 minutes)

Remarks

In this unit, we'll be learning how to build animations and games. Today, we are going to remind ourselves about the Problem Solving Process and eventually we will apply it to the animations and games we create.

Prompt: What do you remember about the Problem-Solving Process?

Discussion Goal: Based on student responses, the teacher should lead students through a discussion about the four steps of the Problem-Solving Process and what they remember to be involved in each step.

Prompt: Based on what you know about the Problem-Solving Process, what do you think each step could look like when designing an animation or game?

Discussion Goal: Even though students haven't designed animations or games yet, guide students to imagine the steps involved from having the first inspiration for an animation or game to having it created. Some ideas may include:

  • Define: Deciding what you want to make an animation or game about or who you want to make it for
  • Prepare: Looking at similar animations and games and deciding what kinds of colors, images, or characters you want to use, or sketching out the animation/game interface, or even planning out how to program the animation/game
  • Try: Creating a basic version of the animation/game (even if it doesn’t have all of the features)
  • Reflect: Showing it to friends to get feedback and improving the animation/game design

As students finish discussing, transition to the main activity.

Activity (35 minutes)

Recommending Animations and Games

Remarks

In this unit, we are going to learn how to create animations and games, which starts with thinking about who we're creating an animation or game for. Sometimes we make animations and games about our own personal interests, but we should also think about designing them for other people. Eventually, we will think about applying the problem-solving process to help us actually program our animations and games, but today, we are going to focus on how to apply the problem-solving process when designing animations and games to meet the needs of our users and ourselves.

Group: Put students in pairs.

Distribute: Pass out a copy of the Animation and Game Design for Users activity guide to each student.

Teaching Tip

Answer Keys & Exemplars: An answer key or exemplar is provided for verified teachers as part of the resources in this lesson plan. If you do not see an answer key or exemplar listed as a resource, follow these steps to become a verified teacher.

Overview: Have students read through the directions on the first page of the activity guide. The first part of this activity asks students to match different users to an animation or game template that suits their needs. Students will need to visit Code Studio to view the templates.

Code Studio: Direct students to the "Sample Animation and Games" levels on Code Studio.

Teaching Tip

While most of these examples are pulled directly from lessons that students will complete later in the unit, a couple of them use commands or techniques that aren't explicitly covered in the course. You can view the source for all of these programs in order to support students who may want to incorporate some of these techniques later on.

Circulate: Have students work through this activity in pairs, encouraging discussion about why exactly they are choosing each template. This is a great place to discuss different animation and game designs and the needs of each user.

This activity guide asks students to consider why people make animations and games and what sorts of interests can be expressed with them.

Teaching Tip

Value Reasoning over Correctness: Each user is designed with a particular template in mind, but students are encouraged to use their own reasoning and logic when recommending a template to users. It's okay for students to not make an "obvious" choice as long as they're thinking carefully about their reasoning and are able to justify their choices.

The animations and games are intentionally simple, to help set expectations about the animations and games that students will be creating over the course of the unit.

Share Out: Have students discuss the following questions in small groups before bringing them to a full class discussion:

  • Which users were the easiest to find matches for?
  • Which users were the hardest to find matches for?

Based on your observations while circulating, you should also identify a few specific users to ask the class to discuss, especially users for whom multiple students chose different templates for that user. Encourage students to hear different justifications for their choices, emphasizing that the rationale is more important than the choice itself.

Assessment Opportunity

As students discuss their reasoning for their choices, check to ensure that they are identifying the particular user's needs and characteristics, rather than general reasons to prefer a certain app or game. You may want to challenge students to distinguish their own needs and preferences from those of the described users.

Designing an Animation or Game

Remarks

Now we've been asked to design an animation or game ourselves for a client. We can create our own design, but it should meet the needs of our users.

Teaching Tip

Note on Timing: Depending on how long the warm-up took, especially if the class watched the problem-solving video, you may run out of time to fully complete this activity. That's okay! It can be something students come back to as they progress throughout the unit, or you may decide to extend this activity into a new class period and stretch out the design and feedback process. This task can be implemented in a variety of ways to match the constraints of the classroom.

Overview: Have students flip to the back of their activity guide and read the overview of the next part of the activity. Students will choose a user to create a basic animation/game design for, following the Problem-Solving Process. Students can sketch their design on pen and paper, or use the provided Google Slides template to create their design. These designs are meant to be sketches - students will not have enough time to "perfect" their designs.

Distribute: Pass out copies of the Problem Solving and Design resource. Students can use this when preparing their design, and it can be a reference throughout the unit.

Circulate: Monitor students as they complete this activity, ensuring that students are creating designs that match the needs of the user they chose. Monitor student conversations as well to make sure both voices are being heard during discussions and decisions. Students will be working in pairs throughout the unit, so it can be good to intervene early to reinforce good collaboration habits.

(Optional) Share Out: Depending on how much time is left in class, allow students to trade with other groups and share their designs. Encourage students to share with another group who picked the same user so they can see similarities and differences in their designs.

Assessment Opportunity

Following the Problem-Solving Process: You can use student responses on the activity guide to determine how well they followed each step of the problem-solving process. This process will be reinforced throughout the unit, especially on projects.

Wrap Up (5 minutes)

Question of the Day: How can we design animations and games based on the needs of a user?

Prompt: Reflect - What was one thing that you think your design does well to meet the needs of the user? What’s an area that you think can still be improved to meet the needs of your user?

Circulate: Students can answer these prompts on their activity guide in the Reflect section of the Problem Solving Process.

Share Out: Have students share their responses, highlighting similarities between responses even when the users were different.

Reflection

Code Studio: Have students answer 5 quick survey questions at the beginning of this unit. Once at least 5 students have completed the survey you will be able to view the anonymized results in the Teacher Dashboard. Some of these questions will be asked again at the end of the first project, which can be helpful in seeing student growth and shifts in attitudes throughout the unit.

Creative Commons License (CC BY-NC-SA 4.0).

This work is available under a Creative Commons License (CC BY-NC-SA 4.0).

If you are interested in licensing Code.org materials for commercial purposes contact us.