Created
July 26, 2026 19:16
-
-
Save dnkm/58ae00ffd282313c392140b75fcf5df9 to your computer and use it in GitHub Desktop.
2026 Congressional App Challenge
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Btree × CAC Kickoff — Slide Deck</title> | |
| <style> | |
| :root { | |
| --ink: #12324a; | |
| --ink-soft: #54708a; | |
| --ink-faint: #738da6; | |
| --paper: #f7fbff; | |
| --surface: #ffffff; | |
| --line: #dcecf5; | |
| --accent: #30cbff; | |
| --accent-strong: #31b1ff; | |
| --accent-soft: #eaf8ff; | |
| --warm: #ff8f5c; | |
| --warm-soft: #fff2e8; | |
| --font-display: | |
| ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif; | |
| --font-mono: | |
| ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, | |
| Consolas, monospace; | |
| --font-body: | |
| -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | |
| "Helvetica Neue", Arial, sans-serif; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| overflow: hidden; | |
| background: var(--paper); | |
| } | |
| body { | |
| font-family: var(--font-body); | |
| color: var(--ink); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .deck { | |
| position: relative; | |
| width: 100vw; | |
| height: 100vh; | |
| } | |
| .slide { | |
| position: absolute; | |
| inset: 0; | |
| display: none; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: clamp(2rem, 6vw, 6rem) clamp(2rem, 8vw, 9rem); | |
| background: linear-gradient( | |
| 145deg, | |
| rgba(255, 255, 255, 0.98), | |
| rgba(248, 252, 255, 0.96) | |
| ); | |
| } | |
| .slide.active { | |
| display: flex; | |
| } | |
| .slide::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| opacity: 0.75; | |
| background: | |
| radial-gradient( | |
| 680px 480px at 88% 10%, | |
| rgba(49, 177, 255, 0.1), | |
| transparent 60% | |
| ), | |
| radial-gradient( | |
| 560px 420px at 8% 92%, | |
| rgba(48, 203, 255, 0.08), | |
| transparent 60% | |
| ); | |
| } | |
| .eyebrow { | |
| font-family: var(--font-mono); | |
| font-size: clamp(0.72rem, 1vw, 0.85rem); | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--accent-strong); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| margin-bottom: 1rem; | |
| z-index: 1; | |
| } | |
| .eyebrow .dash { | |
| width: 1.4rem; | |
| height: 1px; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-strong)); | |
| display: inline-block; | |
| } | |
| h1.headline { | |
| font-family: var(--font-display); | |
| font-weight: 600; | |
| text-wrap: balance; | |
| font-size: clamp(2.1rem, 4.6vw, 4rem); | |
| line-height: 1.08; | |
| margin: 0 0 1rem; | |
| z-index: 1; | |
| } | |
| h1.headline .accent { | |
| color: var(--accent-strong); | |
| } | |
| h1.headline .warm { | |
| color: var(--warm); | |
| } | |
| .lede { | |
| font-size: clamp(1.05rem, 1.6vw, 1.4rem); | |
| color: var(--ink-soft); | |
| max-width: 62ch; | |
| margin: 0 0 1.5rem; | |
| z-index: 1; | |
| } | |
| .bullets { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0.5rem 0 0; | |
| display: grid; | |
| gap: 0.85rem; | |
| max-width: 68ch; | |
| z-index: 1; | |
| } | |
| .bullets li { | |
| position: relative; | |
| padding-left: 1.6rem; | |
| font-size: clamp(1rem, 1.5vw, 1.25rem); | |
| line-height: 1.45; | |
| } | |
| .bullets li::before { | |
| content: "—"; | |
| position: absolute; | |
| left: 0; | |
| color: var(--accent); | |
| font-family: var(--font-mono); | |
| } | |
| .bullets.warm li::before { | |
| color: var(--warm); | |
| } | |
| .bullets li b { | |
| color: var(--ink); | |
| font-weight: 600; | |
| } | |
| .grid2 { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2.5rem; | |
| z-index: 1; | |
| align-items: start; | |
| } | |
| .grid3 { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1.5rem; | |
| z-index: 1; | |
| } | |
| .grid4 { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1.25rem; | |
| z-index: 1; | |
| } | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 1.4rem 1.5rem; | |
| box-shadow: 0 10px 35px rgba(18, 50, 74, 0.06); | |
| } | |
| .card h3 { | |
| font-family: var(--font-display); | |
| font-size: 1.15rem; | |
| margin: 0 0 0.5rem; | |
| } | |
| .card p { | |
| margin: 0; | |
| color: var(--ink-soft); | |
| font-size: 0.95rem; | |
| line-height: 1.5; | |
| } | |
| .card .tag { | |
| display: inline-block; | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| color: var(--accent-strong); | |
| background: var(--accent-soft); | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 6px; | |
| margin-bottom: 0.6rem; | |
| } | |
| .stat { | |
| font-family: var(--font-display); | |
| font-size: clamp(2.4rem, 6vw, 5rem); | |
| color: var(--accent-strong); | |
| line-height: 1; | |
| z-index: 1; | |
| } | |
| .stat-label { | |
| font-family: var(--font-mono); | |
| font-size: 0.85rem; | |
| color: var(--ink-faint); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| margin-top: 0.5rem; | |
| z-index: 1; | |
| } | |
| .countdown { | |
| z-index: 1; | |
| } | |
| .countdown-row { | |
| display: flex; | |
| gap: 1.4rem; | |
| } | |
| .countdown-unit { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .countdown-num { | |
| font-family: var(--font-display); | |
| font-size: clamp(2rem, 5vw, 3.6rem); | |
| color: var(--accent-strong); | |
| line-height: 1; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .countdown-label { | |
| font-family: var(--font-mono); | |
| font-size: 0.75rem; | |
| color: var(--ink-faint); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| margin-top: 0.4rem; | |
| } | |
| .countdown-caption { | |
| font-family: var(--font-mono); | |
| font-size: 0.9rem; | |
| color: var(--ink-soft); | |
| margin-top: 0.9rem; | |
| } | |
| .game-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| color: var(--accent-strong); | |
| background: var(--accent-soft); | |
| border: 1px solid rgba(49, 177, 255, 0.35); | |
| padding: 0.3rem 0.7rem; | |
| border-radius: 999px; | |
| margin-bottom: 1rem; | |
| width: fit-content; | |
| z-index: 1; | |
| } | |
| .game-badge.reveal { | |
| color: #1f8a4d; | |
| background: #eafaf0; | |
| border-color: rgba(31, 138, 77, 0.35); | |
| } | |
| @keyframes revealPop { | |
| 0% { | |
| opacity: 0; | |
| transform: scale(0.85) translateY(8px); | |
| } | |
| 60% { | |
| opacity: 1; | |
| transform: scale(1.03) translateY(0); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1) translateY(0); | |
| } | |
| } | |
| .slide.active .reveal-pop { | |
| animation: revealPop 0.5s ease-out; | |
| } | |
| .slide.title { | |
| align-items: flex-start; | |
| justify-content: center; | |
| } | |
| .slide.title .brandmark { | |
| font-family: var(--font-mono); | |
| font-size: 0.95rem; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--accent-strong); | |
| margin-bottom: 2rem; | |
| z-index: 1; | |
| } | |
| .slide.title h1 { | |
| font-size: clamp(2.6rem, 7vw, 5.6rem); | |
| } | |
| .slide.title .lede { | |
| font-size: clamp(1.15rem, 2vw, 1.6rem); | |
| } | |
| .slide.divider { | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .slide.divider .eyebrow { | |
| justify-content: center; | |
| } | |
| .slide.divider .num { | |
| font-family: var(--font-mono); | |
| color: var(--ink-faint); | |
| font-size: 1rem; | |
| margin-bottom: 0.75rem; | |
| z-index: 1; | |
| } | |
| .slide.divider h1 { | |
| font-size: clamp(2.4rem, 6vw, 5rem); | |
| max-width: 20ch; | |
| } | |
| .slide.divider .lede { | |
| margin-left: auto; | |
| margin-right: auto; | |
| text-align: center; | |
| } | |
| .foot { | |
| position: absolute; | |
| left: clamp(2rem, 8vw, 9rem); | |
| right: clamp(2rem, 8vw, 9rem); | |
| bottom: 1.4rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: var(--font-mono); | |
| font-size: 0.72rem; | |
| color: var(--ink-faint); | |
| z-index: 2; | |
| } | |
| .foot .prog-track { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| height: 3px; | |
| background: var(--line); | |
| z-index: 3; | |
| } | |
| .foot .prog-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-strong)); | |
| width: 0%; | |
| transition: width 0.25s ease; | |
| } | |
| .navbtn { | |
| position: fixed; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| z-index: 4; | |
| width: 2.6rem; | |
| height: 2.6rem; | |
| border-radius: 50%; | |
| border: 1px solid var(--line); | |
| background: rgba(255, 255, 255, 0.9); | |
| color: var(--ink-soft); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.1rem; | |
| backdrop-filter: blur(6px); | |
| } | |
| .navbtn:hover { | |
| color: var(--accent-strong); | |
| border-color: var(--accent); | |
| } | |
| .navbtn:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| .navbtn.prev { | |
| left: 1rem; | |
| } | |
| .navbtn.next { | |
| right: 1rem; | |
| } | |
| .hint { | |
| position: fixed; | |
| top: 1rem; | |
| right: 1rem; | |
| z-index: 4; | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| color: var(--ink-faint); | |
| background: rgba(255, 255, 255, 0.9); | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 0.35rem 0.6rem; | |
| backdrop-filter: blur(6px); | |
| } | |
| canvas.branch-bg { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.35; | |
| z-index: 0; | |
| } | |
| .rubric-tag { | |
| font-family: var(--font-mono); | |
| font-size: 0.7rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.03em; | |
| color: var(--warm); | |
| } | |
| .pdf-shell { | |
| margin-top: 1rem; | |
| max-width: 100%; | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| background: var(--surface); | |
| box-shadow: 0 12px 35px rgba(18, 50, 74, 0.08); | |
| } | |
| .pdf-embed { | |
| width: min(100%, 940px); | |
| min-height: 56vh; | |
| border: 0; | |
| display: block; | |
| background: #fff; | |
| } | |
| .pdf-fallback { | |
| padding: 1.4rem; | |
| color: var(--ink-soft); | |
| line-height: 1.6; | |
| } | |
| .pdf-fallback a { | |
| color: var(--accent-strong); | |
| font-weight: 600; | |
| } | |
| @media (max-width: 720px) { | |
| .grid2, | |
| .grid3, | |
| .grid4 { | |
| grid-template-columns: 1fr; | |
| } | |
| .navbtn { | |
| width: 2.2rem; | |
| height: 2.2rem; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| * { | |
| animation: none !important; | |
| transition: none !important; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="deck" id="deck"> | |
| <!-- 1 --> | |
| <section class="slide title active"> | |
| <canvas class="branch-bg" data-branch></canvas> | |
| <div class="brandmark">Btree · Congressional App Challenge</div> | |
| <h1 class="headline">Kickoff <span class="accent">Workshop</span></h1> | |
| <div class="countdown" id="deadlineCountdown" aria-live="off"> | |
| <div class="countdown-row"> | |
| <div class="countdown-unit"> | |
| <span class="countdown-num" data-cd="d">00</span> | |
| <span class="countdown-label">Days</span> | |
| </div> | |
| <div class="countdown-unit"> | |
| <span class="countdown-num" data-cd="h">00</span> | |
| <span class="countdown-label">Hours</span> | |
| </div> | |
| <div class="countdown-unit"> | |
| <span class="countdown-num" data-cd="m">00</span> | |
| <span class="countdown-label">Min</span> | |
| </div> | |
| <div class="countdown-unit"> | |
| <span class="countdown-num" data-cd="s">00</span> | |
| <span class="countdown-label">Sec</span> | |
| </div> | |
| </div> | |
| <div class="countdown-caption"> | |
| until the Oct 26 CAC submission deadline | |
| </div> | |
| </div> | |
| <!-- Speaker notes: Welcome students as they settle in. This slide can sit on screen during arrival — no need to talk over it immediately. --> | |
| </section> | |
| <!-- 2 --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Today</div> | |
| <h1 class="headline">One goal for the next 3 hours</h1> | |
| <p class="lede"> | |
| You will leave with a written problem worth solving, a scoped MVP, a | |
| tech direction — and you'll know exactly how you're judged and what | |
| support you get from here. | |
| </p> | |
| <ul class="bullets"> | |
| <li> | |
| <b>Not</b> today's goal: finished code. That comes with your mentor | |
| over the next several weeks. | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: Set expectations early so nobody panics about not having "built" anything by the end of today. --> | |
| </section> | |
| <!-- inserted: building vs consuming --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Before we start</div> | |
| <h1 class="headline"> | |
| You have the power to <span class="accent">build</span> technology — | |
| not just consume it | |
| </h1> | |
| <div class="grid2"> | |
| <div class="card"> | |
| <span class="tag">Consuming</span> | |
| <h3>Scrolling, swiping, watching</h3> | |
| <p> | |
| Feeds, filters, likes — technology built by someone else, for you | |
| to use. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">Building</span> | |
| <h3>Shipping something real</h3> | |
| <p> | |
| Code you write, deployed, solving a problem for an actual person. | |
| </p> | |
| </div> | |
| </div> | |
| <ul class="bullets" style="margin-top: 1.5rem"> | |
| <li> | |
| Over <b>30%</b> of CAC participants start as absolute beginners — | |
| you just need a problem worth solving. | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: Good energizer before the roadmap — nobody in the room needs to already be "a coder" to belong here. --> | |
| </section> | |
| <!-- 3 --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Roadmap</div> | |
| <h1 class="headline">How we'll spend 3 hours</h1> | |
| <div class="grid3"> | |
| <div class="card"> | |
| <span class="tag">0:00–0:50</span> | |
| <h3>Understand & get inspired</h3> | |
| <p>What CAC is, how it's judged, and six real winning projects.</p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">1:00–2:05</span> | |
| <h3>Find your idea</h3> | |
| <p> | |
| A real problem, a realistic MVP, the right tech to build it with. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">2:15–3:00</span> | |
| <h3>Plan & get feedback</h3> | |
| <p>Btree's mentorship process, then 1:1 time with an instructor.</p> | |
| </div> | |
| </div> | |
| <!-- Speaker notes: Two 10-minute breaks are built in — after case studies and after the tech segment. --> | |
| </section> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Workshop materials</div> | |
| <h1 class="headline">The handout and planning guide</h1> | |
| <p class="lede"> | |
| This slide now includes the PDF resource so the deck can double as a | |
| live handout during the session. | |
| </p> | |
| <div class="pdf-shell"> | |
| <object | |
| class="pdf-embed" | |
| data="./workshop-plan.pdf" | |
| type="application/pdf" | |
| > | |
| <div class="pdf-fallback"> | |
| <p> | |
| The PDF is not present yet in this folder, so the deck shows a | |
| fallback message. | |
| </p> | |
| <p> | |
| If you add the PDF later, it will appear here automatically. For | |
| now, you can open the planning page instead: | |
| <a href="./workshop-plan.html">workshop plan</a>. | |
| </p> | |
| </div> | |
| </object> | |
| </div> | |
| <!-- Speaker notes: Use this slide to point people to the workshop PDF or handout if they need a reference during the event. --> | |
| </section> | |
| <!-- 4 divider --> | |
| <section class="slide divider"> | |
| <canvas class="branch-bg" data-branch></canvas> | |
| <div class="num">Part One</div> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Understanding the challenge | |
| </div> | |
| <h1 class="headline"> | |
| What is the <span class="accent">Congressional App Challenge?</span> | |
| </h1> | |
| </section> | |
| <!-- 5 --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>The basics</div> | |
| <h1 class="headline">Not a class project — a real competition</h1> | |
| <ul class="bullets"> | |
| <li> | |
| Hosted <b>district by district</b> by your own Member of Congress | |
| </li> | |
| <li> | |
| Winning apps get featured on <b>House.gov</b> and displayed in the | |
| <b>U.S. Capitol</b> | |
| </li> | |
| <li> | |
| Open topic, open platform, open programming language — genuinely | |
| open | |
| </li> | |
| <li>Solo entries welcome, or teams of up to <b>4 students</b></li> | |
| </ul> | |
| <!-- Speaker notes: Emphasize the stakes are real and external — this is bigger than a grade. --> | |
| </section> | |
| <!-- inserted: scale stats --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Scale</div> | |
| <h1 class="headline">You're joining a national movement</h1> | |
| <div class="grid2"> | |
| <div> | |
| <div class="stat">50,000+</div> | |
| <div class="stat-label">Students have participated nationwide</div> | |
| </div> | |
| <div> | |
| <div class="stat">50</div> | |
| <div class="stat-label">States & territories represented</div> | |
| </div> | |
| </div> | |
| <!-- Speaker notes: Use this to make the competition feel real and large, not like a niche local thing. --> | |
| </section> | |
| <!-- inserted: any topic/platform/language --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Genuinely open</div> | |
| <h1 class="headline">Any topic. Any platform. Any language.</h1> | |
| <div class="grid3"> | |
| <div class="card"> | |
| <span class="tag">Topic</span> | |
| <h3>Complete creative freedom</h3> | |
| <p> | |
| There's no required theme — pick whatever problem matters to you. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">Platform</span> | |
| <h3>Web, mobile, AR/VR, wearables</h3> | |
| <p>Embedded systems and robots count too.</p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">Language</span> | |
| <h3>C++, Java, Python, Swift, block-based, Luau</h3> | |
| <p>Scratch and Roblox Studio are fair game.</p> | |
| </div> | |
| </div> | |
| <!-- Speaker notes: Reassure students who only know Scratch or block-based tools — that counts as real code here. --> | |
| </section> | |
| <!-- 6 --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Key dates & eligibility | |
| </div> | |
| <h1 class="headline">Mark this date</h1> | |
| <div class="stat">Oct 26, 2026</div> | |
| <div class="stat-label">12:00pm ET — official submission deadline</div> | |
| <ul class="bullets" style="margin-top: 2rem"> | |
| <li>Must be enrolled in middle or high school as of that date</li> | |
| <li> | |
| Compete in the district where you <b>live</b> or where you | |
| <b>go to school</b> — pick just one | |
| </li> | |
| <li> | |
| Teams: at least <b>half</b> must live or attend school in the | |
| district you compete in | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: Say this out loud clearly and point to the printed/on-screen date again later in the mentorship section. --> | |
| </section> | |
| <!-- inserted: prizes --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>What's on the line</div> | |
| <h1 class="headline">The prizes</h1> | |
| <div class="grid4"> | |
| <div class="card"> | |
| <h3>The Capitol Display</h3> | |
| <p>Your app displayed in the U.S. Capitol for a year.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Digital Recognition</h3> | |
| <p>Featured on House.gov.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>#HouseOfCode</h3> | |
| <p> | |
| Invited to the national tech fair in D.C. to pitch to Congress. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <h3>ARTS Act</h3> | |
| <p>A copyright fee waiver for your IP.</p> | |
| </div> | |
| </div> | |
| <!-- Speaker notes: The ARTS Act line is easy to gloss over but is a genuine, unusual perk — worth a beat. --> | |
| </section> | |
| <!-- 7 --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>What you submit</div> | |
| <h1 class="headline">Two things, at the end</h1> | |
| <div class="grid2"> | |
| <div class="card"> | |
| <span class="tag">Max 3 min · public link</span> | |
| <h3>Public demo video</h3> | |
| <p> | |
| Names, app name, one clear sentence on purpose, your audience, | |
| tools used, and the app actually working. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">Written answers</span> | |
| <h3>Six short questions</h3> | |
| <p> | |
| Title, purpose, inspiration, a technical challenge you solved, | |
| your biggest takeaway, and what "2.0" would change. | |
| </p> | |
| </div> | |
| </div> | |
| <ul class="bullets" style="margin-top: 1.25rem"> | |
| <li> | |
| <b>0:00</b> names & app title → <b>0:30</b> purpose & | |
| audience → <b>1:00</b> tech used → <b>1:30–3:00</b> live demo | |
| </li> | |
| <li class="rubric-tag"> | |
| Must be set to "Public" on YouTube or Vimeo — unlisted or private | |
| won't count | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: This is far less scary than "build a finished product" — a focused answer to each question is enough. --> | |
| </section> | |
| <!-- 8 --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>How you're judged</div> | |
| <h1 class="headline">Three official criteria</h1> | |
| <div class="grid3"> | |
| <div class="card"> | |
| <span class="tag">01</span> | |
| <h3>Quality of the idea</h3> | |
| <p> | |
| Creativity and originality. Does it solve something specific and | |
| real? | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">02</span> | |
| <h3>Implementation</h3> | |
| <p>User experience and design. Is it usable, is it thoughtful?</p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">03</span> | |
| <h3>Coding excellence</h3> | |
| <p> | |
| Demonstrated programming skill. Judges can request your source | |
| code. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Speaker notes: It has to be real, and you have to be able to explain it — that line will come back in Part Two. --> | |
| </section> | |
| <!-- 9 --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Read this carefully</div> | |
| <h1 class="headline"> | |
| The official <span class="accent">AI rule</span> | |
| </h1> | |
| <p class="lede"> | |
| "The use of AI tools in app development is permitted, provided that | |
| all AI usage is fully disclosed... AI may only be used to support | |
| specific aspects of the project and must not constitute the entirety | |
| of the technical development. Participants are expected to demonstrate | |
| significant individual contributions and technical understanding." | |
| </p> | |
| <ul class="bullets warm"> | |
| <li>Disclose it. Understand it. Be able to explain it.</li> | |
| </ul> | |
| <!-- Speaker notes: Quoted directly from the 2026 official rules. This is the exact rule we'll build our whole AI-assisted coding philosophy around in Part Two. --> | |
| </section> | |
| <!-- inserted: fun game vs game with purpose --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Same skill, different impact | |
| </div> | |
| <h1 class="headline"> | |
| A fun game vs. <span class="accent">a game with purpose</span> | |
| </h1> | |
| <div class="grid2"> | |
| <div class="card"> | |
| <span class="tag">Distraction</span> | |
| <h3>A fun game</h3> | |
| <p> | |
| A basic platformer. A 2D side-scroller. Fun to build, hard to | |
| defend to a judge. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">Real-world impact</span> | |
| <h3>A game with purpose</h3> | |
| <p> | |
| Gamified mental health exercises. A community recycling tracker. | |
| Same skills, aimed at someone real. | |
| </p> | |
| </div> | |
| </div> | |
| <p class="lede" style="margin-top: 1.5rem"> | |
| Judges are looking for apps that solve real-world problems and create | |
| positive social impact — the mechanic matters less than who it's for. | |
| </p> | |
| <!-- Speaker notes: Good moment to remind students that "fun" and "meaningful" aren't opposites — they just need a target user. --> | |
| </section> | |
| <!-- 10 divider --> | |
| <section class="slide divider"> | |
| <canvas class="branch-bg" data-branch></canvas> | |
| <div class="num">Part One, continued</div> | |
| <div class="eyebrow"><span class="dash"></span>Get inspired</div> | |
| <h1 class="headline"> | |
| What <span class="accent">winning</span> looks like | |
| </h1> | |
| <p class="lede"> | |
| Nine real problems from the 2025 Congressional App Challenge. We'll | |
| show you the problem — you guess the app — then we reveal it. | |
| </p> | |
| </section> | |
| <!-- 11a problem --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Guess the app · Arcadia, CA</div> | |
| <div class="game-badge">🎮 What would you build?</div> | |
| <h1 class="headline"> | |
| A student's family nearly has to evacuate a wildfire — with almost | |
| no warning. | |
| </h1> | |
| <p class="lede"> | |
| Built by Anika Jha after her own family's close call during the | |
| January 2025 wildfires. What would you build for families like | |
| hers? | |
| </p> | |
| <!-- Speaker notes: Read the scenario, then pause — let the room shout out guesses before you advance to the reveal. --> | |
| </section> | |
| <!-- 11b reveal --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>The build · 2025 winner · Arcadia, CA | |
| </div> | |
| <div class="game-badge reveal">✅ Revealed</div> | |
| <h1 class="headline reveal-pop">Fire Up</h1> | |
| <p class="lede"> | |
| AI-powered wildfire prediction, live detection, and evacuation | |
| planning. | |
| </p> | |
| <ul class="bullets"> | |
| <li> | |
| <span class="rubric-tag">Leans on:</span> | |
| <b>Quality of the idea</b> — personal, urgent, and the AI is | |
| load-bearing, not decorative. | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: Good example of AI used correctly per the disclosure rule — it's core to the function, and she can clearly explain what it does. --> | |
| </section> | |
| <!-- 12a problem --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Guess the app · NY-3</div> | |
| <div class="game-badge">🎮 What would you build?</div> | |
| <h1 class="headline"> | |
| Underinsured people across all 50 states can't find affordable | |
| healthcare that's personalized to them. | |
| </h1> | |
| <p class="lede"> | |
| It needs to account for household size, income, and location — and | |
| reach people in at least 15 different languages. What would you | |
| build? | |
| </p> | |
| <!-- Speaker notes: Emphasize the scale (50 states, 15 languages) before revealing — that's the ambitious part. --> | |
| </section> | |
| <!-- 12b reveal --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>The build · 2025 winner · NY-3</div> | |
| <div class="game-badge reveal">✅ Revealed</div> | |
| <h1 class="headline reveal-pop">HealthBridge</h1> | |
| <p class="lede"> | |
| Connects underinsured people to affordable healthcare, clinics, and | |
| insurance info — personalized by household size, income, and location. | |
| Built for all 50 states, in 15 languages. | |
| </p> | |
| <ul class="bullets"> | |
| <li> | |
| <span class="rubric-tag">Leans on:</span> <b>Implementation</b> — | |
| real personalization and accessibility choices, not just a feature | |
| list. | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: Ambitious scope, but the personalization logic is what makes it feel implemented rather than just informational. --> | |
| </section> | |
| <!-- 13a problem --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Guess the app · Haslett, MI | |
| </div> | |
| <div class="game-badge">🎮 What would you build?</div> | |
| <h1 class="headline"> | |
| Almost nobody understands how their own voting district lines get | |
| drawn. | |
| </h1> | |
| <p class="lede"> | |
| Built by Ishaan Mahapatra to make legislative redistricting click | |
| for regular people. What would you build to teach it? | |
| </p> | |
| <!-- Speaker notes: This is the "games/interactive" tech route applied to civics — flag that connection after the reveal. --> | |
| </section> | |
| <!-- 13b reveal --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>The build · 2025 winner · Haslett, MI | |
| </div> | |
| <div class="game-badge reveal">✅ Revealed</div> | |
| <h1 class="headline reveal-pop">FairMaps: Geometry of Democracy</h1> | |
| <p class="lede"> | |
| Teaches legislative redistricting and lets users draw their own | |
| hypothetical district maps. | |
| </p> | |
| <ul class="bullets"> | |
| <li> | |
| <span class="rubric-tag">Leans on:</span> <b>Coding excellence</b> — | |
| interactive mapping and geometry logic, wrapped in a genuinely | |
| creative civics-education angle. | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: Nice example of "games/interactive" tech route applied to a civic problem, which we'll revisit in the tech-choice segment. --> | |
| </section> | |
| <!-- 14a problem --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Guess the app · 2025 winner</div> | |
| <div class="game-badge">🎮 What would you build?</div> | |
| <h1 class="headline"> | |
| Dialysis patients have to guess which everyday foods are safe for | |
| their phosphate levels. | |
| </h1> | |
| <p class="lede"> | |
| Built by Mikyal Mobeen for one specific group with one specific | |
| daily struggle. What would you build for them? | |
| </p> | |
| <!-- Speaker notes: Callback this one later in the MVP segment — flag its narrowness now, before the reveal. --> | |
| </section> | |
| <!-- 14b reveal --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>The build · 2025 winner</div> | |
| <div class="game-badge reveal">✅ Revealed</div> | |
| <h1 class="headline reveal-pop">PhosTrack</h1> | |
| <p class="lede"> | |
| A quiz-style app helping dialysis patients identify phosphate levels | |
| in everyday foods, with a journal to track symptoms. | |
| </p> | |
| <ul class="bullets"> | |
| <li> | |
| <span class="rubric-tag">Leans on:</span> | |
| <b>Quality of the idea</b> — narrow, specific, and solves one real | |
| thing for one real group of people. | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: Callback this one later in the MVP segment — it's a great "small and complete beats big and broken" example. --> | |
| </section> | |
| <!-- 15a problem --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Guess the app · Camas, WA | |
| </div> | |
| <div class="game-badge">🎮 What would you build?</div> | |
| <h1 class="headline"> | |
| Most people have no easy way to screen their own cancer risk or | |
| find resources they can trust. | |
| </h1> | |
| <p class="lede"> | |
| Built by a team of three Camas High School students. What would you | |
| build? | |
| </p> | |
| <!-- Speaker notes: Good moment to note this is a team project, before revealing — set up the teaming discussion. --> | |
| </section> | |
| <!-- 15b reveal --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>The build · 2025 winner · Camas, WA | |
| </div> | |
| <div class="game-badge reveal">✅ Revealed</div> | |
| <h1 class="headline reveal-pop">CanScreen</h1> | |
| <p class="lede"> | |
| Helps users screen for cancer risk and explore educational | |
| resources. | |
| </p> | |
| <ul class="bullets"> | |
| <li> | |
| <span class="rubric-tag">Leans on:</span> <b>Implementation</b> — a | |
| team project that balances breadth of resources with a usable | |
| interface. | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: Good example to reference if students are considering teaming up. --> | |
| </section> | |
| <!-- 16a problem --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Guess the app · Blue Valley West, KS | |
| </div> | |
| <div class="game-badge">🎮 What would you build?</div> | |
| <h1 class="headline"> | |
| Students spend hours a day inside Canvas — and the experience still | |
| has real friction. | |
| </h1> | |
| <p class="lede"> | |
| Built by twelfth-grader Drake Semchyshyn, who chose to build on top | |
| of a platform students already live in rather than starting from | |
| scratch. What would you build? | |
| </p> | |
| <!-- Speaker notes: Set up the "best platform isn't always brand-new" point before the reveal lands it. --> | |
| </section> | |
| <!-- 16b reveal --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>The build · 2025 winner · Blue Valley West, KS | |
| </div> | |
| <div class="game-badge reveal">✅ Revealed</div> | |
| <h1 class="headline reveal-pop">Catalyst</h1> | |
| <p class="lede"> | |
| Improves the student academic experience inside Canvas, the learning | |
| management system most students already use. | |
| </p> | |
| <ul class="bullets"> | |
| <li> | |
| <span class="rubric-tag">Leans on:</span> <b>Coding excellence</b> — | |
| integrating with an existing platform is technically nontrivial, and | |
| it's a smart choice of "where users already are." | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: Great example that the best platform isn't always a brand-new app — sometimes it's an integration. --> | |
| </section> | |
| <!-- inserted: mental moji / computerpreter problem --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Guess the apps · 2025 winners</div> | |
| <div class="game-badge">🎮 What would you build?</div> | |
| <h1 class="headline">Two real gaps, two very different builds</h1> | |
| <div class="grid2"> | |
| <div class="card"> | |
| <span class="tag">MS-02</span> | |
| <h3>Problem 1</h3> | |
| <p> | |
| Students battling mental health challenges without access to | |
| safe spaces. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">UT-01</span> | |
| <h3>Problem 2</h3> | |
| <p>Communication barriers between Deaf and hearing communities.</p> | |
| </div> | |
| </div> | |
| <!-- Speaker notes: Let the room guess both before advancing — mental health and accessibility are rich, underused seed categories worth calling out either way. --> | |
| </section> | |
| <!-- inserted: mental moji / computerpreter reveal --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>The builds · 2025 winners</div> | |
| <div class="game-badge reveal">✅ Revealed</div> | |
| <h1 class="headline reveal-pop">Mental Moji & Computerpreter</h1> | |
| <div class="grid2"> | |
| <div class="card"> | |
| <span class="tag">MS-02</span> | |
| <h3>Mental Moji</h3> | |
| <p> | |
| A digital wellness platform with mood tracking, guided | |
| meditations, and sentiment-analyzed journaling. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">UT-01</span> | |
| <h3>Computerpreter</h3> | |
| <p> | |
| Real-time ASL-to-English translation using a Random Forest | |
| classifier and neural networks on live camera input. | |
| </p> | |
| </div> | |
| </div> | |
| <ul class="bullets" style="margin-top: 1rem"> | |
| <li> | |
| <span class="rubric-tag">Leans on:</span> | |
| <b>Coding excellence</b> — both pair a real accessibility gap with | |
| genuine machine learning, not just a UI wrapper. | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: Good pairing to show mental health and accessibility as rich, underused seed categories. --> | |
| </section> | |
| <!-- inserted: cofis problem --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Guess the app · IA-01</div> | |
| <div class="game-badge">🎮 What would you build?</div> | |
| <h1 class="headline"> | |
| Flood planners need scenario-based damage estimates — but expensive | |
| GIS software puts that out of reach. | |
| </h1> | |
| <p class="lede"> | |
| It would need to cover 2.7 million U.S. river reaches and run | |
| entirely in a browser. What would you build? | |
| </p> | |
| <!-- Speaker notes: Flag "runs in-browser, no GIS license" as the hook before revealing the WebAssembly detail. --> | |
| </section> | |
| <!-- inserted: cofis reveal --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>The build · 2025 winner · IA-01</div> | |
| <div class="game-badge reveal">✅ Revealed</div> | |
| <h1 class="headline reveal-pop">CoFIS</h1> | |
| <p class="lede"> | |
| The Community-Oriented Flood Information System lets planners view | |
| scenario-based flood damage estimates for 2.7 million U.S. river | |
| reaches — without expensive GIS software. | |
| </p> | |
| <ul class="bullets"> | |
| <li> | |
| Synthesizes live data from NOAA, FEMA, and USGS directly in the | |
| browser using WebAssembly | |
| </li> | |
| <li> | |
| <span class="rubric-tag">Leans on:</span> | |
| <b>Coding excellence</b> — serious data engineering in service of a | |
| genuinely civic problem. | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: Nice example that "AI/ML" isn't the only route to a technically impressive build — data engineering counts too. --> | |
| </section> | |
| <!-- 17 pattern --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>The pattern</div> | |
| <h1 class="headline"> | |
| Every one of these solved <span class="accent">one</span> specific | |
| problem | |
| </h1> | |
| <p class="lede"> | |
| Not "fix healthcare." Not "stop climate change." A grandmother's | |
| medication schedule. A dialysis patient's food choices. A family's own | |
| wildfire evacuation. Narrow and personal beats broad and vague — every | |
| time. | |
| </p> | |
| <!-- Speaker notes: This is the bridge into Part Two. Let it land, then move to break. --> | |
| </section> | |
| <!-- 18 divider break --> | |
| <section class="slide divider"> | |
| <canvas class="branch-bg" data-branch></canvas> | |
| <div class="eyebrow"><span class="dash"></span>Take 10</div> | |
| <h1 class="headline">☕ Break</h1> | |
| <p class="lede"> | |
| Back in 10 minutes — next up: finding your own problem. | |
| </p> | |
| </section> | |
| <!-- 19 divider part2 --> | |
| <section class="slide divider"> | |
| <canvas class="branch-bg" data-branch></canvas> | |
| <div class="num">Part Two</div> | |
| <div class="eyebrow"><span class="dash"></span>Find your idea</div> | |
| <h1 class="headline"> | |
| Finding a problem <span class="accent">worth solving</span> | |
| </h1> | |
| </section> | |
| <!-- 20 --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Problem-first, not solution-first | |
| </div> | |
| <h1 class="headline">Where good ideas actually come from</h1> | |
| <div class="grid3"> | |
| <div class="card"> | |
| <span class="tag">01</span> | |
| <h3>Your own frustration</h3> | |
| <p>Something that's genuinely annoyed or blocked you.</p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">02</span> | |
| <h3>Someone you know</h3> | |
| <p>A family member, teammate, or friend's real struggle.</p> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">03</span> | |
| <h3>What you've noticed</h3> | |
| <p>At school, volunteering, or around your town.</p> | |
| </div> | |
| </div> | |
| <p class="lede" style="margin-top: 1.5rem"> | |
| Seed categories: accessibility · mental health · environment · civic | |
| engagement · education · safety · food access · local economy | |
| </p> | |
| <!-- Speaker notes: Read the seed category list slowly — it's there to spark table conversation, not to be memorized. --> | |
| </section> | |
| <!-- 21 --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Common pitfall</div> | |
| <h1 class="headline"> | |
| "Save the environment" is <span class="warm">not</span> a problem | |
| statement | |
| </h1> | |
| <p class="lede"> | |
| "My grandmother keeps forgetting which days to take her medication" | |
| is. Specific beats broad. If you can picture the exact person | |
| struggling with the exact thing, you're close. | |
| </p> | |
| <!-- Speaker notes: Say this one directly — it's the single most common mistake in the room. --> | |
| </section> | |
| <!-- 22 --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Exercise · 15 min · pairs | |
| </div> | |
| <h1 class="headline">Five Whys</h1> | |
| <ul class="bullets"> | |
| <li><b>Student A</b> describes a real frustration for 2 minutes</li> | |
| <li> | |
| <b>Student B</b> asks "why does that happen?" — three times — to dig | |
| to the root cause | |
| </li> | |
| <li>Swap roles</li> | |
| <li>Both fill in <b>Worksheet Section 1</b> as you go</li> | |
| </ul> | |
| <!-- Speaker notes: Set a visible timer. Walk the room. 2-3 volunteers share after. --> | |
| </section> | |
| <!-- 23 divider part3 --> | |
| <section class="slide divider"> | |
| <canvas class="branch-bg" data-branch></canvas> | |
| <div class="num">Part Two, continued</div> | |
| <div class="eyebrow"><span class="dash"></span>Scope it down</div> | |
| <h1 class="headline"> | |
| Planning a realistic <span class="accent">MVP</span> | |
| </h1> | |
| </section> | |
| <!-- 24 --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Definition</div> | |
| <h1 class="headline">The smallest version that proves the idea</h1> | |
| <p class="lede"> | |
| One core user. One core action. One core outcome. Everything else is | |
| v2. | |
| </p> | |
| <div class="grid3" style="margin-top: 1rem"> | |
| <div class="card"> | |
| <span class="tag">Must</span> | |
| <h3>Ship without it, and it's not your idea</h3> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">Should</span> | |
| <h3>Makes it better, not essential to prove the concept</h3> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">Later</span> | |
| <h3>Real, but explicitly out of scope for now</h3> | |
| </div> | |
| </div> | |
| <!-- Speaker notes: Must / Should / Later triage — this is the framework students use on their worksheet next. --> | |
| </section> | |
| <!-- 25 --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Name the anti-pattern | |
| </div> | |
| <h1 class="headline"> | |
| Nobody is building <span class="warm">"the next Uber"</span> in 13 | |
| weeks | |
| </h1> | |
| <p class="lede"> | |
| Uber v1 didn't have ratings, driver photos, or food delivery — it | |
| matched one rider to one driver. Judges reward a small thing that | |
| fully works over a big thing that's half-broken. | |
| </p> | |
| <!-- Speaker notes: Say this with a laugh — it's meant to relieve pressure, not add it. --> | |
| </section> | |
| <!-- 26 --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Exercise · 12 min · individual | |
| </div> | |
| <h1 class="headline">Your Must / Should / Later</h1> | |
| <p class="lede"> | |
| Worksheet Section 2. Write your own triage for the idea you're | |
| circling — even if you haven't fully committed to it yet. | |
| </p> | |
| <ul class="bullets"> | |
| <li>Beginners: keep "Must" to 1–2 features, max.</li> | |
| <li>Advanced: also name your MVP's single success metric.</li> | |
| </ul> | |
| <!-- Speaker notes: Circulate quietly during this one — it's heads-down work time. --> | |
| </section> | |
| <!-- 27 divider part4 --> | |
| <section class="slide divider"> | |
| <canvas class="branch-bg" data-branch></canvas> | |
| <div class="num">Part Two, continued</div> | |
| <div class="eyebrow"><span class="dash"></span>Build it</div> | |
| <h1 class="headline"> | |
| Choosing the right <span class="accent">technology</span> | |
| </h1> | |
| </section> | |
| <!-- 28 --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Match the tool to the problem | |
| </div> | |
| <h1 class="headline">Four common routes</h1> | |
| <div class="grid4"> | |
| <div class="card"> | |
| <h3>Web</h3> | |
| <p> | |
| Lowest barrier. Best for info tools, dashboards, forms, civic | |
| utilities. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <h3>Mobile</h3> | |
| <p> | |
| React Native, Flutter, App Inventor. Best when you need camera, | |
| location, or notifications. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <h3>Games</h3> | |
| <p> | |
| Unity, Construct, Godot, Scratch. Best for education-through-play | |
| and simulations. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <h3>AI / ML</h3> | |
| <p> | |
| Python + a model API. Best for classification, prediction, | |
| personalization — not for buzzwords. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Speaker notes: Decision rule to say out loud: pick the tool that matches what your user needs to see or do, not the trendiest option. --> | |
| </section> | |
| <!-- 29 --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Let's talk about it directly | |
| </div> | |
| <h1 class="headline"> | |
| AI-assisted coding is a <span class="accent">real</span> skill | |
| </h1> | |
| <ul class="bullets"> | |
| <li> | |
| Claude, Copilot, Cursor and similar tools are legitimate | |
| professional tools | |
| </li> | |
| <li> | |
| Btree mentors will actively teach you to use them well — this is not | |
| discouraged | |
| </li> | |
| <li> | |
| But the CAC's own rule is the line: AI can't be the whole build, and | |
| you must be able to explain your app to a judge | |
| </li> | |
| </ul> | |
| <!-- Speaker notes: This is the moment to be direct — students expect either "don't use AI" or "just vibe it." Neither is the program's actual position. --> | |
| </section> | |
| <!-- 30 --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>Reframing "vibe-coding" | |
| </div> | |
| <h1 class="headline">A skill to practice, not a shortcut to take</h1> | |
| <p class="lede"> | |
| Describing what you want and iterating on AI output isn't cheating, | |
| and it isn't "not real engineering" — it's its own discipline. A | |
| calculator doesn't replace understanding math. Using AI well requires | |
| knowing what to ask for, reading output critically, testing it, and | |
| understanding the tradeoffs. | |
| </p> | |
| <!-- Speaker notes: The calculator analogy tends to land well with this age group — pause after it. --> | |
| </section> | |
| <!-- 31 --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>The house rule</div> | |
| <h1 class="headline"> | |
| "If you can't <span class="accent">explain</span> it, you can't | |
| <span class="warm">submit</span> it." | |
| </h1> | |
| <p class="lede"> | |
| Say it back with me. This is the line that governs every AI-assisted | |
| decision you make between today and October. | |
| </p> | |
| <!-- Speaker notes: Have the room repeat it out loud if the energy supports it — this line should stick for the whole season. --> | |
| </section> | |
| <!-- 32 divider break2 --> | |
| <section class="slide divider"> | |
| <canvas class="branch-bg" data-branch></canvas> | |
| <div class="eyebrow"><span class="dash"></span>Take 10</div> | |
| <h1 class="headline">☕ Break</h1> | |
| <p class="lede"> | |
| Back in 10 minutes — next up: what happens after today. | |
| </p> | |
| </section> | |
| <!-- 33 divider part5 --> | |
| <section class="slide divider"> | |
| <canvas class="branch-bg" data-branch></canvas> | |
| <div class="num">Part Three</div> | |
| <div class="eyebrow"><span class="dash"></span>What happens next</div> | |
| <h1 class="headline"> | |
| Btree's project <span class="accent">mentorship process</span> | |
| </h1> | |
| </section> | |
| <!-- 34 --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>From today to Oct 26 | |
| </div> | |
| <h1 class="headline">You're not doing this alone</h1> | |
| <div class="grid3"> | |
| <div class="card"> | |
| <span class="tag">Now</span> | |
| <h3>Plan & set clear goals</h3> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">Weeks</span> | |
| <h3>Stay on track with milestones</h3> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">As needed</span> | |
| <h3>Solve technical challenges</h3> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">Mid-project</span> | |
| <h3>Make smart design decisions</h3> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">Later</span> | |
| <h3>Refine features & UX</h3> | |
| </div> | |
| <div class="card"> | |
| <span class="tag">Final weeks</span> | |
| <h3>Prepare for submission</h3> | |
| </div> | |
| </div> | |
| <!-- Speaker notes: Placeholder cadence — swap in real dates, office-hours schedule, and contact channel before presenting. --> | |
| </section> | |
| <!-- 35 divider part6 --> | |
| <section class="slide divider"> | |
| <canvas class="branch-bg" data-branch></canvas> | |
| <div class="num">Part Three, continued</div> | |
| <div class="eyebrow"><span class="dash"></span>Today's deliverable</div> | |
| <h1 class="headline"> | |
| Brainstorm + <span class="accent">instructor feedback</span> | |
| </h1> | |
| </section> | |
| <!-- 36 --> | |
| <section class="slide"> | |
| <div class="eyebrow"> | |
| <span class="dash"></span>30 min · individual + mentors | |
| </div> | |
| <h1 class="headline">Your Idea Snapshot</h1> | |
| <ul class="bullets"> | |
| <li>The problem, and who specifically has it</li> | |
| <li>Why current solutions fall short</li> | |
| <li>Your app idea, in one sentence</li> | |
| <li>Your MVP's one core feature</li> | |
| <li>The tech direction you're leaning toward</li> | |
| <li>A quick self-check against the 3 judging criteria</li> | |
| </ul> | |
| <p class="lede" style="margin-top: 1rem"> | |
| Mentors will circulate table to table — everyone gets a few minutes of | |
| live feedback. | |
| </p> | |
| <!-- Speaker notes: Worksheet Section 3. Instructors: use the probing questions from the facilitator guide. --> | |
| </section> | |
| <!-- inserted: perspective/code/impact --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>The big picture</div> | |
| <h1 class="headline"> | |
| Your perspective, your code, | |
| <span class="accent">national impact</span> | |
| </h1> | |
| <div class="grid3"> | |
| <div class="card"> | |
| <h3>Your perspective</h3> | |
| <p>The issues in your community that only you notice.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Your code</h3> | |
| <p>Your willingness to learn, build, and debug.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>National impact</h3> | |
| <p>A solution the country needs to see.</p> | |
| </div> | |
| </div> | |
| <p class="lede" style="margin-top: 1.5rem"> | |
| The Congressional App Challenge is a platform to translate your unique | |
| worldview into a tangible tool that improves lives. | |
| </p> | |
| <!-- Speaker notes: Land this right before the closing worksheet exercise — it's the "why" underneath everything else today. --> | |
| </section> | |
| <!-- 37 wrapup --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Before you go</div> | |
| <h1 class="headline">You're ready</h1> | |
| <ul class="bullets"> | |
| <li>You know how you're judged</li> | |
| <li>You've seen it done, nine times over</li> | |
| <li>You have a problem, an MVP, and a tech direction on paper</li> | |
| </ul> | |
| <p class="lede" style="margin-top: 1rem"> | |
| Next: submit your Idea Snapshot on the Btree site within 7 days. Link | |
| and QR code below. | |
| </p> | |
| <!-- Speaker notes: Point to the submission website URL/QR that should be visible in the room all day. --> | |
| </section> | |
| <!-- inserted: registration cta --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Right now</div> | |
| <h1 class="headline">Start your build</h1> | |
| <ul class="bullets"> | |
| <li><b>1.</b> Form your team — up to 4 students</li> | |
| <li><b>2.</b> Find a problem in your community</li> | |
| <li><b>3.</b> Register at <b>congressionalappchallenge.us</b></li> | |
| </ul> | |
| <p class="lede" style="margin-top: 1.5rem"> | |
| Submit your app and video by | |
| <b>Monday, October 26, 2026, 12:00pm ET.</b> | |
| </p> | |
| <!-- Speaker notes: Point at the registration URL on screen/handout — this is the literal next action, separate from the Btree Idea Snapshot. --> | |
| </section> | |
| <!-- 38 thanks --> | |
| <section class="slide title"> | |
| <canvas class="branch-bg" data-branch></canvas> | |
| <div class="brandmark">Btree · Congressional App Challenge</div> | |
| <h1 class="headline"> | |
| Go build <span class="accent">something real.</span> | |
| </h1> | |
| <p class="lede">Questions any time — that's what mentorship is for.</p> | |
| </section> | |
| <!-- 39 sources --> | |
| <section class="slide"> | |
| <div class="eyebrow"><span class="dash"></span>Appendix</div> | |
| <h1 class="headline" style="font-size: clamp(1.6rem, 3vw, 2.4rem)"> | |
| Sources | |
| </h1> | |
| <p class="lede" style="font-size: 0.95rem"> | |
| Rules, eligibility, and judging criteria: official 2026 Congressional | |
| App Challenge Rules (congressionalappchallenge.us). Project examples | |
| drawn from 2025 winner announcements published by the students' | |
| sponsoring House offices and local press, including coverage of Fire | |
| Up, HealthBridge, FairMaps, PhosTrack, CanScreen, and Catalyst. | |
| </p> | |
| </section> | |
| </div> | |
| <div class="hint" id="hint">← → to navigate · F fullscreen</div> | |
| <button class="navbtn prev" id="prevBtn" aria-label="Previous slide"> | |
| ‹ | |
| </button> | |
| <button class="navbtn next" id="nextBtn" aria-label="Next slide">›</button> | |
| <div class="foot"> | |
| <span id="slideTitle"></span> | |
| <span id="counter"></span> | |
| </div> | |
| <div class="prog-track"><div class="prog-bar" id="progBar"></div></div> | |
| <script> | |
| (function () { | |
| var slides = Array.prototype.slice.call( | |
| document.querySelectorAll(".slide"), | |
| ); | |
| var total = slides.length; | |
| var idx = 0; | |
| var counter = document.getElementById("counter"); | |
| var progBar = document.getElementById("progBar"); | |
| function render() { | |
| slides.forEach(function (s, i) { | |
| s.classList.toggle("active", i === idx); | |
| }); | |
| counter.textContent = idx + 1 + " / " + total; | |
| progBar.style.width = ((idx + 1) / total) * 100 + "%"; | |
| location.hash = "s" + (idx + 1); | |
| } | |
| function go(n) { | |
| idx = Math.max(0, Math.min(total - 1, n)); | |
| render(); | |
| } | |
| function next() { | |
| go(idx + 1); | |
| } | |
| function prev() { | |
| go(idx - 1); | |
| } | |
| document.getElementById("nextBtn").addEventListener("click", next); | |
| document.getElementById("prevBtn").addEventListener("click", prev); | |
| window.addEventListener("keydown", function (e) { | |
| if (e.key === "ArrowRight" || e.key === " " || e.key === "PageDown") { | |
| e.preventDefault(); | |
| next(); | |
| } else if (e.key === "ArrowLeft" || e.key === "PageUp") { | |
| e.preventDefault(); | |
| prev(); | |
| } else if (e.key === "Home") { | |
| go(0); | |
| } else if (e.key === "End") { | |
| go(total - 1); | |
| } else if (e.key.toLowerCase() === "f") { | |
| if (!document.fullscreenElement) | |
| document.documentElement | |
| .requestFullscreen() | |
| .catch(function () {}); | |
| else document.exitFullscreen().catch(function () {}); | |
| } | |
| }); | |
| var startHash = parseInt((location.hash || "").replace("#s", ""), 10); | |
| if (startHash && startHash >= 1 && startHash <= total) | |
| idx = startHash - 1; | |
| render(); | |
| setTimeout(function () { | |
| document.getElementById("hint").style.opacity = "0"; | |
| }, 4500); | |
| var reduce = window.matchMedia( | |
| "(prefers-reduced-motion: reduce)", | |
| ).matches; | |
| document.querySelectorAll("canvas[data-branch]").forEach(function (cv) { | |
| var ctx = cv.getContext("2d"); | |
| var w, h, nodes; | |
| function size() { | |
| var r = cv.getBoundingClientRect(); | |
| w = cv.width = r.width * devicePixelRatio; | |
| h = cv.height = r.height * devicePixelRatio; | |
| } | |
| function buildNodes() { | |
| nodes = []; | |
| var cols = 6, | |
| rows = 4; | |
| for (var c = 0; c < cols; c++) { | |
| for (var r = 0; r < rows; r++) { | |
| if (Math.random() > 0.55) continue; | |
| nodes.push({ | |
| x: (c / (cols - 1)) * w + (Math.random() - 0.5) * w * 0.06, | |
| y: (r / (rows - 1)) * h + (Math.random() - 0.5) * h * 0.08, | |
| r: 1.4 + Math.random() * 2.2, | |
| phase: Math.random() * Math.PI * 2, | |
| }); | |
| } | |
| } | |
| } | |
| size(); | |
| buildNodes(); | |
| window.addEventListener("resize", function () { | |
| size(); | |
| buildNodes(); | |
| }); | |
| var t = 0; | |
| function draw() { | |
| ctx.clearRect(0, 0, w, h); | |
| ctx.strokeStyle = "rgba(49,177,255,0.18)"; | |
| ctx.lineWidth = 1; | |
| for (var i = 0; i < nodes.length; i++) { | |
| for (var j = i + 1; j < nodes.length; j++) { | |
| var a = nodes[i], | |
| b = nodes[j]; | |
| var dx = a.x - b.x, | |
| dy = a.y - b.y; | |
| var dist = Math.sqrt(dx * dx + dy * dy); | |
| if (dist < w * 0.22) { | |
| ctx.globalAlpha = 1 - dist / (w * 0.22); | |
| ctx.beginPath(); | |
| ctx.moveTo(a.x, a.y); | |
| ctx.lineTo(b.x, b.y); | |
| ctx.stroke(); | |
| } | |
| } | |
| } | |
| ctx.globalAlpha = 1; | |
| ctx.fillStyle = "rgba(48,203,255,0.5)"; | |
| nodes.forEach(function (n) { | |
| var pulse = reduce ? 0 : Math.sin(t * 0.02 + n.phase) * 0.5 + 0.5; | |
| ctx.beginPath(); | |
| ctx.arc(n.x, n.y, n.r + pulse * 1.2, 0, Math.PI * 2); | |
| ctx.fill(); | |
| }); | |
| t++; | |
| if (!reduce) requestAnimationFrame(draw); | |
| } | |
| draw(); | |
| }); | |
| var deadline = new Date("2026-10-26T00:00:00-08:00").getTime(); | |
| var cdEl = document.getElementById("deadlineCountdown"); | |
| if (cdEl) { | |
| var dEl = cdEl.querySelector('[data-cd="d"]'); | |
| var hEl = cdEl.querySelector('[data-cd="h"]'); | |
| var mEl = cdEl.querySelector('[data-cd="m"]'); | |
| var sEl = cdEl.querySelector('[data-cd="s"]'); | |
| var captionEl = cdEl.querySelector(".countdown-caption"); | |
| function pad(n) { | |
| return n < 10 ? "0" + n : "" + n; | |
| } | |
| function tick() { | |
| var diff = deadline - Date.now(); | |
| if (diff <= 0) { | |
| dEl.textContent = | |
| hEl.textContent = | |
| mEl.textContent = | |
| sEl.textContent = | |
| "00"; | |
| captionEl.textContent = "Submissions are closed"; | |
| return; | |
| } | |
| var totalSec = Math.floor(diff / 1000); | |
| dEl.textContent = pad(Math.floor(totalSec / 86400)); | |
| hEl.textContent = pad(Math.floor((totalSec % 86400) / 3600)); | |
| mEl.textContent = pad(Math.floor((totalSec % 3600) / 60)); | |
| sEl.textContent = pad(totalSec % 60); | |
| setTimeout(tick, 1000); | |
| } | |
| tick(); | |
| } | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment