Drag and drop correct answer trigger

I wanted to have triggers whenever I get correct answers once the draggables went to their respective drop zones. It may either be an animation, or sound. Is it possible here in Saola Animate?

As of the moment I was able to do the drag and drop and make them work in AutoFit viewport. The only thing left is that I need to have the correct answer prompts. Thank you!

Hi,

Could you please let us know which library did you use to make drag and drop?
You can find the manual of that library for your reference.
In Saola Animate, use the following script to show the element:

doc.getElement('element name').show(true)

If you are struggling with achieving your desire, kindly share your project package (File > Save As > Package) so we can assist you.
Depending on your choice, you can attach the Saola Animate package here or send it to support@atomisystems.com.

Best regards,
Thuy

1 Like

Drag and Drop.saolapack (20.9 KB)

Hi,

Kindly check here. My goal is each time an element is dropped on the correct drop zone, it will prompt an audio. And also, another prompt when all are dropped correctly as an indicator that the activity is done.

Thank you so much!

Hi Leon,

I’ve updated your DragDrop function to play the correct sound and show the “done” message.
Please check
Drag and Drop 2nd fixed.saolapack (72.9 KB)

Regards

1 Like

Thank you so much, this is a very big help! <3

I tried to reuse this code on a new project with a three (3)-drag and drop items only. Suddenly, the drag and drop function is not working anymore, I tried to copy and paste the whole scene from the previous project to the new one, and nothing works.

Hi Leon,

Resources and functions which are not used directly by the scene will not be copied.
You can export them from Resources pane and Functions pane, and import into new project.

However, saving the original project as a new one (File > Save As) and deleting unwanted content and resources in the new project is more convenient.

Regards

Hi, I have another problem with this. During editing phase the code is perfectly working but when exported for HTML the draggables do not align with the drop zones. I still have to adjust them. Is there any way to make them snap directly in the middle of the drop zone?

Hi Leon,

I see that your project uses jQuery UI position function to align the draggable at the center of the droppable. Unfortunately, this function doesn’t work correctly with transformed elements (in AutoFit mode, elements are scaled).
I’ve updated the project in my previous answer to fix this issue, please download it again to check.

Regards

Thank you so much! It works now.

I have a new problem, it works on the first scene but the drag and drop doesn’t work on the 2nd scene. then it works again on the 3rd scene. Do I need to remove anything to make them work on all scenes?

Hi Leon,

You can press F12 when viewing the HTML5 output to see if there are any errors in Console tab.

Regards