Lists, Loops, and Traversals - Lesson 14: Project - Hackathon Part 2

Overview

This is the second day of a five-day unit project. Students continue to plan for the project by filling out tables of information on element IDs and programming constructs before each tackling a different role in the project as a designer or a programmer.

Goals

Students will be able to:

• Translate a paper prototype to screens
• Begin programming an app which uses a database

Purpose

Students will demonstrate their app design and programming skills throughout this five day project. In addition, students work with a dataset as this ensures students will be using the types of programming constructs required for the Create Performance Task, which this project is designed as a practice for. Students complete the project by individually filling out a Written Response, modeled after the Create PT.

This project can be used as a unit project, or as an end cap to the first semester of the course.

Resources

• CSP-Widgets repository
• CSP Unit 5 Hackathon Project - Planning Guide

Getting Started (0 minutes)

Do This: Move quickly to the activity portion of the lesson.

Activity (40 minutes)

Hackathon Project

Step 4: Students work with their partners to fill out the tables on pages 4-6 in the Planning Guides. In these tables, students plan out all of the element IDs, functions, variables, conditionals, and loops. This step will help students smoothly transition into the programming phase.

Step 5 (3 mins): On one computer, partners quickly build their screens, to be used by the programmer to test their code. Emphasize that these are NOT the final screens. Students place elements on the screen and give them the agreed upon names from Step 4. The design does not matter here.

Do This: Partners select their primary roles.

• Programmers: Responsible for the majority of the programming. Needs to communicate decisions with the designer.
• Designers: Responsible for the design of the app. Pair programs with the programmer as needed.

Step 6: Students work on building their apps, guided by their roles.

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

Do This: When the designer is ready to share their screens with the programmer, there are specific steps that must be followed after the designer clicks share and copies the link to their app. The programmer:

1. Programmer: Add a blank screen
2. Programmer: Delete the old project screens.
3. Programmer: Click the screen dropdown, then click "Import screen"
4. Designer: Click to share your project. Copy the link and send to the Programmer
5. Programmer: Paste in the link from the designer.
6. Programmer: Select to import all of the screens.
7. Delete the blank screen.
8. Set the home screen to be the default screen (Hint: Go to design mode and click on the screen)

Wrap Up (5 minutes)

Do This: Take some time to answer student questions.

Planning Guide: As an optional completion assessment, you can look at the table in Step 4 of the Planning Guide.

Assessment: Optional

Standards Alignment

• CSTA K-12 Computer Science Standards (2017): 3A-AP-14, 3A-AP-22, 3A-AP-23

Next Tutorial

In the next tutorial, we will discuss Code.Org Unit 5 Lesson 15, which describes Project Day 3.