IGCSE Master Learning Platform

Client-side only, offline-capable spaced repetition learning platform for IGCSE exam preparation.

🎯 Purpose

Built for Kheshav Sukhani's IGCSE exam preparation:

• Malay (0546) - April 24, 2026
• ICT (0417) - April 29, 2026
• Business Studies (0450) - May 5, 2026
• Extended Math (0600) - TBC
• Economics (0455) - TBC
• English First Language (0500) - TBC

✨ Features

Core

• ✅ Spaced Repetition (SM-2 Algorithm) - Same algorithm as Anki
• ✅ Offline-First - Works without internet after first load
• ✅ Mobile-First Design - Touch-optimized, responsive layout
• ✅ Dark/Light Themes - System preference detection + manual toggle
• ✅ Progress Tracking - XP, streaks, mastery levels
• ✅ Pomodoro Timer - 25min focus / 5min break cycles

Study Features

• Flashcard review with flip animation
• 4-button rating system (Again/Hard/Good/Easy)
• Keyboard shortcuts (1-4, Space, Arrow keys)
• Session progress tracking
• Study queue prioritization (relearning → learning → reviews → new)

Technical

• Pure client-side JavaScript (no server required)
• LocalStorage with compression for data persistence
• Service Worker for offline caching
• Web Audio API for notification sounds
• Web Notifications API support

🚀 Quick Start

Option 1: Direct File Open

cd /home/tsukhani/.openclaw/workspace/visual-explainers/igcse-master
# Open index.html in browser

Option 2: Local Server (Recommended)

# Using Python
python3 -m http.server 8080

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8080

Then visit: http://localhost:8080

Option 3: Live Server (VS Code)

Install "Live Server" extension and click "Go Live"

📁 File Structure

igcse-master/
├── index.html          # Main application
├── styles.css          # Complete styling (dark/light themes)
├── app.js              # Core application logic
├── srs.js              # Spaced repetition engine (SM-2)
├── sw.js               # Service Worker (offline support)
├── README.md           # This file
├── data/
│   └── subjects.json   # Subject metadata & settings
└── research/
    ├── 01-srs-algorithms.md
    ├── 02-ui-patterns.md
    ├── 03-localstorage-optimization.md
    └── 04-service-worker.md

🎮 How to Use

First Time Setup

1. Open index.html in browser
2. Grant notification permission (for Pomodoro reminders)
3. Generate sample cards (console: generateSampleCards())

Daily Study Flow

1. Check Dashboard - See cards due, streak, XP
2. Select Subject - Click subject card or "Quick Start"
3. Study Cards - Rate each card (Again/Hard/Good/Easy)
4. Complete Session - View summary, earn XP
5. Use Pomodoro - 25min focus sessions with breaks

Keyboard Shortcuts (during study)

• Space / Enter - Flip card
• 1 - Again (failed)
• 2 - Hard
• 3 - Good
• 4 - Easy
• ← - Previous card
• → - Next card

🔧 Configuration

Edit data/subjects.json to customize:

• Subject list and metadata
• Daily new card limit
• Daily review limit
• Pomodoro timing
• Learning steps

Example: Add Custom Cards

// In browser console
const card = SRS.initCard(
  'What is the capital of Malaysia?',
  'Kuala Lumpur',
  'malay'  // subject ID
);
AppState.cards.push(card);
saveCards();

📊 SM-2 Algorithm Details

Rating Scale

• 1 (Again) - Failed, reset to learning phase
• 2 (Hard) - Difficult, interval × 1.2, EF -0.15
• 3 (Good) - Standard progression
• 4 (Easy) - Interval × 1.3, EF +0.15

Interval Progression

• New → 1 day → 3 days → 7 days → 14 days → 30 days → 60+ days
• Learning phase: 1 minute → 10 minutes → Graduated

Ease Factor (EF)

• Starts at 2.5
• Minimum 1.3
• Adjusts based on performance

🎨 Theme System

Dark Theme (Default)

• Background: Deep blue/slate (#0f172a, #1e293b)
• Text: Light (#f8fafc, #cbd5e1)
• Accents: Vibrant colors per subject

Light Theme

• Background: Warm cream (#faf8f5, #ffffff)
• Text: Dark (#1e293b, #475569)
• Same accent colors

Toggle via theme button or system preference.

📱 Mobile Optimization

• Touch targets: 48px minimum
• Safe area insets for notched devices
• Responsive grid (1/2/3 columns)
• Swipe-friendly card interface
• Reduced animations on mobile

🔐 Data Storage

All data stored in browser LocalStorage:

• igcse_cards - All flashcards
• igcse_progress - SRS progress data
• igcse_stats - XP, streak, review counts
• igcse_settings - User preferences
• igcse_theme - Theme choice

Note: Clearing browser data will delete all progress. Export feature coming soon.

🛠️ Development

Adding New Features

1. Create feature branch
2. Add to appropriate file (app.js for logic, styles.css for UI)
3. Test offline functionality
4. Update README

Debugging

// In browser console
console.log(AppState);  // View current state
console.log(SRS);       // View SRS functions
saveCards();            // Force save
loadCards();            // Force reload

Performance

• Cards compressed before storage
• Lazy rendering for large decks
• Minimal re-renders
• CSS animations over JS

📝 Future Enhancements

• Card import/export (JSON, Anki format)
• Quiz mode (multiple choice)
• Subject-specific card templates
• Cloud sync (optional)
• Study statistics dashboard
• Custom card creation UI
• Image/audio support in cards
• Shared decks
• Progress backup/restore

🎓 Learning Resources

Research files in /research directory:

• SM-2 algorithm implementation
• Mobile UI patterns (Duolingo, Anki, Quizlet)
• LocalStorage optimization
• Service Worker caching strategies

🙏 Credits

Built for: Kheshav Sukhani
Algorithm: SM-2 (SuperMemo-2, same as Anki)
Design Inspiration: Duolingo, AnkiMobile, Quizlet
Fonts: DM Sans, Fira Code (Google Fonts)

---

Version: 1.0.0 (Core Foundation)
Last Updated: April 19, 2026
Status: Production Ready ✅