BlindPlat

Plateforme d’etude de la numérique et informatique pour enfants aveugles et malvoyants

BlindPlat - Tactile & Vocal Learning Platform

BlindPlat is an inclusive and accessible web-based educational platform designed specifically for visually impaired and blind learners. It introduces digital literacy, computer science concepts, and programming logic through a 100% Tactile (Left / Right) and Vocal interface.

---

Key Features

• **Bimanual/Binaural Tactile Navigation (Left / Right): ** No complex buttons, text inputs, or voice commands required. The entire screen is divided into two intuitive touch zones:
  • Left Side: Confirm / Select Option 1 / Advance.
  • Right Side: Next Option / Re-explain / Select Option 2.
• Interactive Vocal Feedback (TTS): Integrated Text-to-Speech (SpeechSynthesis) that reads out instructions, questions, and feedback in real time alongside audio cue beeps powered by the Web Audio API.
• Age-Tailored Learning Progression:
  • Ages 9–10 (Kids): Introduction to computer basics (CPU, Keyboard/Screen, Passwords & Security).
  • Ages 11–12 (Pre-teens): Understanding the Internet, networks, and everyday algorithms.
  • Ages 13–16 (Teens): Core programming concepts (Variables, If/Else conditions).
  • Ages 17+ (Adults): Software architecture, complexity, and Cryptography/Cybersecurity.
• Automatic Level-Up System: ** Seamless transition between lessons and automatic promotion to the **Next Skill Level upon completing all lessons in a module.
• **Adaptive Thematic Avatars: ** Profile customization featuring age-appropriate icons (Superheroes, Robots, Cyber-Runners, Mentors).

---

Tech Stack

Component	Technology
Frontend	HTML5, CSS3 (CSS Variables, Flexbox, Responsive Design)
Tactile Engine	Vanilla JavaScript (Full-screen event handling)
Audio & Speech	Web Speech API (SpeechSynthesis) & Web Audio API (Oscillators for spatial beeps)
Icons	FontAwesome 6
Typography	Google Fonts (Fredoka & Nunito)

---

Repository Structure

The project is built as a self-contained Single Page Application (SPA) for simple deployment and offline usability:

```text blindplat/ │ ├── index.html # Single file containing HTML, CSS, and JavaScript └── README.md # Project documentation

Key JavaScript Objects: AGE_OPTIONS: Available age categories and corresponding difficulty levels.

AVATARS_BY_GROUP: Collection of available avatars organized by age bracket.

LESSON_PROGRAMS: Educational content (Titles, explanations, re-explanations, questions, correct answers, and feedback).

LEVEL_ORDER: Progression sequence enabling automatic tier upgrades (kids → preteens → teens → adults).

How to Use Launch: Open index.html in any modern web browser (Chrome, Safari, Firefox, Edge).

Start: Tap anywhere on the screen to initialize the Audio Context and TTS engine.

Age Selection:

Tap RIGHT: Cycle through age categories.

Tap LEFT: Select the currently spoken age category.

Avatar Selection:

Tap LEFT: Cycle through available avatars.

Tap RIGHT: Confirm avatar selection.

Lesson Flow:

Listen to the audio explanation.

Tap LEFT to proceed to the question or RIGHT to listen again.

Answer questions by tapping the corresponding side for your chosen answer.

#Accessibility & Inclusive Design Non-Visual Usability: Designed to be operated entirely with eyes closed.

High-Contrast Interface: Dark background (#0C1220) paired with vibrant accent colors (#4ADE80, #2DD4BF) to accommodate low-vision users.

Spatial Audio Cues: Lower frequency beep (350 Hz) on the left side and higher frequency beep (500 Hz) on the right side for distinct audio feedback.