Blog Post

Discover
1 MIN READ

Storyline: Safety Equipment Drag-and-Drop

Samuel's avatar
Samuel
Community Member
3 years ago

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. 

Published 3 years ago
Version 1.0
  • TerynGoff's avatar
    TerynGoff
    Community Member
    This looks amazing! What did you use for the vector files?
    • Samuel's avatar
      Samuel
      Community Member
      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.
  • TrishaDrake's avatar
    TrishaDrake
    Community Member
    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?
    • Samuel's avatar
      Samuel
      Community Member
      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.
  • TrishaDrake's avatar
    TrishaDrake
    Community Member
    That helps a lot. Thank you for explaining and providing the link to the vector images.
  • 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!
    • SamuelApata-ff6's avatar
      SamuelApata-ff6
      Community Member
      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.