Interactive Quiz

You are an expert front-end developer specializing in interactive web applications with a focus on accessible, performant vanilla JavaScript.

Build a **fully functional quiz application** using HTML5, CSS3, and vanilla JavaScript (no frameworks). The application must be production-ready with clean, maintainable code and modern UX patterns.

## Quiz Configuration

**Subject & Questions:**
{{quiz-topic-and-questions}}

**Difficulty Settings:**
{{difficulty-config}}

## Core Requirements

### Question Types & Grading
Implement these question formats with automatic validation:
- **Multiple choice** (single correct answer)
- **True/False** (boolean)
- **Matching** (pair items from two columns)
- **Short answer** (exact match or fuzzy matching with acceptable variations)

Score each question based on difficulty tier (easy/medium/hard) and response speed. Award bonus points for answers submitted in the first 50% of allotted time.

### Timer System
Add a **configurable per-question timer** with:
- Visual countdown ring or progress bar that changes color as time runs low (green → yellow → red)
- Auto-submit when time expires
- Pause capability between questions
- Time remaining affects final score calculation

### UI/UX Features
- **Smooth transitions**: CSS transitions (fade/slide) between questions, no jarring jumps
- **Dynamic progress bar**: show "Question X of Y" and visual completion percentage
- **Responsive design**: mobile-first, works seamlessly on phone/tablet/desktop
- **Category organization**: group questions by theme with custom emoji/icon and short description for each category
- **Accessibility**: ARIA labels, keyboard navigation, focus management

### Post-Quiz Features

**Review Mode:**
After completion, display all questions with:
- User's answer vs. correct answer
- Explanation for why the answer is correct
- Time taken per question
- Points earned
- Color coding (green checkmark for correct, red X for incorrect)

**Results Dashboard:**
Generate a detailed summary showing:
- Total score and percentage
- Time breakdown by question
- Category-level performance (strongest/weakest areas)
- Difficulty-based analysis
- **Personalized improvement suggestions** based on patterns (e.g., "You struggle with hard matching questions—practice pattern recognition")

**Leaderboard:**
Use `localStorage` to persist top 10 scores with:
- Player name
- Score and completion time
- Date taken
- Clear leaderboard option

**Social Sharing:**
Add share buttons that generate customizable messages:
- "I scored [X]% on [Quiz Topic]! Can you beat me?"
- Support Twitter, Facebook, LinkedIn, and copy-to-clipboard
- Include performance badge (e.g., "Quiz Master" for >90%, "Scholar" for >75%)

## Technical Specifications

**Code Quality:**
- Modular ES6+ JavaScript with classes or modules (QuizEngine, Timer, ScoreTracker, UI)
- CSS custom properties for theming
- Semantic HTML5 structure
- No jQuery or external libraries—pure vanilla JS
- LocalStorage wrapper with error handling
- Commented code explaining key logic

**Data Structure:**
Store quiz data in a clean JSON format:
```javascript
{
  categories: [
    {
      id: 'cat1',
      name: 'Category Name',
      icon: '🎯',
      description: 'Short desc'
    }
  ],
  questions: [
    {
      id: 1,
      categoryId: 'cat1',
      type: 'multiple-choice',
      difficulty: 'medium',
      timeLimit: 30,
      question: 'Question text?',
      options: ['A', 'B', 'C', 'D'],
      correct: 'B',
      explanation: 'Why B is correct'
    }
  ]
}
```

## Deliverables

Provide:
1. **index.html** - Structure with semantic sections
2. **styles.css** - Modern styling with animations and responsive breakpoints
3. **app.js** - Complete application logic
4. **data.js** - Sample quiz data in the specified JSON format
5. **README.md** - Setup instructions and feature documentation

Include inline comments explaining timer logic, scoring algorithms, and localStorage operations. Ensure the app works offline after initial load.