codex-lv3-may-2025

Week 4

Day 1

• Hackathon Planning Sheet
• Hackathon Guide Level 1
• Hackathon on Code.org for data access
• How to import data–Spreadsheets to JSON

Hackathon Overview

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
• No errors in the code

Steps

1. Collaborate with your partner to pick a dataset
2. Decide on an app to build which traverses a list from the dataset
3. Create a paper prototype
4. Designer:
   • Create the screens * Support the programmer with pair programming as needed
5. Programmer:
   • Program the app
   • Support the designer as needed.

List brainstorm

Choose at least one traversal method to use in your app

• MAP (do one thing to every item in the list)
• REDUCE (summarize something about this list into a single number or string)
• FILTER (select only a few elements out of a list)

Design Phase

With a Partner, Create a Paper Prototype: 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.

Day 2

• Activity Guide - Multi-Page React and Git Collaboration
• Learn how to create “Pages” in React with useState and Components (simple)
• Demo on how to create “Pages”
• Learn how to create a “branch” in git
• Breakout Rooms
• Demo code from today GitHub
  • main branch
  • feature branch

Day 3

Task: Code.org Lessons 11 and Lesson 12.

Review:

• Lesson 10-Level 2: https://studio.code.org/courses/csp-2025/units/6/lessons/10/levels/2
• Video: https://youtu.be/H8bYdVsTX0A?si=ssntObr3U_ieH95Y&t=1495

Day 4

Hackathon

Please complete the code.org Lessons 11 and 12 before working on the Hackathon project.

• Demo of filter list in React code
• Note: if you are not working in a group, you may fork my starter code for a multi-screen app here

Day 5

Complete work on Hackathon

---

Week Summary

Assignments Overview

1. Day 1-2: Non-graded practice material
   • Day 1: Hackathon planning, dataset selection, paper prototyping
   • Day 2: Multi-page React and Git collaboration practice
2. Day 3: Graded Code.org assignment
   • Code.org Lessons 11-12 (list traversals)
3. Day 4-5: Graded mini-project
   • React Hackathon - Data-Driven App (multi-screen app with dataset)