Message Boards Message Boards

Back

How to add drag an drop object

Toggle
How to add drag an drop object
Answer
10/9/20 8:54 AM
Hi SB team,
I am using a drag & drop object in my project, But I am a little confused to put drag and drop object.
 I share a video link to you please see the whole video because I have to put the same functionality in my project as it is

https://www.screencast.com/t/RZre6NSVj

I hope you will help me 
0 (0 Votes)

RE: How to add drag an drop object
Answer
10/9/20 5:26 PM as a reply to ashish sharma.
Hi Ashish,
This is a complex, multipart exercise. It would probably be helpful for you to see how it was created in v3 so that you can see the structure and the actions. Building it in v4 will probably be a little different and easier as we have more functionality available to us, but seeing the logic from v3 would still be helpful.

For the first part, it's just a drag and drop with one correct answer. After the correct object has been placed, it probably shows a whole new page/layer/display with a second set of drag and drop objects with one less drag item. So a whole new copy of the drag items, dropzone, and DnD manager.

If you're not sure how to set up Drag and Drops from scratch, watch this video: http://doc.smartbuilder.com/sb4/app/latest/topic/com.smartbuilder.axon.help/html/How-To-Video-Drag-and-Drop.html?cp=0_0_2_6

For the second drag and drop, it seems like when each drag item is placed in the dropzone, a separate layer is shown. So when Drag_Item_A is placed in the dropzone, it shows Layer_A_follow_up, and when Drag_Item_D is placed in the dropzone it shows Layer_D_follow_up.

This can be detected with the following block: https://www.screencast.com/t/i8bUaDQR

Once you show the appropriate follow up layer, you can create conditional actions to verify the correct checkboxes have been checked, and then the appropriate feedback for each selection.

Conditional actions: http://doc.smartbuilder.com/sb4/app/latest/topic/com.smartbuilder.axon.help/html/How-To-Video-Conditional-Actions.html?cp=0_0_2_5

For example, you might have an action similar to this, where you look for the completely correct answer and show the correct feedback, or if that hasn't been selected, check for a partially correct answer and show specific feedback for that, or a completely incorrect answer, and show feedback for that: https://www.screencast.com/t/fTF6IXDPFnW

Hope that helps!

- Nav
0 (0 Votes)

RE: How to add drag an drop object
Answer
10/12/20 10:12 PM as a reply to Navdeep Dhillon.
Navdeep DhillonHi Ashish,
This is a complex, multipart exercise. It would probably be helpful for you to see how it was created in v3 so that you can see the structure and the actions. Building it in v4 will probably be a little different and easier as we have more functionality available to us, but seeing the logic from v3 would still be helpful.

For the first part, it's just a drag and drop with one correct answer. After the correct object has been placed, it probably shows a whole new page/layer/display with a second set of drag and drop objects with one less drag item. So a whole new copy of the drag items, dropzone, and DnD manager.

If you're not sure how to set up Drag and Drops from scratch, watch this video: http://doc.smartbuilder.com/sb4/app/latest/topic/com.smartbuilder.axon.help/html/How-To-Video-Drag-and-Drop.html?cp=0_0_2_6

For the second drag and drop, it seems like when each drag item is placed in the dropzone, a separate layer is shown. So when Drag_Item_A is placed in the dropzone, it shows Layer_A_follow_up, and when Drag_Item_D is placed in the dropzone it shows Layer_D_follow_up.

This can be detected with the following block: https://www.screencast.com/t/i8bUaDQR

Once you show the appropriate follow up layer, you can create conditional actions to verify the correct checkboxes have been checked, and then the appropriate feedback for each selection.

Conditional actions: http://doc.smartbuilder.com/sb4/app/latest/topic/com.smartbuilder.axon.help/html/How-To-Video-Conditional-Actions.html?cp=0_0_2_5

For example, you might have an action similar to this, where you look for the completely correct answer and show the correct feedback, or if that hasn't been selected, check for a partially correct answer and show specific feedback for that, or a completely incorrect answer, and show feedback for that: https://www.screencast.com/t/fTF6IXDPFnW

Hope that helps!

- Nav
Thanks, Nav
I am using https://www.screencast.com/t/fTF6IXDPFnW functionality which you are suggesting to me but when I have only one correct option out of ten options on how to apply this only for selected one option? Here only option 6 is correct. I am sharing a video link please see it https://www.screencast.com/t/BTsElZ1KGj
I am using the DnD object - when I drop the object in the wrong DropZone the object will return to his original position and one wrong (cross sign) is seen on his left side. Then how I am applying this concept, I am sharing a video link please see it https://www.screencast.com/t/ug0d5z4CTId
Also, I am using a percentage gauge when I drag n drop the object in the correct place the value of the percentage gauge will be increased automatically how to solve this functionality I am sharing a video link please see it https://www.screencast.com/t/5A8vt071cDm 

Please reply as soon as possible 
0 (0 Votes)

RE: How to add drag an drop object
Answer
10/13/20 10:20 PM as a reply to ashish sharma.
Hi Ashish,
If you only have one option that is the correct answer, then you would start with only one condition - is the entire selection exactly "6"?: https://www.screencast.com/t/3I8zPkLSlad

Figuring out whether they have answered any of the other options will be a little more involved currently. We have some new features that are due out in next release (should be in the next couple weeks) that might help with this logic, specifically a block that can tell the tell you how many options have been selected in a Checkbox group. So you might want to wait for that.

Do you want the incorrect object to reset? There is a setting in the Properties of the DnD object that controls this: https://www.screencast.com/t/WrGllg0o Or you could create an action that resets them - there a many triggers and responses that are part of the DnD object, and you might have to experiment with them to get the behavior that you want: https://www.screencast.com/t/Liej5YKpj

As for incrementing a percent gauge, that depends on the nature of your activity. The trigger might be when something is dropped or when the checkbox is filled out. See the previous screenshot - the DnD.onDropAnyZone or DnD.onDropCorrectZone triggers might be what you want.

- Nav
0 (0 Votes)