QuestAR

QuestAR makes children go outside by utilizing AR technology to help them discover virtual collectibles, answer educational questions, accumulate points, and race against each other.

Comment

Inspiration

Physical learning beats passive studying. We wanted a scavenger hunt where players walk the real world, discover hidden orbs, and answer trivia to collect them. Merging AR with AI-generated questions felt like a fresh way to make education interactive.

What it does

Quest AR generates topic-based trivia orbs using AI. Players enter an immersive AR session, scan the floor, and follow a radar to find hidden orbs. Each orb unlocked is a 3-question quiz with a 20-second timer. XP, streaks, and levels track progress; a global leaderboard ranks players server-side.

How we built it

  • Frontend: Vite + vanilla JS, Three.js for procedural 3D orbs, WebXR hit-test API for floor detection and AR anchoring
  • Backend: Node.js server, PostgreSQL with JSON fallback, NVIDIA NIM integration for dynamic trivia generation
  • Storage: IndexedDB for browser progress, server database for leaderboard and profiles
  • Styling: Pure CSS with custom animations, floating orbs, XP pop effects

Challenges we ran into

  • AR tracking — Hit-testing produces noisy results on real surfaces. Added a scanning phase with visual feedback so players know when tracking is ready.
  • WebXR session lifecycle — Handling session start, context loss recovery, and graceful fallback on unsupported devices took careful state management.
  • Procedural orb distances — Calculating walkable distances in real-world meters and placing orbs reachable but not trivially close required iterative tuning.
  • Offline-capable gameplay — Queuing leaderboard updates while offline and syncing when reconnected without losing progress.

Accomplishments that we're proud of

  • Fully functional WebXR AR experience on Android Chrome with no headset required
  • Dual database system: production-ready PostgreSQL on Railway and a local JSON fallback for testing
  • AI-powered topic generation with a robust built-in question bank fallback
  • Complete gamification loop: XP, streaks, levels, collectible journal, and global leaderboard

What we learned

  • WebXR session management and hit-testing fundamentals for mobile AR
  • Three.js scene composition with canvas-generated textures and AR anchoring
  • Integrating external AI APIs with fallback resilience
  • Full-stack patterns: environment-based config, database abstraction, and client-server state sync

What's next for QuestAR

  • Image target tracking for fixed orb placement on specific markers
  • Expanded AI topic coverage and difficulty scaling
  • Multiplayer co-op quest mode
  • Social sharing of collected orbs and quiz scores

Built With

Share this project:

Updates