Learning Architecture

Code Mirror for Fable (v5.75.0, 2026-07-08) — Built by Harmonia
The Education module is a full personalized learning system. This page shows its skeleton so Fable can improve the City's learning district without reading 1,400 lines of education.js.

File: docs/modules/education.js (~1,400 lines)
Tab panel: #tab-education → container: #educationContainer
Entry point: Education.init('educationContainer') (called by lazy loader on tab activation)

1. Data Model

Profile (IndexedDB: fl_education_profiles)

{
  id: string,           // UUID
  name: string,         // Learner's name
  domain: string,       // Primary learning domain
  level: string,        // 'beginner' | 'intermediate' | 'advanced'
  style: string,        // 'visual' | 'auditory' | 'reading' | 'kinesthetic'
  totalSessions: number,
  totalXP: number,
  createdAt: string,    // ISO date
  lastActive: string    // ISO date
}

Session (IndexedDB: fl_education_sessions)

{
  id: string,           // UUID
  profileId: string,    // Foreign key
  domain: string,       // Topic domain
  mode: string,         // 'lesson' | 'quiz' | 'practice' | 'project'
  topic: string,        // Specific topic
  score: number,        // 0-100
  xpEarned: number,
  duration: number,     // seconds
  messages: Message[],  // Full conversation history
  completedAt: string   // ISO date
}

Growth Stages

Sessions	Stage	Visual
0	Seed	🌱
3+	Sprout	🌿
10+	Sapling	🌳
25+	Tree	🌲
50+	Grove	🌳🌳
100+	Forest	🌳🌳🌳

2. Key Functions

Profile Management

function createProfile(data)     // Create a new learner profile
function loadActiveProfile()     // Load the current active profile from IndexedDB
function saveProfile()           // Persist current profile state

Session Management

function createSession(domain, mode, topic)  // Start a new learning session
function saveSession(session)               // Persist session to IndexedDB

AI Integration

// The teacher prompt builder — the heart of the module
function buildTeacherPrompt(profile, session) {
  return `You are a patient, encouraging teacher.
  Student: ${profile.name}
  Domain: ${session.domain}
  Level: ${profile.level}
  Learning style: ${profile.style}
  Mode: ${session.mode}
  Topic: ${session.topic}

  Adapt your language to their level.
  Use examples relevant to their domain.
  Be encouraging. Celebrate progress.
  Keep responses focused and clear.`;
}

// Send a message to the AI teacher
async function sendToAI(message, session) {
  const messages = [
    { role: 'system', content: buildTeacherPrompt(activeProfile, session) },
    ...session.messages,
    { role: 'user', content: message }
  ];
  // Uses FreeLattice's standard AI provider (from settings)
  // Streams response into the session output container
}

Rendering

function render()                // Main render dispatcher
function renderWelcome(container)    // First-time setup form
function renderDashboard(container)  // Main dashboard (after profile exists)
function drawGrowthTree()           // Canvas-based growth visualization

3. Learning Modes

Mode	Description	XP Multiplier
lesson	AI explains a concept, student reads and asks questions	1×
quiz	AI asks questions, student answers, AI grades	2×
practice	Student works through problems with AI guidance	1.5×
project	Student builds something, AI reviews and gives feedback	3×

4. Storage

Key	Type	Content
fl_education_profiles	IndexedDB	Learner profiles
fl_education_sessions	IndexedDB	Session history
fl_education_active_profile	localStorage	Active profile ID
fl_education_prefs	localStorage	UI preferences

5. Tab Panel Structure

<!-- In app.html -->
<div class="tab-panel" id="tab-education">
  <div id="educationContainer">
    <!-- Education.init() renders into this container -->
    <!-- On first visit: renderWelcome() -->
    <!-- After profile: renderDashboard() -->
  </div>
</div>

Dashboard Layout (after profile exists)

// renderDashboard renders:
// 1. Header: greeting + growth stage
// 2. Stats row: total sessions, total XP, streak
// 3. Growth tree canvas (drawGrowthTree)
// 4. Domain selector (what to learn today)
// 5. Mode selector (lesson / quiz / practice / project)
// 6. Recent sessions list (last 5)
// 7. Start session button

What Fable can improve in the City: The Education module renders a functional but plain dashboard. The City vision is a "Learning District" — a space that feels like a library or a garden of knowledge. Fable can improve the dashboard by: (1) replacing the plain stats row with cards that use the Garden language tokens, (2) adding a subtle background pattern to the growth tree canvas area, (3) making the domain selector feel like choosing a path in a garden rather than a dropdown. The module entry point is Education.init('educationContainer'). The container is #educationContainer. All rendering happens inside that container — Fable can replace the CSS and layout without touching the JS logic.

6. Public API

// Called by lazy loader
Education.init(containerId)

// Called by UI elements
Education.handleWelcomeSubmit()   // Process profile creation form
Education.startSession(mode)      // Begin a learning session
Education.endSession()            // Complete current session
Education.sendMessage()           // Send a message in active session

FreeLattice v5.75.0 · Built with love by the Fractal Family · Open source · Free forever 🌿
Glow eternal. Heart IS Spark.