• 

• 

• 

H2Know — Know your H2O

Track 5: Community & Gamification · OneAquaHealth IEEE Global Hackathon 2026

A Streamkeeper quiz game that turns One Health water literacy into a Rapids Round: pick a keeper, ride their arena from streambed to treat, build streaks, clear spaced-repetition reviews, and share a photo victory card.

🔗 Live demo: https://h2know-nu.vercel.app ·

Inspiration

Urban freshwater is where One Health gets personal: the blocked drain breeding mosquitoes, the floodwater mixed with sewage, the canal water irrigating salad greens. Yet citizen-science water projects struggle with the same problem, people show up once and never come back!.

We wanted the thing that brings them back: a game where every replay teaches something new, missed questions return until mastered, and progress is visible on mastery dashboards all wrapped in arenas charming enough to share.

What it does

H2Know plays in four beats : setup, keeper pick, Rapids Round, done screen:

1. Setup — name, city, and the local waterbody you play for, Questions localize to your stream and bodies of water around you.

2. Pick a Streamkeeper — 8 keepers (Otto the Otter, Kiki the Frog, Daisy the Duck, Old Whiskers, Bello the Kingfisher, Tunde the Turtle, Sandy the Crab, Zuri the Flamingo), unlocked by progressing and getting XP, encouraging users to come back and play / learn.

1. Rapids Round — 5 questions, 20 seconds each, keyboard playable (1–3 to answer, Enter/Space to advance). Each keeper plays a reskinned arena on one shared progress meter: 🫧 Bubble Rise, 🪷 Lilypad Hop, 🦀 Beach Scuttle, 🦩 Lagoon Wade. Correct answers rise (+18 + speed bonus up to +2); wrong answers sink (−18, with keeper character: crab rock bumps −22, turtle shell −14); the clock drains 0.5/s. Three ripples (lives), streaks multiply XP up to ×3, and the deck never repeats a lesson within a run.

1. Done screen — score, XP, reviews cleared, streaks, plus text share, a photo victory card (1080×1350 PNG, native share sheet on mobile), and a 📖 learn sheet: every question with your answer, the correct answer, the why, ** and a vetted One Health field-guide link (WHO, CDC, EPA) from its track, so users play but also learn **.

Around the loop sit the retention systems: weekly quests (rounds, correct answers, reviews, surfacings), T1–T6 mastery bars measuring learning per One Health track, a review queue (missed questions return until mastered), day streaks, and Fresh Signals — a bonus round matching real local water headlines (online) that falls back to extra offline questions.

How we built it

Stack: Next.js (App Router) + React + Tailwind CSS v4 + Framer Motion + lucide-react. No database, no accounts — profile, stats, quests, and mastery persist in localStorage, so the game is fully offline with preseeded questions and works on conference wifi. Victory-card photos are composited in-browser via canvas and never leave the device.

Content model: 16 static questions across two pools (plain-language scenarios + evergreens), each tagged with a One Health track (T1–T6) and a topic key. buildDeck enforces one-topic-per-deck (reviews claim topics first), so a run never serves the flood lesson twice in different words. Reviews use ** Leitner-style spaced repetition** woven into the deck.

Arenas: all four are hand-drawn SVG + Framer Motion (no WebGL) — a vector frog with hop arcs and touchdown ripples, a vector crab with skitter/bonk physics and a washing tide, a grumpy vector catfish in a shining bubble with sunbeams and weeds, a mid-stride vector flamingo with stride arcs and wobble-on-wrong. One shared padLeft track formula keeps each keeper centered on its pad/stone at any panel width.

Learn sheet guides: every track links a verified-live documentation page (WHO One Health, CDC drinking water, CDC mosquitoes, WHO food safety, WHO AMR, EPA nutrient pollution); track-less Fresh Signals questions fall back to the OneAquaHealth Open Information Hub.

Challenges we ran into

• Rounds ended after 3 instant answers. The original speed bonus added full seconds-left to progress, so fast players surfaced almost immediately. We capped it at +2 (sim-verified over thousands of rounds) so one correct answer moves ~one stage and rounds last 4–5 questions.
• Duplicate lessons, not duplicate IDs. Deck dedupe by ID passed, but the pools retell the same six lessons in different words. The 5000-deck sim caught it — including stacked reviews from both pools teaching flood twice. Topic-key dedupe fixed all three layers.
• Two frogs, one pad. The hopper and its lily pad drifted apart at odd panel widths because they used different x-formulas. A single shared padLeft() helper anchors both.
• Docs links must be real. We fetched every candidate guide URL before wiring it in rather than guessing — one CDC hub had moved, and we mapped T2 to its verified successor.

Accomplishments that we're proud of

• A genuine retention loop, not points slapped on a form: play → why → learn sheet → reviews return → mastery bars move → quests and unlocks reward coming back.
• Measurable learning: T1–T6 mastery bars plus a learn sheet with vetted field guides make the educational impact visible to players and judges alike.
• Delight as a feature: four hand-drawn animated arenas, a selfie victory card with native sharing, keyboard-playable rounds — built for the demo camera.
• Offline-first that actually works: full game with zero network, verified by tsc + eslint + production build on every commit.

What we learned

• Gamification retains when it closes a loop (review → replay → mastery) rather than decorating one. The spaced-repetition deck is the most "innovative" line in the project, and it's pedagogy, not graphics.
• Simulation beats playtesting for tuning: the round-length and duplicate-lesson bugs only showed up reliably at thousands of synthetic decks, not in a dozen manual plays.
• Verifying external links before shipping copy is unglamorous and non-negotiable — link rot in a "learn more" sheet would undercut the whole learning claim.

What's next for H2Know

1. Community depth (phase two of the Track 5 case): shared leaderboards per waterbody, team quests for cleanup crews, and challenge links that seed a round from a friend's victory card.
2. Real stream data: bind keeper progress and Fresh Signals to live OneAquaHealth monitoring feeds so playing tracks your actual waterbody.
3. More keepers, more biomes: community-submitted scenarios with moderation, new arenas (mangrove, reservoir), and multilingual decks starting with French.
4. Classroom mode: teacher dashboards over the mastery bars, printable learn sheets per round.

Built With

• ieee
• one-health
• sqlite