Name(s)_______________________________________________ Period ______ Date ___________________

Hackathon Project Planning Guide

Project Description

For this project you will work with a partner. Together you will create an app that uses a dataset. There are two roles in
this project: designer and programmer. You are both responsible for the overall project, but you will focus on different
parts of the project at any given time. On the last day of the project, you will individually complete a written response
that will help you practice for the Create Performance Task.

You will submit

● Your final app
● This completed project-planning guide
● A written response

App Requirements
● At least three screens
○ All screens can be easily navigated to through the user interface
● A dataset used in a meaningful way towards the programs purpose
● At least one list is traversed using: map, reduce, or filter (indicate which in a comment) in a meaningful way
towards the program's purpose
● Programming constructs: variable(s), function(s), conditional(s), list(s), loop(s)
● All functions include comments that explain their purpose and how they work
● All element IDs have meaningful names
● No errors in the code

Steps
● Collaborate with your partner to pick a dataset
● Decide on an app to build which traverses a list from the dataset
● Create a paper prototype
● Designer:
○ Create the screens
○ Support the programmer with pair programming as needed
● Programmer:
○ Program the app
○ Support the designer as needed.

Investigate Phase

Step 1. Choose a Dataset: Open a project on Code Studio and look through the different datasets available. Choose
one that looks interesting to both you and your partner.

Dataset: __________100 Birds of the World___________________.

What column(s) of data will you use in your app?

● Name
● Scientific Name
● Conservation Status
● Primary Color
● Diet
● Image or Range
● Image of Bird
Computer Science Principles 1
Step 2. Brainstorm an App: Consider the columns of data that you are using. How will your app traverse this data?
Circle one and explain below.
● Filter (most common option): use the list from one column to determine information that will be filtered from a
list created by another column
○ Example: dogHeight filters dogNames, so only the names of small dogs are added to the filtered list
● Map: Add or change each item in a list
○ Example: map a list of numbers pulled from a column using Math.round - now each number is rounded
● Reduce: Reduce the data in a list to a single number
○ Example: find the smallest number in a list

Your app will use (circle): MAP REDUCE FILTER

Explain in more detail: First, we will be filtering the birds by their primary color. Then we will provide information
regarding the bird according to the chosen name on the drop-down.
______________________________________________________________________________________________

______________________________________________________________________________________________

______________________________________________________________________________________________

______________________________________________________________________________________________

______________________________________________________________________________________________

Design Phase

Step 3. Create a Paper Prototype: On the next page you should draw a prototype that shows how your app will
actually run. This means you should include all the buttons, text, and images that the user will be able to use and see.
Write notes or draw arrows showing how different user interface elements should work. For example, if clicking a
button takes me to another screen, I should draw an arrow from that button to the drawing of the screen.

Computer Science Principles 2

Computer Science Principles 3
Step 4. Prepare to Build Your App:

Before you begin to code, fill out the chart below. Add more rows (or use a scrap piece of paper) as needed.

Element IDs

Name Type Notes

nameOutput label Displays the name of the dog on the screen

birdsName data Gets the data from the “Name” column of the 100 Birds of
the world data set.

birdsColor Data Gets the data from the “Primary Color” column of the 100
Birds of the world data set.

sciName Data Gets the data from the “Scientific Name” column of the 100
Birds of the world data set.

id Data Gets the data from the “id” column of the 100 Birds of the
world data set.

Status Data Gets the data from the “Conservation Status” column of the
100 Birds of the world data set.

diet data Gets the data from the “Diet” column of the 100 Birds of the
world data set

pic data Get the data from the “Image of Bird” of the 100 Birds of the
world data set, which contains the address of the picture of
the birds.

range data Get the data from the “Image of Range” of the 100 Birds of
the world data set, which contains the address of the
picture of the range in which the birds exist.

Computer Science Principles 4

Computer Science Principles 5
Computer Science Principles 6
Computer Science Principles 7
 Variable(s)

Computer Science Principles 8

Name Type What it's storing

dogSize list A list of dog sizes pulled from the "Max Height" column

redBirds list A list of birds that have the color red

yellowBirds list List of birds that have color yellow

blueBirds list List of birds that have color blue

blackBirds list List of birds that have color black

whiteBirds list List of birds that have color white

greyBirds list List of birds that have color grey

brownBirds list List of birds that have color brown

greenBirds list List of birds that have color green

pinkBirds list List of birds that have color pink

redId list List of Id of red birds

yellowid list List of id of yellow birds

blueid list List of id of blue birds

blackid list List of id of black birds

whiteid list List of id of white birds

Computer Science Principles 9

greyid list List of id of grey birds

brownid list List of id of brown birds

greenid list List of id of green birds

pinkid list List of id of pink birds

redStatus list List of red conservation status

yellowStatus list List of yellow conservation status

blueStatus list List of blue conservation status

blackSatus list List of black conservation status

whiteStatus list List of white conservation status

greyStatus list List of grey conservation status

brownStatus list List of brown conservation status

greenStatus list List of green conservation status

pinkStatus list List of pink conservation status

redDiet list List of red diet

yellowDiet list List of yellow diet

Computer Science Principles 10

blueDiet list List of blue diet

blackDiet list List of black diet

whiteDiet list List of white diet

greyDiet list List of grey diet

brownDiet list List of brown diet

greenDiet list List of green diet

pinkDiet list List of pink diet

redPic list List of red bird picture

yellowPic list List of yellow bird picture

bluePic list List of blue bird picture

blackPic list List of black bird picture

whitePic list List of white bird picture

greyPic list List of grey bird picture

brownPic list List of brown bird picture

greenPic list List of green bird picture

Computer Science Principles 11

pinkPic list List of pink bird picture

redRange list List of red bird region

yellowPic list List of yellow bird region

bluePic list List of blue bird region

blackPic list List of black bird region

whitePic list List of white bird region

blueRange list List of blue bird region

blackRange list List of black bird region

whiteRange list List of white bird region

greenRange list List of green bird region

greyRange list List of grey bird region

Computer Science Principles 12

brownRange list List of brown bird region

pinkRange list List of pink bird region

Conditional(s)

Boolean Expression (pseudocode is ok) Notes

if dog size is greater than 15, append to a list Inside a for loop that traverses the dogSize list

if ( color == birdscolor[i]) This would filter the colors out into the list of different
specific colors

Loop(s)

For Loop (pseudocode is ok) Notes

for(var i=0; i<dogSize.length; i++) Traverses dogSize list

for (var i = 0; i < birdsName.length;i++) Traverses birdsName list

onEvent(s)

Element ID Action What happens?

“dogButton” “click” A picture of a dog appears

The background of the screen changes to green

“blueoption” “change”’ This is a drop down where you can select the options of the
blue birds.

Computer Science Principles 13

 function(s)

Name Purpose How it works

updateScreen updates what Filters the lists and displays the images and names of dogs
appears on the on the screen.
screen after the user
selects a dog

Build Phase

Step 5: Test Screens: Build a quick version of the screens which includes all elements with their proper element IDs.
Do not worry about design at all. This is purely to allow the programmer the ability to test their code as they go along.

Step 6: Build

Programmers: Use the chart to guide you in adding programming statements to your program.
Designers: Use the chart to guide you in adding screen elements to your program. You can work on a separate
computer from your partner.

● When you have finished screens, your partner should delete the test screens and then import the finished
screens.
● Note: If screens are not deleted before importing the project you will get an error message because element
IDs will be the same. To avoid this, add a blank screen, delete the old project screens, import the finished
screens, and delete the blank screen. Make sure to set your home screen to be the default.

Scoring Guidelines

Written Response (individual) - In the Written Response the student...

Task Point

Describes the purpose of the app /1

Includes a program segment that shows how the initial data has been stored in a list /1

Computer Science Principles 14

Includes a program segment that shows how the data in this list is being processed /1

Identifies the name of the list being processed in this response /1

Identifies what the data contained in this list is representing in the program /1

Explains how the list manages complexity by explaining how this program code would be written differently /1
without using this list.

Includes a program segment that shows a function definition /1

Describes what the function does and how it contributes to the program overall /1

Overall Project (both partners)

Program uses a dataset in a meaningful way towards the program's purpose /1

At least one list is traversed using: map, reduce, or filter (indicate which in comment) in a meaningful way /1
towards the program's purpose

Program contains the following programming constructs that are used in meaningful ways towards the
program's purpose

● variable(s) /1

● function(s) /1

● conditional(s) /1

● list(s) /1

● loop(s) /1

The app has at least three different screens

● screen #1 /1

● screen #2 /1

● screen #3 /1

All screens can be easily navigated to through the user interface /1

All functions include comments that explain purpose and how they work. /1

No errors in the code /1

All element IDs have meaningful names /1

Total /22

Computer Science Principles 15