The player is an aspiring GitHub contributor who must help The Git-Goat organize the chaotic "Suggestion Box" repository. Along the way, they'll discover the power of collaborative development and learn that mistakes are just opportunities to learn.
A cluttered workbench filled with scattered papers, sticky notes, and confusion.
Narrator (Git-Goat):
"Welcome, brave explorer! Our repository is in chaos. Before we can accept suggestions, we need someone like YOU—someone willing to learn, experiment, and even make mistakes."
Log in with your GitHub identity - the first step in becoming a contributor.
- 🖇️ Animated scattered papers that organize when username is entered
- 🎲 Wobbling desk elements (pencils, ink bottles, stack of books)
- ✨ Magical reveal effect - papers fly into proper stacks
- 🎯 Visual feedback - "You've claimed your identity!" confetti
Establish that GitHub requires identification. This is about accountability and reputation in open source.
A mysterious locked box surrounded by mysterious documents and clues.
Git-Goat:
"Now that I know who you are, your first mission: Find the Suggestion Box issue! It's hidden in our repository. You'll need to SEARCH for it, read it, and ADD YOUR VOICE to the conversation."
Task: Find and comment on the "Suggestion Box" issue
- Player must SEARCH the GitHub issues
- Player must READ the actual issue content
- Player must WRITE a comment to participate
Why This Pedagogy?
- Searching teaches repository exploration
- Reading teaches understanding before acting
- Commenting teaches collaborative dialogue
- Real GitHub interaction (not a fake link)
Interactive Elements Needed
- 🔍 Animated search magnifying glass that grows/shrinks
- 📋 Scrolling issue board showing issues
- 💬 Comment bubbles floating in from other contributors
- ✨ Highlight effect when user finds the right issue
- 🎉 Celebration when comment is detected
Visual Journey
- Start: Messy pile of rolled papers (issues)
- Middle: Papers unfold to reveal content
- End: Your comment appears on the scroll
Task: Create a NEW issue with a suggestion
- Player demonstrates they understand GitHub structure
- Player becomes a content CREATOR, not just consumer
- Player gains confidence through creation
Why This Pedagogy?
- Moving from reading → writing
- Understanding that they TOO can create content
- Building confidence in their own voice
Interactive Elements Needed
- 📝 Blank scroll/parchment that appears
- 🖊️ Animated quill pen that the user guides
- 🌟 Star effect as issue is created
- 🎊 Celebration when issue appears in the repository
- Optional: Ability to EDIT the issue they created (show that mistakes aren't permanent)
Visual Journey
- Start: Empty parchment
- Middle: Your words appearing as you type
- End: Your issue appears in the scroll, other contributors react
A forked road in a magical forest. Two paths: YOUR path (fork) and the ORIGINAL path (upstream).
Git-Goat:
"To make real changes, you need your OWN copy of the repository. Watch as the magic of FORKING creates a path just for you!"
Task: Fork the repository, then clone it locally
Why This Pedagogy?
- Understand the concept of "safe experimentation"
- Your changes don't affect the main project (yet)
- Building toward contribution
Interactive Elements Needed
- 🌳 Parallax forest - trees move at different speeds as you scroll
- Distant mountains (slow)
- Near trees (fast)
- Fork in road (medium)
- ⚡ Lightning effect - when fork happens, show duplication visually
- 🔄 Circular arrows showing bidirectional sync possibility
- 📦 Package/box animation - files being cloned to local machine
- 🎯 Progress indicator - showing local copy appearing
Visual Journey
- Start: Single tree (the repo)
- Middle: Fork appears, tree duplicates
- End: Your forest appears on the left side of screen (parallax shows depth)
A glowing library with ancient scrolls. Each scroll represents a file in the repository.
Git-Goat:
"Every great project needs rules of conduct. Find the LICENSE file and understand what rights and responsibilities it grants. Then, add YOUR contribution!"
Task: Find LICENSE file, understand it, then edit it (add your name or symbol)
Why This Pedagogy?
- Legal understanding (what you can/cannot do)
- Respect for existing contributors
- Seeing that files CAN be edited
- Practicing the EDIT workflow
Interactive Elements Needed
- 📜 Glowing scrolls on shelves
- 🔦 Spotlight/flashlight that player controls to find LICENSE
- 📖 Scrolling text showing LICENSE content
- ✏️ Edit pencil animation - marking their contribution
- 🖋️ Signature effect - their name being added
- ✨ Glow effect - LICENSE now shows their name
Visual Journey
- Start: Dark library, can't see files
- Middle: Spotlights reveal contents
- End: LICENSE glows with contributor list (including player)
A grand ceremony hall. Banquet tables, celebrating contributors. A throne for the repository maintainer.
Git-Goat:
"Now comes the moment of truth. You'll create a Pull Request—asking the maintainers to merge your work into the main project. This is where collaboration becomes magic!"
Task: Create a Pull Request with changes
Why This Pedagogy?
- The ULTIMATE collaborative act
- You're asking permission, not forcing changes
- Respect for maintainers' authority
- Understanding that code review happens
- Real contribution workflow
Interactive Elements Needed
- 🎪 Celebration stage - decorations and banners
- 📬 Magical mailbox - PR is sent
- 👑 Repository maintainer character reviews it
- 💭 Thought bubbles - showing reviewer consideration
- ✅ Approval stamp - when PR is merged
- 🎊 Confetti & celebration - you're a contributor!
- 🏅 Badge awarded - "Official Contributor"
Visual Journey
- Start: You stand on stage with your changes
- Middle: PR is presented to the maintainers
- End: Celebration as your code becomes part of the project
The repository is now organized and thriving. Contributors celebrate. The story comes full circle.
Git-Goat:
"You've learned the true power of open source: collaboration, communication, and yes—the courage to make mistakes and learn from them. Welcome to the community!"
- 🏆 Trophy appears with your username
- 🌟 Stars rain down from the sky
- 👥 Other characters appear - acknowledging your contribution
- 🎭 The Grumpy Gopher is now smiling
- 🎪 The whole scene transforms - organized, thriving, alive
- 🔄 Navigation available - can visit any level to review/continue
Level 0-1: Horizontal Scroll (Parallax Layers)
- Foreground: Messy desk items (fast scroll)
- Midground: The repository structure (medium)
- Background: The digital landscape (slow)
- Effect: Shows depth of organizational layers
Level 2: Vertical Parallax (Creating Content)
- As user types, background scrolls
- Shows the "weight" of their creation
- Words lift up, background falls away
- Effect: Their voice becomes important
Level 3-4: Deep Perspective Parallax
- Forest scene with multiple depth layers
- Fork shows divergence (2D to 3D representation)
- Each layer represents a different aspect:
- Sky (maintainers' decisions)
- Mountains (the project scope)
- Trees (contributors)
- Forest floor (your local clone)
- Effect: Shows their place in the larger ecosystem
Level 5: Isometric Parallax
- Stage rotates as celebration happens
- Gives sense of "elevation" to the achievement
- Multiple characters at different depths celebrating
- Effect: You're at the center of a community
- ✨ Confetti cannons - code review approved
- 🎆 Fireworks - PR merged successfully
- 🎵 Musical notes - success jingles
- 🎊 Balloon releases - major milestones
- 🏆 Trophy animations - achievements unlocked
- ❌ Gentle shake - when validation fails
- 💭 Helpful thought bubbles - Git-Goat's suggestions
- 🔄 Reset animation - showing you can try again
- 💪 Encouragement text - "Mistakes are learning!"
- 🎯 Spotlight - highlighting what to focus on
- 🔍 Search particles - when searching issues
- 💡 Light bulbs - "aha!" moments
- 🌟 Spotlight effects - finding the right element
- 📍 Bookmarks - marking important discoveries
- 🎯 Target highlights - guiding to next step
- Create: ✨ Sparkles, emergence effect
- Edit: ✏️ Pencil scratches, updates flowing
- Delete: 🗑️ Gentle fade (not scary), option to undo
- Restore: 🔄 Content returns, rebuild effect
- Merge: 🔀 Rivers combining, becoming one
- Appears at start of each level
- Provides encouragement and guidance
- Reacts to player success/failure
- Final appearance: Recognition ceremony
- Represents the "messy state"
- Gradually smiles as repository gets organized
- Shows that change is possible
- Appears during fork/license phases
- Provides wisdom about responsibility
- Shows respect for established rules
- Reviewer Raccoon: Checks your PR
- Maintainer Meerkat: Decides on merge
- Celebrating Creatures: Other contributors
https://learn-github.example.com/ → Level 0 (default)
https://learn-github.example.com/#level1 → Level 1
https://learn-github.example.com/#level2 → Level 2
https://learn-github.example.com/#level3 → Level 3
https://learn-github.example.com/#level4 → Level 4
https://learn-github.example.com/#level5 → Level 5
https://learn-github.example.com/#victory → Victory screen
Benefits:
- Shareable links ("I'm stuck on Level 3")
- Bookmarkable progress
- Browser back/forward button support
- Teacher can see which level student is on via screen share
| Level | Goal | Key Learning |
|---|---|---|
| 0 | Identify yourself | GitHub requires accountability |
| 1 | Find & comment | Discovery + collaboration |
| 2 | Create content | You have a voice |
| 3 | Fork & clone | Safe experimentation |
| 4 | Edit & contribute | Files can be modified |
| 5 | PR & merge | True collaboration |
| Victory | Recognition | You're part of the community |
Players learn that GitHub is FORGIVING:
- Created wrong issue? → Can edit it or delete it
- Made typo in comment? → Can edit comment
- Forked by accident? → Can delete fork
- Wrong file edited? → Can revert changes
- PR has issues? → Can push more commits
This builds CONFIDENCE: Mistakes aren't permanent disasters, they're learning opportunities.
- Level 0: Chaotic warm colors (organizing)
- Level 1: Cool blues (exploration)
- Level 2: Warm reds/oranges (creation)
- Level 3: Purple/mystical (forking into unknown)
- Level 4: Gold/important (rules & responsibility)
- Level 5: Rainbow celebration (unity)
Messy Desk (Identify)
↓ (Parallax forest reveals)
Suggestion Box (Participate)
↓ (Create your own)
Your Issue (Create)
↓ (Parallax fork in road)
Fork & Clone (Safe Space)
↓ (Parallax deep library)
License Discovery (Rules)
↓ (Edit to contribute)
Pull Request (Collaborate)
↓ (Grand ceremony)
Victory & Recognition (Community)
The thread throughout: FROM CONSUMER → CREATOR → CONTRIBUTOR → MEMBER
Last Updated: Latest Session
Version: 2.0 (Narrative Arc Edition)
Status: 🎭 Story Framework Complete