# flashcards

> Convert JSON flashcards to NotebookLM-style interactive HTML. Features card flip animation, keyboard navigation, and CSV export. Pure frontend - AI generates JSON, this renders the UI.

- Author: Serena
- Repository: serenakeyitan/open-exam-skills
- Version: 20260129175743
- Stars: 10
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/serenakeyitan/open-exam-skills
- Web: https://mule.run/skillshub/@@serenakeyitan/open-exam-skills~flashcards:20260129175743

---

---
name: flashcards
description: Convert JSON flashcards to NotebookLM-style interactive HTML. Features card flip animation, keyboard navigation, and CSV export. Pure frontend - AI generates JSON, this renders the UI.
---

# Flashcards

Convert AI-generated JSON flashcards into NotebookLM-style interactive study interface. Beautiful flip animations, keyboard shortcuts, and one-click CSV export.

## What This Skill Does

**Input**: JSON file with question/answer pairs (generated by AI)
**Output**: NotebookLM-style interactive HTML

This is a **pure frontend converter** - AI (Claude/Gemini) generates the flashcards as JSON, this skill renders them with NotebookLM's exact UI/UX.

## Workflow

```
1. User: "Claude, generate 50 flashcards about quantum physics"
2. Claude: Generates JSON with {question, answer} pairs
3. Save JSON to file (e.g., flashcards.json)
4. Run: python main.py -i flashcards.json -o flashcards.html
5. Open HTML → NotebookLM-style flashcard interface
```

## Exam Mode Features

**Optimized for exam preparation:**
- **Automatic formatting**: Bullet points and numbered lists are automatically formatted with proper line breaks for easy memorization
- **Clean display**: Answers are displayed left-aligned with proper spacing between points
- **Exam-focused content**: When generating flashcards, focus on:
  - Key concepts likely to appear on exams
  - Definitions, formulas, and important facts
  - Step-by-step processes and procedures
  - Comparison and contrast points
  - Common exam questions and their answers

**Answer formatting supports:**
- Bullet points: `•`, `-`, `*` followed by content
- Numbered lists: `1.`, `2.`, `3.` or `1)`, `2)`, `3)`
- Lettered lists: `a.`, `b.`, `c.` or `a)`, `b)`, `c)`
- Each point automatically gets its own line for clarity

## JSON Input Format

### Option A: Simple Array
```json
[
  {
    "question": "What are the three main types of chemical bonds?",
    "answer": "• Ionic bonds\n• Covalent bonds\n• Metallic bonds"
  },
  {
    "question": "List the steps of photosynthesis.",
    "answer": "1. Light absorption\n2. Water splitting\n3. ATP production\n4. Carbon fixation"
  }
]
```

### Option B: With Title
```json
{
  "title": "Quantum Physics Flashcards",
  "flashcards": [
    {
      "question": "What is quantum superposition?",
      "answer": "A state where a qubit exists in multiple states simultaneously."
    }
  ]
}
```

## Usage

```bash
python main.py --input flashcards.json --output flashcards.html
```

Parameters:
- `--input`, `-i`: Input JSON file (required)
- `--output`, `-o`: Output HTML file (default: flashcards.html)

## NotebookLM-Style Features

### Visual Design
- **Purple gradient background** (same as NotebookLM)
- **Dark card front** (question) with "See answer" hint
- **White card back** (answer)
- **Smooth 3D flip animation** (600ms cubic-bezier)
- **Card dimensions**: 600px wide, 420px tall

### Interactions
| Action | Behavior |
|--------|----------|
| Click card | Flip to show answer |
| Press Space | Flip card |
| Press → | Next card |
| Press ← | Previous card |
| Click navigation arrows | Move between cards |
| Click download icon | Export to CSV |
| Click reset icon | Return to first card |

### UI Elements
- **Header**: Title + "Based on 1 source"
- **Instructions**: "Press 'Space' to flip, '← / →' to navigate"
- **Navigation**: Left/right arrow buttons
- **Progress**: "1 / 59 cards"
- **Controls**: Reset button + CSV download button

## CSV Export

Click the download icon to export all flashcards as CSV:
```csv
question,answer
"What is quantum superposition?","A state where..."
"What is quantum entanglement?","A phenomenon where..."
```

Perfect for importing into:
- Anki
- Quizlet
- Excel/Google Sheets
- Other flashcard apps

## Features Comparison

| Feature | This Skill | NotebookLM |
|---------|-----------|------------|
| Single-card view | ✅ | ✅ |
| Flip animation | ✅ | ✅ |
| Keyboard navigation | ✅ | ✅ |
| CSV export | ✅ | ✅ |
| Purple gradient | ✅ | ✅ |
| Progress counter | ✅ | ✅ |
| Explain button | ⏭️ Future | ✅ |

## Technical Details

- **No LLM/AI**: Pure JSON → HTML conversion
- **No API Keys**: No external calls
- **Standalone HTML**: All CSS/JS embedded
- **Offline**: Works without internet
- **Flip Animation**: CSS 3D transforms
- **CSV Generation**: Client-side (no server needed)

## Dependencies

```bash
pip install -r requirements.txt
```

Only requires: `loguru` (logging)

## Integration with AI

### Asking Claude
```
"Generate 30 flashcards about [topic] in JSON format.
Use this structure:
[
  {"question": "...", "answer": "..."}
]
"
```

### Asking Gemini
Same prompt works across any AI model that can generate structured JSON.

## Example Workflow

1. **Generate flashcards with Claude**:
```
User: "Create 20 flashcards about ESPM 42 entomology topics"
Claude: Generates JSON and saves to entomology.json
```

2. **Convert to interactive HTML**:
```bash
python main.py -i entomology.json -o entomology.html
```

3. **Study**:
- Open `entomology.html` in browser
- Use Space to flip
- Use ← → to navigate
- Download CSV for Anki import

## Tips

- **Card content**: Keep questions concise (one concept per card)
- **Answer length**: 1-3 sentences work best for visibility
- **Batch size**: 20-50 cards per set is optimal for studying
- **File size**: Each HTML is ~10-15KB (very lightweight)

## Customization

Want to change the colors? Edit `main.py` lines 36-37:
```python
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
```

Want different card size? Edit line 74:
```python
height: 420px;
```