Inspiration
I was inspired by the idea that learning should feel rewarding, meaningful, and fun. Many students struggle with motivation because progress feels invisible, so we wanted to build a system where every bit of effort instantly turns into something they can see, earn, and track,just like in their favorite games. That became the foundation for Orion’s star-based reward system.
What it does
Orion is a gamified learning platform where students earn Silver Stars for completing lessons and quizzes, convert them into Gold Stars, and then simulate real-world value through our Eco-Net payout system. The prototype includes: A fully animated app-style interface A working reward engine (Silver → Gold → Cash) A simulated EcoCash dashboard for payouts A live-updating user wallet A visually immersive, cosmic-themed learning environment
How we built it
We built Orion using HTML, CSS, and JavaScript, designing each page from scratch. Major components include: LocalStorage-based user state Conversion algorithms for stars and cash A custom Eco-Net system that processes payouts Animated UI elements and cosmic-style graphics Multi-page navigation with a consistent header
Challenges we ran into
Syncing star balances and money across different pages Creating a payout system that felt realistic but safe Maintaining consistent design and animations in every section Debugging localStorage issues when swapping between Orion and Eco-Net Styling the UI to look polished and game-like under time pressure
Accomplishments that we're proud of
Building a fully functional star-to-cash learning economy Creating a separate simulated EcoCash system that integrates seamlessly Producing a clean, aesthetic, space-themed user interface Making everything work smoothly without external libraries Turning a simple idea into a full interactive prototype in a short time
What we learned
How to structure multi-page apps with shared data How gamification can dramatically improve engagement How to simulate real payment flows safely How animations and UI aesthetics affect user motivation How to debug complex interactions under pressure
What's next for Orion
Adding real lessons, quizzes, and daily goal streaks Integrating AI-driven learning paths Expanding Eco-Net into a proper admin dashboard Adding leaderboards and class competitions Building mobile app support Partnering with schools to pilot the system in real classrooms
Built With
- animations
- assets
- backgrounds
- browser-based
- css
- css3
- deployment
- eco-net
- engine)
- html5
- icon
- javascript
- js)
- layout
- localstorage
- payout
- png/svg
- responsive
- simulation
- table-based
- transaction
- video
- web
