# Visual Guide: Progress Bar & Tooltips

## Progress Bar Example

### Initial State (0 cards sorted)
```
┌─────────────────────────────────────────────────────────────┐
│ Cards                                         0 remaining    │
├─────────────────────────────────────────────────────────────┤
│ You've sorted 0 of 43 cards                                 │
│ [░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░] 0%  │
├─────────────────────────────────────────────────────────────┤
│ [Card 1] [Card 2] [Card 3] [Card 4] ... (horizontal scroll)│
└─────────────────────────────────────────────────────────────┘
```

### In Progress (30 cards sorted)
```
┌─────────────────────────────────────────────────────────────┐
│ Cards                                        13 remaining    │
├─────────────────────────────────────────────────────────────┤
│ You've sorted 30 of 43 cards                                │
│ [████████████████████████████░░░░░░░░░░░░░░░░░░░░░░] 70%   │
├─────────────────────────────────────────────────────────────┤
│ [Card 20] [Card 35] [Card 41] ... (horizontal scroll)      │
└─────────────────────────────────────────────────────────────┘
```

### Complete (43 cards sorted)
```
┌─────────────────────────────────────────────────────────────┐
│ Cards                                         0 remaining    │
├─────────────────────────────────────────────────────────────┤
│ ✓ You've sorted 43 of 43 cards (GREEN TEXT)                │
│ [██████████████████████████████████████████████████] 100%   │
├─────────────────────────────────────────────────────────────┤
│ (No cards remaining - all sorted!)                          │
└─────────────────────────────────────────────────────────────┘
```

---

## Tooltip Example - Card WITHOUT Tooltip

### Desktop View
```
┌──────────────────────┐
│   Payment Options    │
└──────────────────────┘
```

### Participant sees:
- Just the card title
- No question mark icon
- Standard card appearance

---

## Tooltip Example - Card WITH Tooltip

### Desktop View (Before Hover)
```
┌─────────────────────────┐
│ Operating Loan  (?)     │
└─────────────────────────┘
```

### Desktop View (On Hover)
```
        ┌─────────────────────────────────────┐
        │ Short-term financing to cover       │
        │ day-to-day farm expenses like       │
        │ seeds, fertilizer, and labor        │
        └──────────────┬──────────────────────┘
                       ▼
┌─────────────────────────┐
│ Operating Loan  (?)     │ ← Blue highlight on icon
└─────────────────────────┘
```

### Mobile View (After Click)
```
        ┌─────────────────────────────────────┐
        │ Short-term financing to cover       │
        │ day-to-day farm expenses like       │
        │ seeds, fertilizer, and labor        │
        └──────────────┬──────────────────────┘
                       ▼
┌─────────────────────────┐
│ Operating Loan  (?)     │ ← Stays visible until clicked again
└─────────────────────────┘
```

---

## Card Management Interface

### Without Tooltip
```
┌────────────────────────────────────────────────────────┐
│ ☐  Payment Options                    [Edit] [Delete]  │
└────────────────────────────────────────────────────────┘
```

### With Tooltip
```
┌────────────────────────────────────────────────────────┐
│ ☐  Operating Loan                     [Edit] [Delete]  │
│    💡 Short-term financing for expenses                │
└────────────────────────────────────────────────────────┘
```

### Edit Modal
```
┌───────────────────────────────────────────────────────────┐
│ Edit Card                                          [X]     │
├───────────────────────────────────────────────────────────┤
│                                                            │
│ Card Title                                                 │
│ ┌────────────────────────────────────────────────────────┐│
│ │ Operating Loan                                         ││
│ └────────────────────────────────────────────────────────┘│
│                                                            │
│ Tooltip (optional)                                         │
│ ┌────────────────────────────────────────────────────────┐│
│ │ Short-term financing to cover day-to-day farm         ││
│ │ expenses like seeds, fertilizer, and labor            ││
│ │                                                        ││
│ └────────────────────────────────────────────────────────┘│
│                                                            │
│  [Save Changes]  [Cancel]                                 │
└───────────────────────────────────────────────────────────┘
```

---

## Color Scheme

### Progress Bar
- **Track (empty):** Semi-transparent white `rgba(255,255,255,0.05)`
- **Fill (progress):** Blue gradient `#3ea6ff → #5ab5ff`
- **Border:** Dark gray `#243242`
- **Text (in progress):** Muted gray `#9fb0c0`
- **Text (complete):** Success green `#5a5`

