Overview

This lesson attempts to walk you through the iterative development process of building an app (basically) from scratch that involves the use of if statements.

At the conclusion of the lesson there are three practice Create PT-style questions as well as resources explaining the connection between this lesson and the actual Create PT. Depending on how you use these materials they can easily add an additional day to this lesson.

Vocabulary


Goals

Students will be able to:

Purpose

The purpose here is for students to see how "experts" would approach writing an app from scratch when all you have to start out with is a sketch on paper of some idea. Research has shown that what novices often need is an expert walk-through to explain the rationale behind certain decisions and to see the kinds of problems they anticipate and solve. There are a few key things that happen in this lesson that we hope students see and take to heart:

Note to Teacher

After this lesson students are prepared to complete the AP Create PT. If you have more time in your year you may continue through Unit 5 Chapter 2 before beginning the task. When you decide to begin the task use the materials in the AP Create PT Prep unit to further prepare students. For more details refer to pages 32 and 33 of the CSP Curriculum Guide - Teal Book.

Resources

Getting Started

This game is a walkthrough that will hopefully reinforce the idea of a creative programming process and the need to look up in standard libraries and ask others for help.

Student Instructions

This project is similar to the "Counter Game" in Unit 5 Lesson 5. Except now, all four arrows will allow the users to choose between colors and shapes.

The default screen looks like:

This is the default screen of the game. There are four arrows: up, down, left, and right and a center button. The default shape that is displayed to the user is a blue square above the arrows.

When the user presses up and down arrows, they can select between different colors of the same shape. When the user presses left or right, they can select between different shapes of the same color.

Allow the students to discuss among themselves of what they are worrying about for this project.

The students might mention the following for "Worried about:"

Remind students that almost anything is possible, start with things they know rather than things they're worried about.

Activity

In this Activity, students will create an application that changes a Drawable's shape and its color in response to user's inputs. This project will focus on having students use what they've learned about KeyboardEvents and conditional if-else statements.

Student Instructions

To help you with the project, we have provided a template for you to start with.

Think about something that you already know how to do based on the description.

Because we have gone through adding Drawable objects to the screen we are familiar with how the arrows are built. Given that we want the coordinates of the up arrow to be at (350, 250), (400, 250), and (375, 300), the coordinates of the down arrow to be at (350, 100), (400, 100), and (375, 50), the coordinates of the left arrow to be at (300, 200), (300, 150), and (250, 175), and the coordinates of the right arrow to be at (450, 200), (450, 150), and (500, 175), how would you set up the arrows?

As a reminder the action call for creating a color-filled triangle is:
LoadFilledTriangle(integer x1, integer y1, integer x2, integer y2, integer x3, integer y3, Libraries.Game.Graphics.Color color)

Your task would be to add code that displays the down, left, and right arrows to the screen, all with the color of blue. The up arrow and the center button have been done for you.

Selecting Favorite Color and Shape: Part 1

Remember, you can always find examples in the Quorum Standard Libraries, or use the Standard Libraries to understand the code in the template.


Adding the default shape to the screen

Now, add to the code that you have done so far by adding the default shape to the screen, which is a blue square.

The dimension of the square should be 100 by 100 centered at the coordinate (325, 350)

Think about what actions you can use from the Drawable library in Quorum

To help other people or yourself understand your code, you can use comments as follows:

//here is what I did

Selecting Favorite Color and Shape: Part 2 Adding the Default Shape and Color


Remove the default shape

Using the template below, which includes a template for the action named PressedKey, add the code that you came up with to add the default shape (blue square) and the arrows. Finally, add the line Remove(userChoiceShape) so that when the user presses the left key, the default blue square will disappear.

Finally, add the line Add(userChoiceShape) so that when the user presses the right key, the default shape will appear again.

Selecting Favorite Color and Shape: Part 3 Removing the Default Shape


Speak out the choices

Given the template code below, add the code that you wrote to add the arrows and the default blue square. Then, read the newly added action called sayUserChoices(). Answer the following:

Selecting Favorite Color and Shape: Part 4 Speak User Choices


