FSUMA is an interactive web-based learning application designed specifically to empower elementary students with dyslexia and reading challenges. The platform incorporates visual theme customization, phonics breakdown tools, assistive audio technology, and structured reading passages to make reading accessible, clear, and engaging.
- Overview
- Key Features
- Interactive Dyslexia Toolkit
- Authentication & User Session Management
- Technology Stack
- Project Directory Structure
- Getting Started
- Git Repository Setup
- Accessibility Standards
- Contact Information
Dyslexia affects how children process written language, often causing visual stress, letter reversal confusion, and difficulties with syllable blending. FSUMA provides an intuitive digital interface that reduces visual cognitive load through customizable screen contrast, specialized typography (Lexend, Comic Neue), line-focus guides, and speech synthesis.
The platform functions entirely on modern web standards without external framework overhead, delivering fast page load times, full offline capability, and high performance on desktop and mobile devices.
- Screen Themes: Switch between Bright Mode (default warm cream), Dark Mode, Warm Cream Paper Mode, and Soft Cyan Mode to minimize Scotopic Sensitivity (Irlen Syndrome).
- Accessible Fonts: Choice between Lexend, Comic Neue, and Arial sans-serif typefaces.
- Font Zoom & Scaling: Adjust font sizing dynamically from 85% to 140%.
- Color Overlay Tint: Transparent, Warm Yellow, Cyan Blue, and Soft Mint overlays for glare reduction.
- Dynamic View Status: Real-time status indicator displaying the active theme, zoom level, and version tag (
Fsuma 2026).
- Graded Passage Library: Pre-loaded reading passages categorized by grade level (Grade 1 through 4).
- Custom Text Importer: Allows students, parents, or teachers to paste any custom assignment or story directly into the reader interface.
- Text-to-Speech (TTS): Built-in audio reader utilizing the Web Speech API with Play, Pause, Stop, speech rate control (0.75x, 1.0x, 1.25x), and real-time word highlighting.
- Bionic Reading Mode: Automatically bolds the initial letters of each word to facilitate smoother visual guidance across sentences.
- Line Focus Ruler: Interactive spotlight guide following mouse cursor movement to isolate individual lines of text.
The platform includes four specialized interactive learning modules:
- Syllable & Phonics Breaker: Uses heuristic syllabification algorithms to split complex words into color-coded clap-along blocks, accompanied by audio pronunciation.
- b / d / p / q Confusables Trainer: A visual discrimination memory game designed to help children differentiate between commonly mirrored letters (b, d, p, q) using visual mnemonic prompts.
- Phonics Word Builder Quest: An audio-based spelling activity where students hear a target word and type the matching letter sequence to earn progress badges.
- Voice Dictation Assistant: Converts spoken words into written text in real time using browser-native Speech Recognition, assisting students with dictation and composition.
FSUMA features a client-side authentication system with persistent local storage (localStorage):
- Registration & Sign-In: Validates email syntax, enforces minimum password lengths, and includes password visibility toggling.
- Instant Demo Accounts: Offers quick single-click login for demonstration and evaluation:
- Demo Student: Alex Johnson (
alex@example.com) - Demo Parent: Sarah Johnson (
sarah@example.com)
- Demo Student: Alex Johnson (
- Profile Dashboard: Tracks daily learning streak counters, percentage completion bars, role designations, and earned achievement badges across browser sessions.
- Markup: Semantic HTML5 with explicit WAI-ARIA accessibility attributes.
- Styling: Vanilla CSS3 using custom properties (CSS variables), CSS Grid, Flexbox, glassmorphism UI components, and fluid typography.
- Logic: Vanilla JavaScript (ES6+) structured with modular event delegation, state management, and defensive error handling.
- Web APIs: Web Speech API (
window.speechSynthesis), Web Speech Recognition (window.SpeechRecognition/webkitSpeechRecognition), LocalStorage API.
fsuma/
├── index.html # Main HTML layout, navigation, modals, and section templates
├── style.css # Complete CSS design system, themes, overlays, and responsive rules
├── app.js # Main JavaScript application engine and interactive tool logic
└── README.md # Comprehensive project documentation
No build tools or external dependencies are required. To launch the application locally:
- Clone or download the project files into a local folder.
- Open
index.htmldirectly in any modern web browser (Google Chrome, Mozilla Firefox, Microsoft Edge, or Apple Safari). - Alternatively, launch a simple HTTP server from the project directory:
# Python HTTP Server
python -m http.server 8080
# Node.js http-server
npx http-server . -p 8080- Navigate to
http://localhost:8080in your browser.
To push this repository to GitHub, execute the following commands in your shell:
# Initialize git if not already initialized
git init
# Add all project files
git add .
# Commit changes
git commit -m "Initial release of FSUMA Dyslexia Learning Platform"
# Set default branch to main
git branch -M main
# Add remote origin
git remote add origin https://github.com/t-mwau/fsuma.git
# Push to GitHub
git push -u origin mainFSUMA is designed following the Web Content Accessibility Guidelines (WCAG 2.1 Level AA/AAA) principles:
- High contrast color combinations across all selectable visual themes.
- Full keyboard navigation support (Tab indexing and Escape key modal dismissal).
- Semantic landmark elements (
header,main,section,footer). - Non-distracting, motion-reduced CSS transitions.
For educational inquiries, technical support, or partnership details, contact:
Savannah Innovate Academy
Email: savannahinnovateacademy@gmail.com
Platform: FSUMA Learning Platform (2026)