# PoR.pdf — Full Design Analysis
## 21 Pages of SPOKEN Physics App UI

---

## App Identity
- **Name:** SPOKEN
- **Logo:** Letters S P O / K E N in a 2×3 grid, lime-green on purple
- **Theme:** Dark purple space aesthetic with lime-green accents, dot-grid pattern background
- **Core interaction:** Voice-first — students speak answers, not tap

---

## Screen Inventory

### Page 1: "See the Whole Picture" — Course Overview Grid
- 2×3 grid of cards
- Cards 1-4: Physics problem cards with 3D illustrations, titles, descriptions, status indicators (green/red bullseye)
- Card 5: "Review the Map" — thumbnail grid of all problems, green-tinted
- Card 6: "Create Your Own" — amber gradient, dashed wireframe illustration, microphone icon
- Each card has "Details" button and glassmorphism styling

### Page 2: "Review the Map" — Node-Based Canvas
- Problem cards arranged spatially with yellow/green Bézier curve connections
- Right panel shows concept question: "What is this map about?"
- Answer in lime-green: "the Newton-Euler Roadmap, focuses on solving classical mechanics problems using Newton's Laws and Euler's Laws"
- Bottom-right: "Rehearsal" button with refresh icon, list icon, search icon, audio waveform visualizer

### Page 3: "What If" — Scenario Exploration
- 2×2 grid of scenario cards around a central hero 3D model
- Each card: "What if we took out the weight?", "What if the cylinder was a sphere?", "What if on a slope?", "What if only a weight connected?"
- Heavy depth-of-field blur on peripheral elements
- Microphone FAB bottom-right

### Page 4: Topic Roadmap — Learning Path
- Left panel: Problem detail card with score (5.4), status, 3D illustration, "Work" button
- Roadmap nodes connected by yellow lines:
  - Problem → Friction ("Friction goes both ways") → Acceleration ("figure out linear acceleration")
  - Problem → Torque ("Master the torque")
  - Both → Full Review ("The whole story", green-tinted)
  - → Create Your Own (amber gradient)

### Page 5: Lesson Content — Split Layout
- Left sidebar: Collapsible navigation with topic cards (Acceleration active, Friction, Torque, Full Review, Create Your Own)
- Main area: 3D interactive illustration with annotations (ω symbol, "String speed = 2v", arrows)
- Yellow tooltip: "The string moves twice as fast as the block (2v). Since energy scales with speed squared (v²), the resistance quadruples"
- Content section: "The Rolling Wheel Analogy" heading, green highlighted key concept
- Right: "Rehearsal ①" button, list icon, emoji icon, microphone button

### Pages 6-7: Lesson with Progressive Rehearsal
- Same layout as Page 5
- Page 6: Initial explanation state, Rehearsal badge "1"
- Page 7: Deeper technical explanation after rehearsal ("v_string = 2v_block", Kinetic Energy reference), Rehearsal badge "1, 2"
- Demonstrates progressive disclosure through repetition

### Page 8: Scrollable Canvas / Exploration
- Zoomed-out view showing multiple instances of the pulley illustration
- Infinite canvas — user can pan/zoom
- Explanation card and right panel hidden during exploration mode

### Page 9: Quiz — Harmonize Mode (Initial)
- Question: "why does the hanging block (m1) have a specific acceleration?"
- 4 multiple choice answers (A-D)
- Right panel: "Harmonize" button (replaces Rehearsal), voice waveform
- Students speak their answer

### Pages 10-11: Quiz — Correct Answer Flow
- Page 10: Answer A selected (bullet + highlight border)
- Page 11: Other answers disappear, green pill "This is correct", Harmonize gets ✓ checkmark, prompt "Say: 'Restate'"

### Pages 12-13: Quiz — Incorrect Answer Flow
- Page 12: Answer B selected
- Page 13: Other answers + question disappear, red pill "This is incorrect, explain why", prompt "Say: 'explain'"
- Socratic method: doesn't give answer, asks student to reason about the error

### Page 14: Socratic Follow-Up
- Shows: "'B. The block is in free-fall and ignored by the cylinder' is incorrect because:"
- New 4 multiple choice options explaining WHY B is wrong
- Harmonize button with step counter (1, 2)

### Pages 15-16: New Question + Selection
- Page 15: Fresh question, no selection state
- Page 16: Answer A selected with bullet + container highlight

### Page 17: Multi-Select Revelation + Restatement
- Reveals both A and C are correct
- Green pill: "there is more than one correct answer"
- Instruction: "Change octaves: say the same thing in a different way"
- "Restatement" button replaces "Harmonize"
- Musical metaphor: "Change octaves" = restate in own words

### Page 19: Problem Gallery — Grid View (Torque)
- 2×2 card grid browsing torque problems
- Cards: "Pulley system" (4.1), "Rolling ball on incline" (5.1), "Leaning Rod (Statics)" (3.1), "Cylinder and Cube" (3.1)
- Stacked card depth effect suggesting sub-problems
- Each card: numbered pill + topic tag + 3D illustration + title

