Build an Interactive Learning Tool

Build an interactive learning tool based on my content.

Context:
- Learning objective: [What should learners be able to do after using this?]
- Target audience: [Who will use this? e.g., students, trainees, workshop participants]
- Usage context: [Self-study, classroom, workshop, remote training]

Source Materials:
- [File name] — [Description of content, e.g., "50 Q&A pairs for quiz"]
- [File name] — [Description of content, e.g., "Formulas and examples for calculator"]

Tool Type:
[Choose one: Quiz / Flashcards / Calculator / Simulator / Practice Exercises / Game]

Key Features:
- [Feature 1, e.g., "Show progress tracker"]
- [Feature 2, e.g., "Provide hints when stuck"]
- [Feature 3, e.g., "Randomize question order"]
- [Feature 4, e.g., "Show explanation after each answer"]

Technical Requirements:
- Single HTML file (all CSS and JavaScript inline)
- Responsive design (works on desktop, tablet, mobile)
- No external dependencies (or specify if OK to use libraries)
- Clean, intuitive interface
- Keyboard navigation support

UI/Style:
- Color scheme: [Specify or "professional and clean"]
- Layout: [Specify preferences or "let the agent decide"]
- Accessibility: [Any specific needs, e.g., "large text", "high contrast"]

Instructions:
1. Review my source materials and extract the learning content
2. Design an interactive interface appropriate for the tool type
3. Implement all features listed above
4. Add comments in code explaining key sections
5. Include instructions for learners within the tool
6. Test that all interactions work correctly

Output Format:
- Create a self-contained HTML file
- Include inline CSS for styling
- Include inline JavaScript for interactivity
- Enable keyboard navigation (arrow keys, spacebar, Enter)
- Add progress tracking using localStorage

Save to: [your-folder]/index.html

Flashcard-Project/
├── content/
│   └── terms-and-definitions.xlsx
├── assets/
│   └── logo.png (optional)
└── index.html (to be created)

Term | Definition | Example
-----|------------|--------
Variable | A storage location with a name | let age = 25;
Function | A reusable block of code | function greet() {...}
Array | An ordered list of values | let colors = ["red", "blue"]
Object | A collection of key-value pairs | const user = {name: "John"}
Loop | Repeats code until condition is met | for (let i=0; i<10; i++) {...}

Build a flashcard app for learning programming terminology.

Context:
- Learning objective: Memorize 50 programming terms and their definitions
- Target audience: Beginner coding students (ages 16+)
- Usage context: Self-study and exam preparation

Source Materials:
- content/terms-and-definitions.xlsx — 50 terms with definitions and code examples

Tool Type: Flashcards with quiz mode

Key Features:
- Flip card animation (click to reveal definition)
- Mark cards as "known" or "needs practice"
- Quiz mode: show definition, select correct term from 4 options
- Track progress (show % of cards mastered)
- Shuffle cards each session
- Show example code for each term
- Keyboard shortcuts for navigation

Technical Requirements:
- Single HTML file (all CSS and JavaScript inline)
- Responsive design (works on desktop, tablet, mobile)
- No external dependencies
- Clean, modern interface
- Touch-friendly for tablet users

UI/Style:
- Color scheme: Blue and white, professional
- Include progress bar at top
- Large, readable text for code examples
- Clear visual feedback for interactions

Instructions:
1. Read the Excel file and extract all terms
2. Create flashcard interface with flip animation
3. Implement quiz mode with multiple choice
4. Add progress tracking using localStorage
5. Include "Show Hint" option for difficult cards
6. Add keyboard shortcuts (Space to flip, 1-4 for quiz answers, K for known, N for needs practice)
7. Ensure all interactions work on touch devices

Output Format:
- Self-contained HTML file with inline CSS and JavaScript
- Enable keyboard navigation
- Save progress to localStorage
- Include instructions screen for first-time users

Save to: Flashcard-Project/index.html

✅ Good: Spreadsheet with columns: Term | Definition | Example | Category
❌ Vague: "Here's a document with some information"

✅ Good: "Learners should be able to identify all 50 programming terms and explain their purpose"
❌ Vague: "Help learners study programming"

✅ Good: "Show term on front, click to flip and reveal definition + example on back"
❌ Vague: "Make it interactive"

✅ Good: "When learner marks 'known', show green checkmark and move to next card. When 'needs practice', show orange indicator and revisit later"
❌ Vague: "Give feedback"

✅ Good: "Save progress to localStorage so learners can close and resume later. Show progress bar with % mastered"
❌ Vague: "Remember progress"

✅ Good: "Must work on tablets — large touch targets (min 44px), no hover-dependent interactions, support both keyboard and touch"
❌ Vague: "Make it responsive"

"After generating the HTML file:
1. Open in Chrome/Safari/Edge/Firefox
2. Test keyboard navigation (Space, arrows, letter keys)
3. Test on mobile/tablet if possible
4. Verify progress saves after refresh
5. Check that all interactions work smoothly"