# PoR PDF — Full Design Analysis (21 Pages)

## App Overview
**SPOKEN** — A voice-interactive physics learning application. Dark purple/violet background, dot-grid texture, 3D rendered illustrations, frosted-glass content cards.

---

## Screen Types Identified

### 1. Master Map (Pages 1-2 of original brief)
- 2×3 grid of problem cards with 3D physics illustrations
- "Review the Map" and "Create Your Own" cards
- Entry point to the app

### 2. Concept Explanation / Present Phase (Pages 1-3)
- Left sidebar: lesson navigation (Acceleration, Friction, Torque, Full Review, Create Your Own)
- Center: 3D annotated physics diagram (pulley system with force labels, speed annotations)
- Bottom: frosted-glass explanation card with concept title + body text
- Yellow tooltip annotations on the diagram
- Green curved line connecting sidebar card to content
- Progressive disclosure: initial analogy → deeper mathematical explanation
- Right side: "Rehearsal" button with numbered queue badges
- Bottom-right: large circular microphone button

### 3. Canvas/Zoom-Out View (Page 3)
- Multiple instances of the physics diagram visible on a spatial canvas
- Sidebar expands to show more cards
- Spatial layout — content arranged on 2D canvas, not linear slides

### 4. Rehearsal Quiz — Multiple Choice (Pages 4-8, 14-15)
- Question prompt in dark banner
- 4 answer options (A-D), large readable text
- Selection state: white filled bullet + bordered/highlighted container
- "Harmonize" button at bottom
- Audio waveform visualization (voice interaction)

### 5. Correct Answer Feedback (Pages 6, 18)
- Only the correct answer shown, others removed
- Green pill: "This is correct"
- "✓ Harmonize" (checkmark indicating completion)
- "Say: 'Restate'" button — voice prompt to verbally restate the concept

### 6. Incorrect Answer Feedback (Page 8)
- Only the wrong answer shown
- Red/coral pill: "This is incorrect, explain why"
- "Say: 'explain'" button — Socratic approach, asks student to engage with WHY it's wrong

### 7. Follow-Up Question After Wrong Answer (Page 14)
- New question explaining why the previous answer was wrong
- "'B. The block is in free-fall...' is incorrect because:"
- New set of 4 options
- Harmonize button now shows numbered steps (1, 2)

### 8. Change Octaves / Restatement (Page 17)
- "Change octaves: say the same thing in a different way"
- Multi-select revealed: "there is more than one correct answer" (green pill)
- "Restatement" button replaces "Harmonize"
- Multiple answers can be selected simultaneously

### 9. Topic/Label Browser — Grid Gallery (Page 19)
- 2×2 grid of problem cards filtered by topic (e.g., "Label: Torque")
- Each card: difficulty tag (3.1, 4.1, 5.1) + topic label + 3D illustration + title
- Stacked card effect suggesting sub-problems/variations
- Problems: Pulley system, Rolling ball on incline, Leaning Rod (Statics), Cylinder and Cube

### 10. Concept Node Map / Learning Path (Page 20)
- Spatial graph/mind-map for a specific problem
- Central card (the problem) connected via green/yellow curves to sub-modules:
  - "Friction creates Torque"
  - "Moment of Inertia"
  - "Linear and angular accelerations"
  - "The whole story" (Full Review)
  - "Create your own" (golden gradient)
- Each sub-module has its own tag (Friction, Torque, Inertia, Acceleration)
- "Work" button on the expanded card to begin a module

### 11. Problem Detail — Free Body Diagram (Page 21)
- Detailed 3D free-body diagram with force vectors (N, mg, f, a)
- Conceptual question: "With or without slipping?"
- Explanatory text in green/teal
- Entry point to solving the problem

---

## Learning Flow (Full Cycle)

```
Map (pick a problem)
  → Node Graph (see all concepts for that problem)
    → Present (3D diagram + explanation + analogy)
      → Deepen (progressive disclosure, more detail)
        → Rehearsal Quiz (multiple choice, voice)
          → Correct? → "This is correct" → "Say: Restate"
          → Wrong? → "This is incorrect, explain why" → Follow-up question
            → Loop until correct
          → Change Octaves (restate differently, multi-select)
        → Full Review (all concepts reconnected)
          → Create Your Own (capstone)
```

---

## UI Component Inventory

| Component | Description |
|-----------|-------------|
| **Top Nav** | SPOKEN logo, breadcrumbs (closable tabs), user avatar, icons (record, bookmark, share) |
| **Left Sidebar** | Collapsible (« chevron), vertical card stack for lesson modules, green connecting curves |
| **3D Illustrations** | Red frames, blue pulleys, gold strings, red masses, green balls, orange wedges |
| **Explanation Card** | Frosted glass, icon + title + body, key terms highlighted yellow/green |
| **Yellow Tooltip** | Annotation callout on diagrams |
| **Quiz Options** | Large text A-D, white bullet selection indicator, bordered highlight box |
| **Feedback Pills** | Green "This is correct" / Red "This is incorrect, explain why" |
| **Action Buttons** | Rehearsal (numbered badges), Harmonize (with steps), Restatement, "Say: ..." |
| **Microphone** | Large circular button, bottom-right, always available |
| **Audio Waveform** | Rounded container with vertical bars |
| **Problem Cards** | 3D illustration + difficulty tag + topic label + title, stacked layers effect |
| **Node Map** | Spatial graph with curved connection lines, expandable cards with "Work" CTA |

---

## Design Language

- **Colors:** Deep purple (#1a0a2e-ish) background, lime/teal accents, gold/yellow highlights, red for incorrect, green for correct
- **Typography:** Large, readable, mixed serif/sans-serif
- **3D Style:** Isometric/perspective rendered physics objects, colorful and illustrative
- **Cards:** Frosted glass / translucent with subtle borders
- **Spatial:** Canvas-based layout, green curved connecting lines between elements
- **Interaction:** Voice-first (microphone always present), progressive disclosure, Socratic feedback loops