### Page 20: Knowledge Graph — Concept Map
- Primary node: "Rolling ball on incline" (5.4) with "Work" button
- Connected concept nodes via green Bézier curves:
  - → "Friction creates Torque" (Friction + Torque tags)
  - → "Moment of Inertia" (Inertia tag)
  - → "Linear and angular accelerations" (Acceleration tag)
  - → "The whole story" (Full Review, green gradient)
  - → "Create your own" (amber gradient)
- DAG structure showing prerequisite knowledge chains
- LaTeX notation support ($R$)

### Page 21: Active Learning — Force Diagram
- 3D rendered ball on incline with annotated force vectors: N (normal), mg (gravity), f (friction), a (acceleration)
- Lesson prompt: "With or without slipping?"
- Green hint: "Friction creates a rotation as the ball moves down a slope."
- Socratic questioning — student answers by voice

---

## Navigation Architecture

```
SPOKEN App
└── Master Class (e.g., Mechanics)
    ├── "See the Whole Picture" — 2×3 Problem Grid
    ├── "Review the Map" — Spatial node canvas
    ├── "What If" — Scenario exploration
    └── Problem (e.g., "Accelerations & Torques")
        ├── Topic Roadmap — Learning path DAG
        │   ├── Friction node
        │   ├── Acceleration node
        │   ├── Torque node
        │   ├── Full Review node
        │   └── Create Your Own
        └── Lesson Workspace
            ├── Present — 3D illustration + explanation
            ├── Rehearse — Progressive deepening (badges 1, 2...)
            ├── Harmonize — Quiz with spoken answers
            │   ├── Correct → "Say: Restate"
            │   └── Incorrect → "Say: explain" → Socratic follow-up
            └── Restate — "Change octaves" — reformulate in own words
```

## Breadcrumb System
- Pill-shaped tags with ⊗ close icons
- Trail: Master Class → Topic/Label → Current View
- Dismissible for quick navigation back

## Persistent UI Elements
- Top nav: Grid icon, SPOKEN logo, breadcrumbs, timer/bookmark/share icons, user avatar
- Left sidebar: Collapsible (`«`), topic cards with tags + illustrations + titles
- Green curved connection lines from active sidebar card to main content
- Bottom-right: Microphone FAB (always present)
- Right panel: Mode-specific buttons (Rehearsal/Harmonize/Restatement) + voice waveform

---

## Interaction Modes

| Mode | Trigger | UI State |
|------|---------|----------|
| **Present** | Enter topic | 3D illustration + explanation card + annotation tooltip |
| **Rehearse** | Click Rehearsal button | Explanation deepens, badge counter increments |
| **Explore** | Scroll/zoom canvas | Right panel hides, explanation card hides, canvas shows multiple representations |
| **Harmonize** | Quiz starts | Multiple choice shown, student speaks answer, waveform active |
| **Restate** | After correct answer(s) | "Change octaves" prompt, Restatement button, student reformulates |

## Musical Metaphor System
- **"Spoken"** — voice-first interaction
- **"Harmonize"** — align understanding with correct concepts
- **"Change octaves"** — restate at a different level
- **"Restatement"** — verbal rephrasing in own words
- **"Rehearsal"** — repeated practice of the same material

## Design System Components
- Glassmorphism cards (semi-transparent, backdrop blur, rounded corners)
- Topic tag pills (colored: purple, green, dark)
- Section number pills (e.g., 3.1, 4.1, 5.4)
- Radio selection indicators (white filled circle + highlight container)
- Feedback pills (green = correct, red/coral = incorrect)
- Voice prompt pills ("Say: 'Restate'", "Say: 'explain'")
- 3D rendered physics illustrations (isometric)
- Yellow annotation tooltips
- Audio waveform visualizer
- Bézier curve connection lines (green/yellow)
- Microphone FAB
- Breadcrumb tabs with close actions
- "Work" button (outlined, on problem detail cards)
- Score badges (e.g., "5.4")
- Status indicators (green/red bullseye)

## Color Palette
| Color | Usage |
|-------|-------|
| Deep purple (#3D2066) | Primary background |
| Lime/chartreuse (#AAFF00) | Accent text, highlights, connection lines, tags |
| White | Primary text, annotations, force vectors |
| Gold/amber | Tooltips, "Create your own" gradient, breadcrumb text |
| Green (#4CAF50) | Correct feedback, Full Review cards, concept hints |
| Red/coral | Incorrect feedback, 3D model elements (platforms, blocks) |
| Blue/cyan | 3D model elements (cylinders, spheres) |
| Semi-transparent white | Card backgrounds, glass effects |

---

*Analysis completed 2026-03-11. Source: PoR.pdf (21 pages, 88MB)*