Overview
Workbook is a comprehensive educational content platform featuring interactive quizzes, simulations, and structured learning modules. It uses a JSON-driven block-based content system that allows for flexible and dynamic educational content creation.
Features
Block-Based Content System
Content is defined in JSON files with various block types including heroes, callouts, quizzes, simulations, and scientific tables. This allows for flexible content creation without code changes.
Interactive Quizzes
Built-in quiz functionality with multiple question types, instant feedback, and progress tracking. Perfect for educational assessments and self-paced learning.
Scientific Simulations
Embed interactive simulations and visualizations directly into learning modules. Great for demonstrating complex concepts.
Multi-Subject Support
Organize content by subjects and chapters with automatic navigation and progress tracking across different curriculum areas.
Theme System
Customizable visual themes with color variants that can be applied to different content blocks for visual distinction.
Responsive Design
Fully responsive layouts that work seamlessly across desktop, tablet, and mobile devices.
Quick Start Guide
- 1Navigate to the Workbook app at the provided URL
- 2Select a subject from the available curriculum
- 3Choose a chapter to begin learning
- 4Work through the interactive content blocks
- 5Complete quizzes to test your understanding
- 6Review chapter summaries for key takeaways
Technologies
Next.js 16
React framework for server-side rendering and static generation
React 19
UI library for building interactive interfaces
TypeScript
Type-safe JavaScript for better developer experience
Tailwind CSS
Utility-first CSS framework for rapid styling
JSON Schema
Content definition and validation
Framer Motion
Animation library for smooth transitions
Architecture
The Workbook app uses a block-based architecture where educational content is defined in JSON files. The ContentRenderer component receives an array of blocks and maps each to its corresponding React component through the BlockRenderer. This approach allows content authors to create rich educational experiences without writing code.
Ready to get started?
Open Workbook