A simple, interactive multiplication game designed to test and improve arithmetic skills through rapid-fire problem solving.
Authors · Overview · Features · Structure · Results · Quick Start · Usage Guidelines · License · About · Acknowledgments
Important
Special thanks to Mega Satish for her meaningful contributions, guidance, and support that helped shape this work.
The Math Game is an educational interface designed to facilitate arithmetic learning through structured repetition and positive reinforcement. The application serves as a digital sandbox for mastering multiplication, providing a low-stress environment for skill acquisition.
The development of this interface was guided by core Human-Machine Interaction paradigms:
- Learnability: The interface uses standard UI patterns (multiple choice) that require no prior training, allowing users to start "learning by doing" immediately.
- Error Recovery: The system provides clear, non-punitive feedback for incorrect answers, encouraging an iterative process where errors are treated as learning opportunities rather than failures.
Tip
Aesthetic-Usability Effect
The design utilizes a high-fidelity Neon HUD (Heads-Up Display) and Glassmorphic interface to invoke the Aesthetic-Usability Effect. By creating a visually stunning and modern environment, the system increases perceived usability and user engagement, effectively managing cognitive focus during high-intensity arithmetic sessions.
| Feature | Description |
|---|---|
| Gamified Drills | Randomized multiplication challenges designed to test instant recall. |
| Real-Time Scoring | Dynamic score tracking with integrated penalty logic for incorrect attempts. |
| Time-Pressure | Strictly timed 60-second rounds to induce cognitive flow state. |
| Binary Feedback | Instantaneous visual validation (Green/Red) providing immediate learning reinforcement. |
| Adaptive UI | Fully responsive glassmorphic interface optimized for mobile, tablet, and desktop. |
| Social Sharing | Integrated high-fidelity image generation for sharing scores via custom digital cards. |
Note
We have embedded a physics-driven atmospheric layer ("Math Atmosphere") that renders floating mathematical symbols to create a dynamic visual depth. In the pre-game lobby, interacting with the answer grid reveals Curated Math Facts, designed to spark curiosity before the challenge begins. Additionally, the footer features a "Commutative Singularity" event: hovering over the author names triggers a quantum-tunneling animation where the names physically swap positions, playfully demonstrating the commutative property of multiplication (
- Languages: HTML5, CSS3, JavaScript (ES6+)
- Logic: Vanilla JS (DOM Manipulation & Game Loop)
- Imaging: html2canvas (Client-side localized capture engine)
- UI System: Custom Vanilla CSS3 (Neon Glassmorphism & Animations)
- Deployment: GitHub Actions (Staging & Continuous Delivery Workflow)
- Hosting: GitHub Pages
THE-MATH-GAME/
│
├── .github/ # GitHub Actions & Automation
│ └── workflows/
│ └── deploy.yml # Automated Staging & Deployment Flow
│
├── docs/ # Technical Documentation
│ └── SPECIFICATION.md # Architecture & Design Specification
│
├── Mega/ # Archival Attribution Assets
│ ├── Filly.jpg # Companion (Filly)
│ └── Mega.png # Author Profile Image (Mega Satish)
│
├── screenshots/ # Application Screenshots
│ ├── 01-main-menu.png # Game Start Screen
│ ├── 02-lobby-fact-[a-c].png # Math Fact Lobby Variations
│ ├── 03-gameplay-active.png # Active Gameplay State
│ ├── 03-gameplay-var-[1-4].png # Gameplay Variations
│ ├── 04-game-over.png # Score Summary & Challenge
│ ├── 05-share-card-[a-b].png # Premium Analytics Cards
│ └── 06-author-signature.jpg # Signed Asset
│
├── Source Code/ # Primary Application Layer
│ ├── assets/ # Background Assets
│ ├── css/ # Game Visuals
│ ├── js/ # Game Logic
│ ├── images/ # Game Assets
│ ├── favicon.png # Application Icon
│ ├── logo.png # Application Logo
│ ├── 404.html # Error Page
│ └── index.html # Game Entry Point
│
├── .gitattributes # Git configuration
├── CITATION.cff # Scholarly Citation Metadata
├── codemeta.json # Machine-Readable Project Metadata
├── LICENSE # MIT License Terms
├── README.md # Comprehensive Archival Entrance
└── SECURITY.md # Security Policy & ProtocolThe entry point to the challenge.
The Lobby: Curated Math Facts
Interactive trivia before the game begins.
Active Gameplay
Fast-paced multiplication drills with immediate feedback.
Gameplay Variations
Game Over & Challenge
"Challenge: 31 is the author score to beat!"
Social Sharing & Stats
High-fidelity shareable scorecards.
- Browser: Any modern standards-compliant web browser (Chrome, Firefox, Edge, Safari).
- Environment: No server-side runtime is required; this is a static client-side application.
Warning
Local Execution
While the project can be executed by opening index.html directly, certain features may require an active internet connection to resolve external libraries correctly.
- Clone the Repository:
git clone https://github.com/Amey-Thakur/THE-MATH-GAME.git cd THE-MATH-GAME - Launch:
Open
Source Code/index.htmlin your preferred browser.
Tip
Neon Glassmorphic Simulation | The Math Game
Experience a high-fidelity web simulation of this arithmetic platform, featuring a premium Neon HUD and Glassmorphic interface that leverages the Aesthetic-Usability Effect to maximize user engagement and cognitive focus during HMI-optimized multiplication drills.
This repository is openly shared to support learning and knowledge exchange across the academic community.
For Students
Use this project as reference material for understanding interactive system design, web development patterns, and Human Machine Interaction principles. The source code is available for study to facilitate self-paced learning and exploration of user-centric design patterns.
For Educators
This project may serve as a practical lab example or supplementary teaching resource for Human Machine Interaction and Human Machine Interaction Laboratory courses (CSC801 & CSL801). Attribution is appreciated when utilizing content.
For Researchers
The documentation and design approach may provide insights into academic project structuring and interactive web application development.
This repository and all its creative and technical assets are made available under the MIT License. See the LICENSE file for complete terms.
Note
Summary: You are free to share and adapt this content for any purpose, even commercially, as long as you provide appropriate attribution to the original authors.
Copyright © 2022 Amey Thakur & Mega Satish
Created & Maintained by: Amey Thakur & Mega Satish
Academic Journey: Bachelor of Engineering in Computer Engineering (2018-2022)
Institution: Terna Engineering College, Navi Mumbai
University: University of Mumbai
This project features The Math Game, developed as a Human Machine Interaction project during the 8th Semester Computer Engineering curriculum. It aims to make learning arithmetic fun and interactive through web technology.
Connect: GitHub · LinkedIn · ORCID
Grateful acknowledgment to Mega Satish for her exceptional collaboration and scholarly partnership during the development of this arithmetic game project. Her constant support, technical clarity, and dedication to software quality were instrumental in achieving the system's functional objectives. Learning alongside her was a transformative experience; her thoughtful approach to problem-solving and steady encouragement turned complex requirements into meaningful learning moments. This work reflects the growth and insights gained from our side-by-side academic journey. Thank you, Mega, for everything you shared and taught along the way.
Grateful acknowledgment to the faculty members of the Department of Computer Engineering at Terna Engineering College for their guidance and instruction in Human Machine Interaction. Their expertise and support helped develop a strong understanding of interactive system design.
Special thanks to the mentors and peers whose encouragement, discussions, and support contributed meaningfully to this learning experience.
Authors · Overview · Features · Structure · Results · Quick Start · Usage Guidelines · License · About · Acknowledgments
🔬 Human Machine Interaction Laboratory · 🧮 THE-MATH-GAME
Computer Engineering (B.E.) - University of Mumbai
Semester-wise curriculum, laboratories, projects, and academic notes.