H5P Coloring Book

An H5P content type that allows teachers to create interactive coloring book activities where students can color images using a variety of tools and palettes.

Overview

This content type enables:

• Teachers to upload outline images for coloring
• Customisable drawing tools
• Students to color and edit images using various tools, including brush, eraser, fill, and text
• Students can load their own images and download their creations
• Fullscreen mode for an immersive experience
• Responsive design for all devices

Features

• Simple Editor Interface: Upload an image and configure available colors and tools
• Interactive Student View:
  • Brush, eraser, fill, and text tools
  • Adjustable brush size
  • Color palette
  • Instructions display
  • Undo: Revert changes with a history stack
  • Load Image: Upload and color your own images
  • Download Image: Save your colored artwork as a PNG file
  • Fullscreen Mode: Toggle fullscreen for a better coloring experience
• Responsive Design: Works on both desktop and mobile devices

Installation

1. Download the latest .h5p file from GitHub Releases
2. Upload it to your H5P-enabled platform (Moodle, WordPress, Drupal, etc.)
3. Create a new activity and select "Coloring Book" from the content type list

Usage

For Teachers

1. Create a new H5P Coloring Book activity
2. Upload an outline image for students to color
3. (Optional) Customise:
   • Instructions for students
   • Set canvas size
4. Save and publish

For Students

1. Use the provided tools to color the image.
2. Select colors from the palette.
3. Adjust brush size as needed.
4. Use the eraser or fill tool if enabled.
5. Add text to the canvas using the text tool.
6. Load your own image onto the canvas using the "Load Image" button.
7. Undo your last action using the "Undo" button.
8. Download your finished coloring as a PNG image using the "Download" button.
9. Toggle fullscreen mode.

Development

1. Clone into the libraries/ folder of your h5p-cli project as H5P.ColoringBook-1.0
2. Run h5p server from the h5p-dev root directory
3. Open the dev server URL in your browser — changes to JS/CSS are picked up on refresh

To build a distributable .h5p package, run h5p pack.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License

Support

For issues and feature requests, please use the GitHub issue tracker.

Credits

Priit Tammets