Identity Forge Persona Hall
โ†’
Wayfinding World Hub
โ†’
Mission Tools Sprint + Code Hub
โ†’
Assessment Observatory Analytics

Wayfinding Pages

Making Collaboration Visible in CS Education

  • โœ“ GitHub-integrated social analytics tracking
  • โœ“ Persona-based team formation algorithm
  • โœ“ Spring Boot backend with REST API
  • โœ“ Interactive collaboration dashboard
  • โœ“ Dynamic persona evolution over sprints
  • โœ“ Real-time team health signals and metrics
Spring Boot Backend RESTful API Design GitHub API Integration React/JavaScript Frontend PostgreSQL Database Team Formation Algorithms

About

A system that transforms social collaboration from subjective evaluation into measurable, visible signals. Tracks student interactions across GitHub Issues, PRs, and comments to surface active navigators and reliable collaborators. Uses persona-based matching (organizer, debugger, communicator, builder) to form balanced teams that encourage diverse working styles. Students can evolve their personas over time, creating a visible record of how collaboration styles adapt and improve throughout the semester.

Impact

  • Makes collaboration measurable, not subjective
  • Encourages intentional teamwork patterns
  • Surfaces social learning as a core CS skill
  • Reduces teacher guesswork in team dynamics
  • Helps students self-diagnose team health

Identity Forge โ€” Persona Hall

Choose your archetype. Start your journey.

  • โœ“Multi-category persona selection (student, social, achievement, fantasy)
  • โœ“Central hub with a unique symbol for each persona
  • โœ“Selected persona persists and is displayed during gameplay
  • โœ“Teleport gate to Wayfinding World after selection
JavaScript Canvas RPG NPC Dialogue Persona API

About

Students enter the Persona Hall and choose an initial archetype from multiple categories. Each persona has a distinct visual symbol and drives personalization across the rest of the platform โ€” from group formation to AI suggestions.

Impact

  • Grounds students in self-reflection from the first moment of play
  • Enables backend grouping by persona compatibility
  • Provides teachers with real signal for intentional team formation

Wayfinding World โ€” Personality Quiz

Confirm your persona. Let data guide your team.

  • โœ“Interactive in-game quiz validates the student's initial persona choice
  • โœ“Quiz results surfaced to teachers for data-driven group formation
  • โœ“Backend stores personality snapshot via Skills Passport API
  • โœ“Gatekeeper NPCs guide students through each section of the hub
JavaScript Flask API NPC Dialogue Analytics

About

After arriving from Identity Forge, students explore Wayfinding World and complete an interactive personality quiz. The quiz cross-validates their persona selection and feeds real data to the teacher dashboard for intelligent group formation on future projects.

Impact

  • Replaces guesswork with evidence-based team construction
  • Students gain self-awareness through reflective prompts
  • Teacher gets actionable grouping data without manual surveys

Mission Tools โ€” Code Hub

Learn HTML through play. Build your About Me page.

  • โœ“In-game coding challenges teach HTML fundamentals through gameplay
  • โœ“Scaffolded skill progression leading to the About Me final project
  • โœ“Students apply skills in a real HTML About Me page submission
HTML JavaScript Canvas RPG

About

The Code Hub embeds HTML learning directly into the game loop. Students play through coding challenges that teach real markup skills, building toward a final deliverable โ€” an HTML About Me page โ€” that demonstrates their proficiency in a personally meaningful context.

Impact

  • Bridges game engagement with transferable technical skills
  • Students arrive at the About Me project with foundational HTML confidence

Mission Tools โ€” Sprint Success

Agile planning, gamified. Build a real mini sprint.

  • โœ“Interactive missions teach agile planning concepts hands-on
  • โœ“Students build an actual mini sprint โ€” backlog, tasks, review
  • โœ“Mirrors real-world scrum workflows used in industry
  • โœ“Sprint data captured for teacher visibility and assessment
JavaScript Agile / Scrum NPC Missions Canvas RPG

About

Sprint Success teaches agile methodology through a series of in-game missions. Students don't just learn what a sprint is โ€” they build one: defining goals, breaking down tasks, and reflecting on outcomes, all within the game world.

Impact

  • Students internalize agile vocabulary through doing, not reading
  • Prepares students for collaborative project work later in the course
  • Teachers gain insight into student planning maturity
Level Injection Pattern
Splicing a level at currentLevelIndex + 1 then incrementing is the right way to add sub-levels dynamically without breaking the level list.
Fetch Error Handling
A mismatched API path is silent without try/catch. Always wrap fetches, check res.ok, and log the status code before rendering UI.
SVG Sprite Sheets
Animated game sprites don't need image files โ€” generate them as data URIs with inline SVG. Each animation frame is a side-by-side <g> group.
DOM Timing
UI updates that depend on DOM elements (like dropdown sync) need requestAnimationFrame to avoid running before elements exist.