Exercise App

A full-screen Vue 3 + Vuetify + TypeScript application for interactive exercises.

Features

• Multiple Exercise Types: Support for multiple-choice, true/false, fill-in-the-blank, and matching (placeholder)
• Collapsible Help Bar: Top bar with context-sensitive help that can be expanded/collapsed
• Exit Button: Always available button with icon to exit the current exercise
• Bottom Navigation Bar: Controls for:
  • Theme switching (light/dark mode)
  • Previous/Next exercise navigation
  • Auto-play mode (automatically advances after answering)
  • Sound control toggle
• Centered Content: Exercise content is centered between fixed top and bottom bars
• Scrollable Content: When needed, only the content area scrolls (top and bottom bars remain fixed)
• Responsive Layout: Works on various screen sizes

Project Setup

Install Dependencies

npm install

Development Server

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Type-Check

npm run type-check

Project Structure

src/
├── components/
│   ├── TopBar.vue          # Top app bar with help and exit button
│   ├── BottomNav.vue       # Bottom navigation with controls
│   └── ExerciseDisplay.vue # Exercise content renderer
├── data/
│   └── exercises.ts        # Sample exercise data
├── types/
│   └── exercise.ts         # TypeScript type definitions
├── plugins/
│   └── vuetify.ts          # Vuetify configuration
├── App.vue                 # Main application component
└── main.ts                 # Application entry point

Usage

Adding New Exercises

Edit src/data/exercises.ts and add new exercise objects:

{
  id: 6,
  type: 'multiple-choice',
  question: 'Your question here?',
  helpText: 'Context help for this question',
  options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
  correctAnswer: 0, // Index of correct answer
}

Customizing Themes

Edit src/plugins/vuetify.ts to customize light and dark theme colors.

Exercise Types

• multiple-choice: Radio buttons with options (correctAnswer is the index)
• true-false: True/False radio buttons (correctAnswer is boolean)
• fill-in-blank: Text input field (correctAnswer is string)
• matching: Placeholder for future implementation

Controls

• Info Icon: Toggle context help panel
• Close Icon: Exit exercise (resets progress)
• Theme Button: Switch between light and dark mode
• Previous/Next: Navigate between exercises
• Auto/Pause: Toggle auto-advance mode
• Sound: Toggle sound feedback (currently placeholder)

Technologies

• Vue 3 (Composition API)
• Vuetify 3
• TypeScript
• Material Design Icons