# ExerciseSolver Components

A comprehensive set of React components for building interactive math exercise solving interfaces with real-time validation, step-by-step solutions, and hint systems.

## Components

### ExerciseCard
Displays exercise information in a card format with difficulty badges, status indicators, and metadata.

**Features:**
- Difficulty badges (easy, medium, hard, expert)
- Status indicators (not-started, in-progress, completed, perfect)
- Compact and full modes
- Points, time limit, and hints display
- Best score and attempts tracking

### ExerciseSolver
The main solver interface that combines all exercise functionality.

**Features:**
- Real-time answer validation
- LaTeX math input with live preview
- Timer with time limits
- Points system with hint penalties
- Step-by-step solution viewer
- Progress tracking
- Multiple attempts support

### AnswerInput
Specialized input component for mathematical expressions.

**Features:**
- LaTeX syntax support
- Live KaTeX preview
- Quick symbol toolbar
- Validation indicators (correct/incorrect)
- Keyboard shortcuts (Enter to submit)
- Clear and submit buttons

### ExerciseFeedback
Visual feedback component for answer validation.

**Features:**
- Color-coded feedback (green=correct, red=incorrect)
- Points awarded display
- Explanation and correct answer display
- Action buttons (Try Again, Show Solution, Next)
- Smooth animations

### HintSystem
Progressive hint system with point costs.

**Features:**
- Sequential hint unlocking
- Point cost per hint
- Visual hint cards
- Math content support
- All hints revealed indicator

### StepByStepSolution
Interactive solution viewer with expandable steps.

**Features:**
- Sequential step revealing
- Next Step and Show All buttons
- Math formula rendering
- Step explanations
- Final answer reveal

## Usage Examples

### Basic Exercise Solver

```tsx
import { ExerciseSolver } from '@/components/exercises';

function MyExercisePage() {
  const exercise = {
    id: 'ex-1',
    title: 'Quadratic Equation',
    description: 'Solve for x',
    question: 'x^2 - 5x + 6 = 0',
    difficulty: 'easy',
    points: 10,
    hints: ['Factor the expression', 'Set each factor to zero'],
  };

  return (
    <ExerciseSolver
      exercise={exercise}
      onComplete={(attempt) => console.log('Solved!', attempt)}
      enableHints={true}
      enableTimer={true}
    />
  );
}
```

### Exercise Grid

```tsx
import { ExerciseCard } from '@/components/exercises';

function ExerciseList() {
  const exercises = [/* ... */];

  return (
    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      {exercises.map((exercise) => (
        <ExerciseCard
          key={exercise.id}
          exercise={exercise}
          onClick={() => navigateToExercise(exercise.id)}
        />
      ))}
    </div>
  );
}
```

### With API Integration

```tsx
import { ExerciseSolverWrapper } from '@/components/exercises';

function ExercisePage({ params }) {
  return (
    <ExerciseSolverWrapper
      exerciseId={params.id}
      onComplete={(attempt) => {
        // Save to backend
        api.post('/api/progress', attempt);
      }}
    />
  );
}
```

## TypeScript Types

All components are fully typed with TypeScript:

```typescript
import type {
  Exercise,
  ExerciseDifficulty,
  ExerciseStatus,
  ExerciseAttempt,
  FeedbackData,
  FeedbackType,
  Hint,
  Solution,
  SolutionStep,
} from '@/components/exercises';
```

## Styling

Components use:
- **Tailwind CSS** for styling
- **shadcn/ui** components as base
- **KaTeX** for math rendering
- **CSS animations** for smooth transitions

## Accessibility

- ARIA labels and roles
- Keyboard navigation support
- Screen reader friendly
- High contrast mode support
- Focus management

## Performance

- Optimized re-renders with React.memo
- Efficient state management
- Lazy loading support
- Minimal bundle size

## Browser Support

- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers

## License

MIT
