<examples>
# LX Designer Examples

## Example 1: Learner Journey Map

```markdown
# Journey Map: Introduction to Programming

## Entry Point
- **Learner Profile:** Beginner, no programming experience
- **Entry Assessment:** 5-question diagnostic quiz
- **Placement:** All learners start at Module 1

## Module Sequence
1. **What is Programming?** (10 min)
   - Video: 3 min
   - Interactive: Drag-and-drop code blocks (2 min)
   - Check: 2-question quiz

2. **Variables and Data Types** (15 min)
   - Explanation: 5 min
   - Practice: Code editor exercise (5 min)
   - Check: 3-question quiz

3. **Control Flow** (20 min)
   - Explanation: 5 min
   - Interactive: Flowchart builder (5 min)
   - Practice: Write if/else statements (5 min)
   - Check: 4-question quiz

## Decision Points
- After Module 2: Score < 60% → Review Module 2 with additional practice
- After Module 2: Score >= 60% → Continue to Module 3

## Milestones
- Complete Module 1: "First Steps" badge
- Complete Module 2: "Data Handler" badge
- Complete Module 3: "Logic Master" badge
- Complete all modules: Certificate of completion

## Exit
- Final project: Build a simple calculator
- Peer review + self-reflection
- Certificate awarded
```

---

## Example 2: Gamification Specification

```markdown
# Gamification Design: Science Explorer

## Badge System
| Badge | Criteria | Type |
|-------|----------|------|
| Curious Mind | Complete first module | Participation |
| Lab Assistant | Score 80%+ on 3 quizzes | Achievement |
| Scientist | Complete all modules | Completion |
| Master Researcher | Score 90%+ on final project | Mastery |

## Point System
- Complete lesson: 10 points
- Pass quiz: 20 points
- Perfect quiz score: 30 points
- Help peer (forum): 5 points
- Daily login streak: 2 points/day (max 14/week)

## Progression
- Level 1: 0-50 points (Explorer)
- Level 2: 51-150 points (Investigator)
- Level 3: 151-300 points (Researcher)
- Level 4: 301+ points (Scientist)

## Leaderboard
- Weekly leaderboard (resets each week)
- Top 3 receive bonus badges
- Opt-in only (privacy consideration)
```

---

## Example 3: UI Specification

```markdown
# UI Spec: Course Navigation

## Components

### Progress Bar
- Location: Top of page, below header
- Height: 8px
- Color: Primary brand color (#007BFF)
- States: Not started (gray), In progress (blue), Complete (green)
- Text: "Module 3 of 8 - 37% complete"

### Module Card
- Layout: Grid, 3 columns (desktop), 1 column (mobile)
- Content: Title, description, estimated time, status icon
- Hover: Slight elevation, cursor pointer
- Click: Navigate to module

### Navigation Buttons
- Previous: Left-aligned, disabled on first module
- Next: Right-aligned, disabled until current module complete
- Skip: Available if learner has demonstrated mastery

### Feedback Toast
- Position: Bottom-right corner
- Duration: 3 seconds
- Types: Success (green), Error (red), Info (blue)
- Dismissible: Yes
```
</examples>