A comprehensive web-based cognitive training application designed to improve sustained attention and focus through progressive difficulty challenges. Built as a single HTML file with no external dependencies.
This attention training game was developed to address the growing need for cognitive enhancement tools that can help users build sustained focus over increasingly longer periods. The application progressively trains attention spans from 2 minutes up to 12+ minutes through engaging, scientifically-inspired cognitive challenges.
- Single-file architecture for maximum portability and ease of deployment
- Progressive web app principles with responsive design
- Accessibility-first development with full keyboard navigation and screen reader support
- Performance-optimized with 60fps animations and efficient memory management
- Purpose: Strengthen working memory and sequential processing
- Mechanics: Users observe color patterns and repeat them in correct order
- Progression: Sequences grow from 3 to 9 items based on level
- Skills Developed: Short-term memory, pattern recognition, sustained attention
- Purpose: Improve reading speed while maintaining comprehension
- Mechanics: Timed reading passages followed by multiple-choice questions
- Progression: Text length increases from 75 to 300+ words
- Skills Developed: Reading comprehension, information retention, processing speed
- Purpose: Enhance numerical processing and calculation speed
- Mechanics: Progressive arithmetic problems with time pressure
- Progression: From single operations to complex multi-step problems
- Skills Developed: Mental arithmetic, processing speed, sustained concentration
- Purpose: Develop visual-spatial processing and logical reasoning
- Mechanics: Complete visual patterns by identifying missing elements
- Progression: From simple color patterns to complex geometric relationships
- Skills Developed: Pattern recognition, logical reasoning, visual processing
- Purpose: Train selective attention and impulse control
- Mechanics: Click moving targets while ignoring distractors
- Progression: More objects, faster movement, increased complexity
- Skills Developed: Selective attention, impulse control, sustained vigilance
| Level Range | Session Duration | Complexity | Target Skills |
|---|---|---|---|
| 1-3 | 2 minutes | Basic patterns, simple math | Foundation building |
| 4-6 | 3 minutes | Medium complexity, longer texts | Skill development |
| 7-9 | 5 minutes | Complex patterns, multi-step problems | Advanced training |
| 10-12 | 7 minutes | Expert-level challenges | Mastery building |
| 13-15 | 10 minutes | Maximum complexity | Sustained expertise |
| 16+ | 12+ minutes | Ultra-endurance training | Peak performance |
Score = (Accuracy × 100 + TimeBonus) × StreakMultiplier- Base Points: 0-100 based on accuracy percentage
- Time Bonus: Up to 50 additional points for quick responses
- Streak Multiplier: Up to 2x multiplier for consistent accuracy (85%+)
- Progressive Thresholds: 75% accuracy required for level advancement
- Response Monitoring: Tracks delays over 10 seconds
- Tab Focus Detection: Automatically pauses when window loses focus
- Engagement Metrics: Monitors consecutive incorrect responses
- Adaptive Feedback: Provides real-time attention alerts
- Pure HTML5/CSS3/JavaScript - No framework dependencies
- Responsive Design - Mobile-first approach with breakpoints
- CSS Grid & Flexbox - Modern layout techniques
- CSS Animations - Smooth 60fps performance with hardware acceleration
- Web APIs - requestAnimationFrame, visibility API, local storage
- Efficient DOM Manipulation - Batch updates and virtual scrolling concepts
- Memory Management - Proper cleanup of intervals and event listeners
- Animation Performance - Hardware-accelerated transforms and opacity
- Responsive Images - Scalable vector graphics and optimized rendering
- ARIA Labels - Complete semantic markup for screen readers
- Keyboard Navigation - Full tab order and keyboard shortcuts
- High Contrast Support - Respects user system preferences
- Reduced Motion - Honors prefers-reduced-motion settings
- Focus Management - Clear focus indicators and logical tab order
- Minimum Resolution: 1024x768
- Optimal Resolution: 1920x1080+
- Browser Support: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
- Input Methods: Mouse, keyboard, trackpad
- Responsive Breakpoints: 320px, 768px, 1024px
- Touch Optimizations: Large tap targets (44px minimum)
- Gesture Support: Touch, swipe, pinch-to-zoom disabled for game integrity
- Performance: Optimized for mobile processors with reduced animations
- 1000+ lines of JavaScript with comprehensive documentation
- 500+ lines of CSS with BEM methodology
- Modular Architecture - Separated game modes and utilities
- Error Handling - Graceful degradation and user feedback
- Performance Monitoring - Built-in frame rate and memory tracking
- Single File Deployment - Copy and run anywhere
- GitHub Pages Ready - Instant static hosting
- CDN Compatible - Works with any static file server
- Offline Capable - No external resource dependencies
- Download
index.html - Open in any modern web browser
- Start training immediately
- Fork this repository
- Enable GitHub Pages in repository settings
- Access at
https://yourusername.github.io/attention-training-game/
git clone https://github.com/RRGU26/attention-training-game.git
cd attention-training-game
# Open index.html in browser or serve with local server
python -m http.server 8000 # Python 3
# or
npx serve . # Node.js- Select Level: Choose your starting difficulty (Level 1 recommended for new users)
- Choose Mode: Pick from 5 training modes based on your focus goals
- Start Session: Begin your timed attention training session
- Stay Focused: Complete challenges while maintaining high accuracy
- Track Progress: Monitor your improvement through detailed statistics
- Start Low: Begin with Level 1 to understand each game mode
- Consistency Over Speed: Maintain 75%+ accuracy for level advancement
- Take Breaks: Use the pause feature when needed to prevent fatigue
- Mix Modes: Rotate between different training types for comprehensive development
- Track Streaks: Build longer accuracy streaks for bonus multipliers
- Beginners: 2-3 sessions per week, 2-5 minutes each
- Intermediate: 4-5 sessions per week, 5-10 minutes each
- Advanced: Daily sessions, 10+ minutes each
- Expert: Multiple daily sessions with varied modes
- Session Duration: Actual time spent in focused training
- Accuracy Percentage: Correct responses over total attempts
- Response Time: Average time per challenge completion
- Attention Lapses: Count of focus breaks and delays
- Streak Records: Longest consecutive correct responses
- Level Progression: Advancement rate and unlock achievements
Users typically report improvements in:
- Sustained Attention: Ability to focus for longer periods
- Working Memory: Better retention of information sequences
- Processing Speed: Faster completion of mental tasks
- Selective Attention: Improved ability to filter distractions
- Mental Flexibility: Enhanced task-switching capabilities
- No Server Communication: All data processed locally
- No Personal Information: No account creation or data collection
- Session-Based Storage: Progress resets with browser session
- No Cookies: No tracking or persistent storage
- GDPR Compliant: No data processing requirements
- No Special Permissions required
- Visibility API: Only for pause detection when tab switching
- Local Storage: None used - purely session-based
This project welcomes contributions for:
- New Game Modes: Additional cognitive training exercises
- Accessibility Improvements: Enhanced support for diverse users
- Performance Optimizations: Better mobile and low-end device support
- Localization: Multi-language support
- Research Integration: Evidence-based training protocols
- Maintain single-file architecture
- Ensure no external dependencies
- Follow existing code style and patterns
- Test across multiple devices and browsers
- Document all new features comprehensively
MIT License - Free for personal and commercial use. See LICENSE file for details.
This application is inspired by cognitive training research in:
- Attention Training Theory (Posner & Petersen, 1990)
- Working Memory Training (Klingberg, 2010)
- Dual N-Back Studies (Jaeggi et al., 2008)
- Sustained Attention Response Task (Robertson et al., 1997)
- Attention Network Test principles (Fan et al., 2002)
- Issues: Report bugs or request features via GitHub Issues
- Discussions: Join community discussions for tips and strategies
- Updates: Watch repository for new features and improvements
Built with ❤️ for cognitive enhancement and attention training
Last Updated: August 2024