Drag and Drop - how to display drop zones in one horizontal line

General Help
1

Hi. I am new to Evolve and finding the learning curve pretty steep. I have created a Drag and Drop exercise, where the learner is asked to drag and drop 6 small text boxes into the correct order. I want the order of the drop zones to be displayed horizontally, all on one line. Like so

Account code
Account code1207×370 24.8 KB

I am having difficulty working out how to do this. I can list them vertically, but that doesn’t really work for this exercise. Can anyone tell me how to set this up please?

Also, I would like to limit the drop zones so that only one answer can be dropped into it. At the moment, if the learner wants to, they can drag and drop all 6 answers into any one drop zone. Is there a way to restrict it so that each drop zone can only house one answer?

2

Hi Tim,
although displaying the drop zones in a long horizontal line isn’t currently possible, you may want to consider using the Card Drop component instead - it works on the same principle as D&D, but allows you to set drop zones per card and generally has a bit more flexibility in how you set it up.

3

Thanks Sam. I did actually start with the Card Drop component at first. However, I found all the cards (answers) sit on top of each other, rather than shown separately in a line, so the learner can’t see all the answers up front. They have to drag and drop a card in order to see the next one. Unless I have missed an option in the setup settings?

4

Hi Tim, yep that is the current functionality for that component - the answers are delivered one by one.

5

@Sam_Cook_Evolve_QA - hello! I’m trying to find a live example of the Card Drop component but no luck. Is this something you might be able to help with?

Thanks

6

Hi Tim,

Try the Sorting component maybe, it’s vertical, but at least you can have the 6 different items and people have to get them in the right order?

7

Hi @hbailey - is there a live example of the Card Drop component?

8

There is one in this accessible Evolve course - you need to download and import into your evolve instance: ExceedLMS