Lesson 9: Project - Make a Game

Overview

Students take what they've learned through chapter one, and develop an app of their own design that uses the board to output information.

Purpose

This end of chapter assessment is a good place for students to bring together all the pieces they have learned (event handlers, using the board as output, etc.) in one place. This project is purposefully left very open to allow students to think broadly about how physical output might be useful in an app - this is a great opportunity to encourage students to revisit programs they've written earlier in this unit or in Unit 4 that would benefit from using the board to output information.

Assessment Opportunities

Use the project rubric attached to this lesson to assess student mastery of learning goals of this chapter.

Agenda

Warm Up (10 min)

Activity (90 - 120 min)

Wrap Up (10 min)

View on Code Studio

Objectives

Students will be able to:

  • Use event handlers to respond to user interaction
  • Design a piece of software that uses hardware for non-traditional input and output
  • Prototype a program that integrates software and hardware

Preparation

  • Print a copy of the project guide for each group of students
  • Print a copy of the rubric for each student

Links

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

For the Teachers

For the Students

Teaching Guide

Warm Up (10 min)

Demo Project Exemplars

Display: On the projector, show the example project at the beginning of this lesson.

Prompt: Analyze the exemplar for the following elements:

  • Where is input being taken?
    • What events do you think are being used for each input?
  • What information is being output through the board?
  • Where might this program be using a loop?

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

Distribute: Provide each student with a copy of the rubric. Review the different components of the rubric with them to make sure they understand the components of the project.

Activity (90 - 120 min)

Unplugged: Program Planning

Group: Place students in groups of 2-3.

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 program they want to make.

Make a Game Project Guide

Brainstorming

Give groups some time to brainstorm ideas for their project. The goal is to come up with a simple game that can be controlled using elements of the Circuit Playground. Encourage students to think about all of the programs and projects that they've made so far as potential starting points (including the prototypes from Unit 4).

Teaching Tip

Students may find it particularly difficult to predict all of the events that they'll want to respond to or the functions that they'll need to create. Make sure that they know this is an iterative process and planning is only the first step. We want to start this project with as clear a plan as possible, but there will likely be things that weren't considered from the start and the plan will need to change accordingly.

  1. Once groups have settled on an idea, they can record it on the activity guide under Project Brainstorming.
  2. Next students think through the Events they'll need to respond to.
  3. Finally students consider the functions that they may need to create.

Prototyping the Program

Transition: Once teams have completed their planning sheet, they can head to Code Studio to work on prototyping their projects.

Wrap Up (10 min)

Sharing Projects

Share: Find a way for groups to share their projects with each other. It will likely be helpful to use the share link for the project so that students can share the project with other students.

Self Assessment

Using the rubric, students should assess their own project before submitting it.

Send students to Code Studio to complete their reflection on their attitudes toward computer science. Although their answers are anonymous, the aggregated data will be available to you once at least five students have completed the survey.

View on Code Studio

Grab that Bug!

This is an example of a tug o' war game that could be built in this lesson. To play, pair up with another student. The student on the left will the click the left button on the Circuit Playground as fast as they can, while the student on the right clicks the right button. Whoever can get the bug over to their side first wins.

View on Code Studio

Stop

Before you move on you'll need to look at the Project Guide for this project. Wait for instructions from your teacher as well.

  • Screen Design
  • 4
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Create Your Screens

The first thing you'll need to do is create all of the screens that you've sketched in your planning guide.

Do This

Use Design Mode to create all of the screens that your program will need. Don't forget to pick sensible IDs for all of your design elements.

  • Events
  • 5
  • 6
  • (click tabs to see student view)
View on Code Studio

Student Instructions

UI Element Events

Now that all of your screens are designed, you can add any event handlers that will respond to screen interaction. These should be listed in the "Events" section of your activity guide. If you run into new events that you hadn't thought of in the planning stage, make sure you add them to your project guide.

Don't worry about making these completely functional yet. If your events rely on board elements or your own functions, we'll take care of that in later levels.

View on Code Studio

Student Instructions

Board Events

Go back to the Events section of your activity guide and find any events that respond to your board (ones that would use onBoardEvent()). Create event handlers for each of those now. If these events rely on functions you haven't written yet, just leave yourself a comment in the code.

  • Functions
  • 7
  • 8
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Define Your Functions

Define all of your functions at the bottom of the program, under the comment Create your functions here.

Right now we're only worrying about writing the function definitions, the part which looks like:

function myFunction() {
    // Things my function does
}
View on Code Studio

Student Instructions

Calling your Functions

With your functions defined, you can can call them wherever you need. Go through your event handlers, or anywhere else in your program that your function should be used, and add calls to the function you created.

  • Finishing Touches
  • 9
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Finishing Touches and Testing

At this point you should have most of your program in place. Now you need to add whatever finishing touches are needed and do a little testing. When your app is ready, have your classmates try it out. See if you can find any bugs, confusing design choices, or missing features you'd like to work on.

Once you're all done with this version of your program, click Submit to turn it in.

  • Reflection
  • 10
  • (click tabs to see student view)
View on Code Studio

Student Instructions

This level is an assessment or survey with multiple questions. To view this level click the "View on Code Studio" link.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 2-AP-10 - Use flowcharts and/or pseudocode to address complex problems as algorithms.
  • 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
  • 2-AP-12 - Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
  • 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
  • 2-AP-15 - Seek and incorporate feedback from team members and users to refine a solution that meets user needs.
  • 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
  • 2-AP-17 - Systematically test and refine programs using a range of test cases.
  • 2-AP-18 - Distribute tasks and maintain a project timeline when collaboratively developing computational artifacts.
  • 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.
CS - Computing Systems
  • 2-CS-01 - Recommend improvements to the design of computing devices, based on an analysis of how users interact with the devices.
  • 2-CS-02 - Design projects that combine hardware and software components to collect and exchange data.
  • 2-CS-03 - Systematically identify and fix problems with computing devices and their components.