Block Comparison Learning Widget

An interactive educational widget designed to help students learn about numerical comparisons through visual block manipulation and comparison.

Overview

This widget provides an intuitive, hands-on way to understand number relationships by allowing students to:

• Build and compare stacks of blocks
• Draw comparison lines to show relationships
• See animated visual feedback of their comparisons
• Interact through touch or mouse input

Features

• 🎯 Interactive block stacks with drag-and-drop
• 🎨 Smooth, physics-based animations
• 📱 Touch and mouse support
• 🔄 Multiple interaction modes
• 📊 Visual comparison system
• 🎮 Intuitive controls

Tech Stack

• ⚛️ React + TypeScript
• ⚡ Vite
• 🎭 Framer Motion
• 🎨 TailwindCSS

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/yourusername/block-comparison-widget.git
cd block-comparison-widget

2. Install dependencies:

npm install
# or
yarn

Running the Development Server

npm run dev
# or
yarn dev

The application will be available at http://localhost:5173

Usage

1. Add/Remove Blocks

   • Click the stack to add blocks
   • Drag blocks away to remove them
   • Use the control panel for precise values

2. Compare Blocks

   • Switch to compare mode
   • Draw lines between stacks
   • See immediate visual feedback

3. View Results

   • Trigger the comparison animation
   • See the relationship between stacks
   • Reset and try different combinations