E-learning Components

A collection of reusable React components for e-learning applications.

Components

Accordion

An accessible accordion with collapsible sections. Uses pure CSS for expand/collapse. See Accordion/README.md for detailed documentation.

FlashcardDeck

A fully-featured flashcard component with 3D flip animations. See FlashcardDeck/README.md for detailed documentation.

InteractiveTimeline

A horizontal, draggable timeline that displays a series of events with clickable markers and prev/next navigation. See InteractiveTimeline/README.md for detailed documentation.

SortingActivity

A drag-and-drop sorting activity component where users reorder items into the correct sequence. Uses @dnd-kit/sortable and pure CSS animations. See SortingActivity/README.md for detailed documentation.

MatchingActivity

A drag-and-drop matching activity where users match items from one column to the correct targets in another. Uses @dnd-kit/core and pure CSS animations. See MatchingActivity/README.md for detailed documentation.

DragAndDropActivity

A highly interactive drag-and-drop quiz where users drag items to drop targets. Correct matches snap into place; incorrect drops animate back to the source. Uses interact.js and pure CSS animations. See DragAndDropActivity/README.md for detailed documentation.

BranchingScenario

A choose-your-own-path scenario component. Renders narrative nodes with choices and outcomes, tracks path/score/variables, and supports conditional choices. Uses pure CSS for fade and slide transitions. See BranchingScenario/README.md for detailed documentation.

Getting Started

Installation

npm install

Development

npm run dev

Build

npm run build

Project Structure

elearning-components/
├── Accordion/              # Accordion component
│   ├── index.tsx           # Component and exports
│   ├── style.module.css    # CSS Modules styles
│   └── README.md           # Documentation
├── FlashcardDeck/          # FlashcardDeck component
│   ├── FlashcardDeck.jsx   # Component (JavaScript)
│   ├── FlashcardDeck.tsx   # Component (TypeScript)
│   ├── FlashcardDeck.css   # Styles
│   ├── index.js            # Export
│   └── README.md           # Documentation
├── InteractiveTimeline/    # InteractiveTimeline component
│   ├── index.tsx           # Component and exports
│   ├── style.module.css    # CSS Modules styles
│   └── README.md           # Documentation
├── SortingActivity/        # SortingActivity component
│   ├── index.tsx           # Component and exports
│   ├── style.module.css    # CSS Modules styles
│   └── README.md           # Documentation
├── MatchingActivity/       # MatchingActivity component
│   ├── index.tsx           # Component and exports
│   ├── style.module.css    # CSS Modules styles
│   └── README.md           # Documentation
├── DragAndDropActivity/    # DragAndDropActivity component
│   ├── index.tsx           # Component and exports
│   ├── style.module.css    # CSS Modules styles
│   └── README.md           # Documentation
├── BranchingScenario/      # BranchingScenario component
│   ├── index.tsx           # Component and exports
│   ├── style.module.css    # CSS Modules styles
│   └── README.md           # Documentation
├── src/                    # Application source
│   ├── App.jsx             # Demo app
│   └── main.jsx            # Entry point
├── package.json            # Dependencies
├── vite.config.js          # Vite configuration
npm└── README.md               # This file

Technologies

• React 18
• Framer Motion
• Vite