I need some help with my drag and drop freeform question. 

On the attached image,  I would like to do is match the sun with small w with the cloud with big W and the same for the sun with small k and cloud with big K. If user matches the sun with small w incorrectly meaning they match it to the big K, it should display the feedback message but then the sun with small w should go back to its original position.  If user matches everything correctly, it would move on to the next slide.

I do not have any idea to work this out so help would be appreciated. Ideal if there will have no states and variables created.

8 Replies
Maria Costa-Stienstra

Hi, Steffi, and welcome to E-Learning Heroes! ✨

Thank you for sharing the screenshot!

Based on your description, it sounds like a freeform Drag-and-drop will be the way to go. Here's an article to get you started:

I'm also attaching a sample .story file based on your description:

Screen Recording 2021-11-15 at 11.07.15 AM

I hope this helps!

Steffi Sim

Hello Maria!

Thank you so much for this sample, I appreciate it.
In this sample you gave, it seems that once user matches everything already, and press the submit button, the feedback message would appear. What I would like to be able to do is, when user drags for example in this case the small sun k to big cloud k, then i would get the feedback message saying its correct and same for the other and if matched wrongly, i would get the feedback message saying its wrong. So basically to get the feedback message without the submit button.

Maria Costa-Stienstra

Hi, Steffi.

Thank you for clarifying!

In Form View, under Drag & Drop options, make sure the delayed feedback option is unchecked:

Windows 10 (1) 2021-11-17 at 9.31.39 AM 

When you do that, you will be able to create Drop Correct and Drop Incorrect states, and you can use them in a few different ways.

Option 1:

  • Create a Drop Incorrect state for each of your Suns (avoid using groups here), where the incorrect message is added to that state:

Windows 10 (1) 2021-11-17 at 9.34.29 AM

This is what it will look like:

Screen Recording 2021-11-17 at 09.34.51 AM

Option 2:

  • Add a trigger to show the Incorrect layer when the state of the object is Drop Incorrect. You will need to do this for all your objects:

Screen Recording 2021-11-17 at 09.37.28 AM

I hope this helps!