Pronk Media uses H5Build and H5Write to create hundreds of cost-effective engaging activities and games for educational publishers. Contact us for more information.

Favorite Pet Poll is one example of an easy-to-build student activity. A single piece of Adobe Illustrator art is uploaded into H5Build, and then you can create a no-code drag&drop activity in minutes.

This activity has 5 drag & drop images as well as a demonstration intro-animation and a reset button. Try it here:

If you don’t already have an H5Build account to will be prompted to set up a free account.

The H5Build application has a built-in Drag&Drop Action with many configuration options. Here are some of the settings used in this simple little activity:

1. Infinite clone: This option lets the user drag an infinite number of cloned images from the original image. The other option is Infinite clone: Off.
2. Allow multiple drops: The drop zone will accept an infinite number of images. Other options are:
   • Allow one drop, block others
   • Allow one drop, replace previous drops
3. Fill from the bottom left: Each dropped image will snap to the bottom left and fill the drop zone moving left and up.  Other options are:
   • Snap to center
   • Where item is dropped
   • Random within drop target
   • Fill from the top left
   • Fill from the top right
   • Fill from the bottom left
   • Fill from the bottom right
4. Disable drag after drop: Once an image is dropped, it cannot be moved. The other option is Enable drag after drop, which allows an image to be moved.
5. No Evaluation: This activity is set to “No Evaluation” because there is no correct answer. For activities with correct and incorrect answers, you can configure a broad range of options.
6. Feedback None: Feedback is used in conjunction with Evaluation when activities have correct and incorrect answers. The other options for feedback are:
   • Resume Animation
   • Jump to Label: This will allow you to jump the timeline playhead to any location on the timeline.
   • Navigate to URL: Input a URL.
   • Run a Library Animation: You can custom build any type of complex animation and play it as correct or incorrect feedback.
   • Execute code: This option gives you a code editor for your own JavaScript.

In H5Build, you can see that Timeline item #22 is the Drag&Drop Action. All the configurations are set in the property panel on the left. You can do a “Save-as” and make your own editable copy.

Go to the SVG module to download the  Adobe Illustrator and SVG files for editing.