### Tooltips
- **Icon Background:** Light blue `rgba(62,166,255,0.2)`
- **Icon Border:** Accent blue `#3ea6ff`
- **Icon Text:** Accent blue `#3ea6ff`
- **Popup Background:** Panel dark `#131a22`
- **Popup Border:** Accent blue `#3ea6ff`
- **Popup Text:** Light text `#e6edf3`
- **Popup Shadow:** Dark shadow `rgba(0,0,0,0.6)`

---

## Animation Details

### Progress Bar
- **Transition:** 0.3 seconds ease
- **Effect:** Smooth width expansion
- **Trigger:** When card is moved

### Tooltip
- **Fade In:** 0.2 seconds
- **Fade Out:** 0.2 seconds
- **Icon Hover:** 1.1x scale, color change
- **Effect:** Opacity transition

---

## Responsive Behavior

### Desktop (>768px)
- Progress bar: Full width in sticky panel
- Tooltips: Centered above card, max 280px
- Interaction: Hover to show tooltip

### Tablet (≤768px)
- Progress bar: Full width, slightly smaller text
- Tooltips: Max 90vw width, left-aligned
- Interaction: Click to toggle tooltip

### Mobile (≤480px)
- Progress bar: Stays at top of viewport
- Card panel: No longer sticky (prevents scroll issues)
- Tooltips: Full width minus margins
- Interaction: Click to toggle tooltip

---

## Example Study: Compeer Financial Terms

### Sample Cards with Tooltips

1. **Operating Loan**
   - Tooltip: "Short-term financing to cover day-to-day farm expenses like seeds, fertilizer, and labor"

2. **HELOC**
   - Tooltip: "Home Equity Line of Credit - a revolving credit line secured by your home equity"

3. **Fixed Rate Mortgage**
   - Tooltip: "A loan where the interest rate stays the same for the entire repayment period"

4. **Working Capital**
   - Tooltip: "Money available to cover day-to-day business operations and short-term expenses"

5. **Debt Service Coverage**
   - Tooltip: "A measure of cash flow available to pay debt obligations, expressed as a ratio"

### Cards WITHOUT Tooltips (Self-explanatory)
- Payment Options
- Contact Us
- Apply Now
- FAQs
- Customer Service

---

## User Journey

### Step 1: Start Card Sort
```
Participant sees:
- Welcome screen with instructions
- "Start Card Sort →" button
- Progress: 0 of X cards
```

### Step 2: Begin Sorting
```
Participant sees:
- Progress bar at 0%
- All cards in unsorted area
- Some cards have (?) icons
- Empty categories below
```

### Step 3: Encounter Unknown Term
```
Participant hovers over (?):
- Tooltip appears with definition
- "Oh, now I understand!"
- Sorts card to appropriate category
- Progress bar increases
```

### Step 4: Make Progress
```
After sorting 20 of 43 cards:
- Progress bar shows ~47%
- Text: "You've sorted 20 of 43 cards"
- Participant motivated to continue
```

### Step 5: Complete Sort
```
All 43 cards sorted:
- Progress bar: 100% (full blue)
- Text turns green: "You've sorted 43 of 43 cards"
- "✓ Finish Sort" button ready
- Sense of accomplishment!
```

---

## Accessibility Features Visualization

### Screen Reader Experience
```
Progress Bar:
- Announces: "You've sorted 30 of 43 cards"
- Updates automatically as user sorts
- Clear progress information

Tooltip Icon:
- Announced as: "Help button, [term definition]"
- Keyboard accessible
- ESC key closes tooltip
```

### High Contrast Mode
```
All elements maintain visibility:
- Blue borders remain distinct
- Text contrasts with backgrounds
- Icons clearly visible
- Buttons distinguishable
```

### Keyboard Navigation
```
TAB: Move between interactive elements
ENTER: Activate buttons/links
ESC: Close tooltip modal
ARROW KEYS: Scroll card area
```

---

**Remember:** The goal is to make participants feel:
1. **Informed** (tooltips explain terms)
2. **Motivated** (progress bar shows advancement)
3. **Confident** (clear what's remaining)
4. **Accomplished** (visual completion feedback)

This creates a positive user experience that leads to higher completion rates and better quality data!