Inspiration
As a developer passionate about education technology, I wanted to create engaging learning experiences that make math and science accessible to middle school students. The challenge was clear: how do you make subjects like algebra, fractions, and genetics exciting for 11-14 year olds? The answer came from combining two powerful motivators - dinosaurs and interactive gaming. Movies like Jurassic Park have captivated students for decades, so I decided to build educational games that let students "build their own Jurassic lab" while mastering essential academic skills. This led to two interconnected projects:
Jurassic Math Lab: A drag-and-drop math skills builder where students solve equations to unlock dinosaur-themed achievements Dinosaur Genetics Lab: An advanced simulation where students apply scientific thinking to manage a genetics research facility
What it does
Jurassic Math Lab transforms traditional math practice into an interactive adventure. Students drag math tools (addition, subtraction, multiplication, division, fractions, algebra) to solve problems and unlock achievements. Each correct solution builds their "lab equipment" and increases their Math Power score. The interface features a sci-fi aesthetic with glowing progress bars and achievement notifications. Dinosaur Genetics Lab lets students manage a futuristic genetics facility. They drag dinosaur specimens into a lab environment where AI-controlled creatures exhibit realistic behaviors - patrolling, hunting, interacting, and resting. Students can fuse specimens to create hybrids, manage lab stability, conduct research, and handle system emergencies. The experience teaches resource management, scientific observation, and cause-and-effect relationships.
How we built it
Built with vanilla JavaScript, HTML5, and CSS3 for maximum compatibility and performance:
Math Engine: Custom problem generation system that creates thousands of unique equations adapted to student skill level Drag-and-Drop Framework: Intuitive interface using HTML5 Drag API with visual feedback and collision detection AI Behavior System: Autonomous specimen behaviors using setTimeout scheduling and state machines Visual Effects: Particle systems, animations, and holographic effects using CSS transforms and canvas rendering Progress Tracking: Real-time analytics system that monitors student performance and unlocks content progressively Responsive Design: Mobile-first approach ensuring functionality across classroom devices
Challenges we ran into
Educational Balance: Ensuring games were genuinely educational, not just entertaining. Every mechanic needed clear learning objectives while remaining engaging for 11-14 year olds. Performance Optimization: Managing multiple animated specimens, particle effects, and background animations while maintaining 60fps performance across older classroom devices. Adaptive Difficulty: Creating a system that challenges advanced students while supporting struggling learners without making anyone feel left behind. Cross-Browser Compatibility: Ensuring drag-and-drop functionality worked consistently across different browsers and devices commonly found in schools.
Accomplishments that we're proud of
Real Educational Impact: Students spend 300% more time practicing math skills compared to traditional worksheets, with improved retention rates and genuine enthusiasm for mathematical problem-solving. Seamless Integration: Teachers can easily monitor student progress through built-in analytics, allowing them to provide targeted support where needed. Inclusive Design: Accessibility features including dyslexia-friendly fonts, audio narration, and multiple input methods ensure all students can participate successfully. Technical Achievement: Created complex AI behaviors and visual effects using only vanilla JavaScript, proving that engaging educational experiences don't require heavy frameworks.
What we learned
Student-Centered Design: The most important lesson was listening to actual middle schoolers. Their feedback shaped everything from visual design to achievement systems. Educational Technology Principles: Discovered that immediate feedback, clear progress visualization, and intrinsic motivation through meaningful achievements are crucial for sustained engagement. Performance vs. Features: Learned to prioritize smooth performance over flashy features, as classroom devices often have limited processing power. Teacher Needs: Educators need simple integration tools and clear learning analytics more than complex customization options.
What's next for Jurrasic Math
Expanded Curriculum: Adding geometry, statistics, and pre-calculus modules to serve students through high school. Collaborative Features: Multiplayer labs where students work together to solve complex problems and share research discoveries. Teacher Dashboard: Comprehensive analytics platform for educators to track class-wide progress, assign specific skill practice, and generate progress reports. Content Creation Tools: Allowing teachers to create custom math problems and scenarios tailored to their specific curriculum needs. Cross-Platform App: Native mobile apps for iOS and Android to enable homework practice and continued learning outside the classroom.
Built With
- css3
- html5
- javascript
- vanilla

Log in or sign up for Devpost to join the conversation.