Allowing the users to change shape and color

Given that we know how to notify the user of their current choice, now, we need to find a way to allow the user to change their choices using the arrow keys.

Think about how you can add to or subtract from the colorCode variable and the shapeCode variables to allow the user to have different choices.

Key things to remember:

Selecting Favorite Color and Shape: Part 5 User Choices


Changing Shape and Color

After you have acknowledged that the user has changed a colors and shapes. Find a way that first changes the userChoiceColor; second, remove the shape that is currently displaying. Finally, change the shape of userChoiceShape and display the right shape. Think about if you have to repeat this process over and over again and what you should do if that is the case.

Think back on how you removed and added the default blue square before as a hint.

Below is the code segment to use to display the desired square at the right location:

userChoiceShape:LoadFilledRectangle(100,100,userChoiceColor)
userChoiceShape:SetPosition(325, 350)

Below is the code segment to use to display the desired rectangle at the right location:

userChoiceShape:LoadFilledRectangle(200,100,userChoiceColor)
userChoiceShape:SetPosition(275, 350)

Below is the code segment to use to display the desired triangle at the right location:

userChoiceShape:LoadFilledTriangle(325, 350, 425, 350, 375,450,userChoiceColor)
userChoiceShape:SetPosition(0,0)

Below is the code segment to use to display the desired circle at the right location:

userChoiceShape:LoadFilledCircle(50,userChoiceColor)
userChoiceShape:SetPosition(325, 350)

Selecting Favorite Color and Shape: Part 6 Displaying User Choices


Final Touches

Add to your existing code the following:

Selecting Favorite Color and Shape: Part 7 Final Touches


Wrap Up

Make sure the students understand the following:

Connections to the AP Create Performance Task

After completing this lesson students will have the minimum skills they need to complete the AP Create PT. Time permitting you should continue through Unit 5 Chapter 2 and get as far as you can before starting the Create PT - the more programming students have under their belts the better.

When you do opt to begin it, students should use the materials in the AP Create PT Unit to prepare.

Assessment

AP Practice - Create PT - Abstraction

Student Instructions

One component of the AP Create Performance Task is describing an abstraction within your program.

Here's one row of the scoring guide for this question

Row 8 of the scoring guide

Using the code selection below (taken from the Color-sound Sleuth Activity), describe how this abstraction manages complexity.



AP Practice - Identify the Algorithm

Student Instructions

One component of the AP Create Performance Task is selecting an algorithm that you developed.

Here's the scoring guide for this question:

Row 4, 5, 6 of the scoring guide

Given the code below, decide which of the choices (A, B, or C) best meets the criteria as a student-developed algorithm. Explain your answer using the criteria in the scoring guide.

Choice A:

action sayUserChoices()
    //say the right color
    if colorCode = 0
        say "blue"
    elseif colorCode = 1
        say "black"
    elseif colorCode = 2
        say "green
    elseif colorCode = 3
        say "red"
    elseif colorCode = 4
        say "pink"
    end
 
    //say the right shape 
    if shapeCode = 0
        say "square"
    elseif shapeCode = 1
        say "rectangle"
    elseif shapeCode = 2
        say "triangle"
    elseif shapeCode = 3
        say "circle"
    end
end

Choice B:

userChoiceShape:LoadFilledRectangle(100,100,userChoiceColor)

Choice C:

action CreateGame
    upArrow:LoadFilledTriangle(350, 250, 400, 250, 375, 300, blue)
    Add(upArrow)
        
    centerButton:LoadFilledRectangle(45, 45, red)
    centerButton:SetCenter(375, 175)
    Add(centerButton)
    AddKeyboardListener(me)
 
    say "Welcome to the Game of Choice."
    say gameInstruction 
    say "The default choice is a blue square."
end


AP Practice - Create PT - Algorithm

Student Instructions

One component of the AP Create Performance Task is selecting an algorithm that you developed.

Here's the scoring guide for this question:

Row 5, 6 of the scoring guide

Given the following program, write response 2c describing the algorithm. Make sure you include:

Standards Alignment