Storyline: Safety Equipment Drag-and-Drop - Downloads

4,812 Downloads

Drag-and-drop interactions are an easy way to bring your course content to life. It’s a great way to give learners an opportunity to practice real-world skills.

In this construction-themed example, learners test their job site preparation knowledge by equipping a character with necessary personal protective equipment. And as learners engage with the drag-and-drop elements, subtle changes to the equipment and the character’s facial expressions give them hints to let them know if they’re on the right track.

Explore this project.

Inspired by this example, but looking to create your own customized drag-and-drop interaction? Check out this article to discover three easy techniques for creating drag-and-drop interactions in Storyline 360.

Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.

9 Comments

Mariana R.

2 years ago03/23/22 at 4:50 pm (UTC)

This interaction is amazing. I love it.

Teryn Goff

2 years ago03/24/22 at 6:12 pm (UTC)

This looks amazing! What did you use for the vector files?

2 years ago03/25/22 at 12:39 am (UTC)

Hi Teryn, Thanks for checking it out. I purchased the graphics from FreePik: https://www.freepik.com/. If you need the exact image, just search PPE and filter vector images only. Also, I separated each piece using Adobe Illustrator.

Trisha Drake

2 years ago03/24/22 at 10:56 pm (UTC)

Samuel, this is amazing! I've been looking through your slides, questions, animations, and layers. I still don't understand how you made the items change shape as they are placed onto the picture. Would you mind sharing this?

2 years ago03/25/22 at 12:50 am (UTC)

Hi Trisha! Sorry for the trouble. You may refer to my last comment to find the exact file I used. The drag state was achieved by adding a Down state to the drag items which gave them a morphing effect. I hope this helps.

Trisha Drake

2 years ago03/25/22 at 4:07 pm (UTC)

That helps a lot. Thank you for explaining and providing the link to the vector images.

Jamie Panchal

almost 2 years ago05/25/22 at 8:50 am (UTC)

thank you for sharing brilliant little activity

Rachel Riddick

almost 2 years ago06/22/22 at 11:31 pm (UTC)

Hi Samuel, I'm so impressed with this! Can you explain what you used as your targets? It appears that you used pictures for the targets; however, they appear to be blank/transparent. Thanks!

almost 2 years ago06/23/22 at 6:34 pm (UTC)

Thanks Rachel! You are exactly right. I used copies of the photo as the targets. You may be able to achieve the same thing with a shape or carefully drawn hotspot. It took a few tweaks to get the drag objects to fit perfectly.