Drag and Drop

1. How do we implement drag and drop in Lectora?

2. I want three options given to be placed in respective HAPPY and SAD boxes.

3. How do I go about doing that?

4. Is that a part of gaming section of Lectora?

Discussion (37)

I would use the standard Drag-drop test question type. Create an image you will use to drop your answers onto, and the question will allow you to identify drop areas you create/size, then create images for your answers, and check off which drop area(s) are acceptable answers.

This type of question takes a little more leg work on your end (but better overall because it allows for unlimited possibilities). If you create your own drop image and drag images that match up nicely to each other, then you can upload them to the question. (sometimes you may need to reset your image sizes back to the original size after you get them on the page - question may shrink them down a bit to fit on the page. So I recommend adding images, then clicking OK so the question dialog closes, make sure image sizes are what you want, then go back in and size up your drop zones.

@cainam -

My expectation (page 1) vs reality (page 2).

Something somewhere is being missed by me. Kindly guide.

Page 1 -

Page 2



@cainam - Here is the attachment.

You would need to have the icons as part of the same image. I would put both icons on the image, as well as a drop area above each icon so the user knows where to drop (or just make the drop area anywhere on the full icon of each face. (Or I guess you can select the checkbox option in the question to 'show drop zone outlines' in place of creating drop area boxes).

@cainam -

1. How can I create both happy and sad icons?

2. Am I doing something incorrect?

@cainam - Isn't mine one below funny?

I have to admit I don't use the word 'Cribbing' too often, so sure! ; )

Not sure if you are looking for any other instruction related to setting up the question, but in case you are:

1. have the drop zones the same width/height and location in relation to the images

2. have the choices located in the same area on the page (e.g., "drag the verb on the left to the correct image on the right")

3. (Cribbing you have as a correct answer for both pictures, not sure if that was the intention)

4. A different response for the correct feedback and incorrect feedback is usually better.

You look like you have the 4 drop zones. Click on the icon on the right "Select Drop Zones to Reposition and Size". You likely have zones layered on top of each other. For the screenshot you have there for #4 (Hope), you are saying that you can drop it on any of the 4 drop zones and the the question will mark it correct (because you have the Correct column checked for each drop zone).

@cainam - Removed "CRIBBING".

This is how I am trying to set the drop options.

I want to set 4 drag options against drop options, unable to do so. Missing basics I guess.



@cainam - If you were to do a drag and drop - how would you do this?

@cainam -

Now 'Happy' and 'Sad' doesn't appear.



I think you are just naming the drop zones 'Happy' and 'sad' to help keep you organized - those aren't labels. If you want labels above the pictures, you can just add your own text boxes separate from the question itself?

Probably something like this:

Adam - You are a mentor.

Why is my Height not accepting a large number, it is getting restricted to double digit number - 14.

Why is it so?

That is based on where your x/y coordinates are, and how much space there is left on your drop image. So the one I did, I modified that image to make it larger (so there was space to expand the drop zone). If you look, there is a different image in the images folder (.png file) with larger dimensions.

Dropzones must have unique names, but you have 3 dropzones called "Happy".

@wheels There seems to be a bug with the respective warning. Lectora won't let me give duplicate names if I try to call 2 dropzones "happy" but "Happy" is possible ...

@tea please check this out and write a bug if necessary.

@timk - There are three drag items under 'Happy' dropzone. Isn't that uniqueness. I am not sure of your query.

click on each choice, then on the right, check only the answer that is correct. So instead of having both the Happy and Sad box checked, only check the Happy box. Same for the next 2. For the last option (criticism), only check the Sad drop zone as correct.

Hm well, I cannot find the post to that I replied to any more... and I referred to an older screenshot. So what I wrote is true although not relevant for you.

The items overlap because they "Snap to Center of Drop Zones". Uncheck that option and it should work.

another query (basic one)

How do I ensure/select that first three options are under Happy tab and 4th option is under Sad tab.



@cainam - Space issue..got it.

However, my answer options are overlapping. Why is that so?

Dropzones must have unique names, but you have 3 dropzones called "Happy".

@wheels There seems to be a bug with the respective warning. Lectora won't let me give duplicate names if I try to call 2 dropzones "happy" but "Happy" is possible ...


The name of countries appear on this edit page. However, it doesn't appear in actual file.

Those are just labels for you to organize the question internally. You could add an image on the page with labels outside of the actual question, or create your own drop image for the question (with labels or whatever you need).

right - I believe that is working as expected. They appear on this edit page to help you determine which dropzone is which to help you stay organized, but it isn't intended to appear in the final output. You can just create your own labels with text boxes outside of this question. (just add text fields on the page itself instead of trying to add inside the actual question)

@cainam - This works Adam.

What is going incorrect with this question?

Why are options for countries not reflecting?

You don't have to do it this way (adding the text outside of the question group). You can edit the drop image and add the labels there. With your setup, I would do something like the attached.

Right Adam. It works perfectly well.

@cainam - This is not what should be?



I am getting stuck at Notepad question.



How will you know where to drop the answer? You have 2 drop zones (sweet and sour), but there is no indication on the image where those drop zones are. So at a minimum you will need a label for each. You can also check the setting to 'show drop zone outlines', so that you will see the zone area for each.

so.. I thought that maybe a video demo might be the best way to show this functionality - hope this helps!


A Drag & Drop question requires a Drop image. The dropzones are positioned onto that image. It's not possible to place the dropzones elsewhere. When you add a new question it always has that default image that can be replaced in the question creator. You might just make a screenshot of your columns.

The new image will be displayed in the lower right corner, the preview area for the question. Position your two dropzones so they match the rounded rectangles.

You can always drop several Drag items on every dropzone. If you "Snap Drag Items to the center of Drop Zones" they will overlap. Otherwise they can freely be place within the borders of the dropzones.

To complete the question you must tell which item is meant to be correct on which dropzone. Select an item in the left column and check the dropzones that are correct in the right. Either one of them or both is possible. "Keep calm" is something you should do, i.e. you should uncheck "Don'ts" as a correct dropzone. This means it can still be dropped there but it will be evaluated as "incorrect".


I have realized that I am getting stuck with drag and drop questions.

1. In the below image, I do not how to place 5 options under Do's and Dont's options.

2. Also, in the drop zone created, the default 3 rectangles still appear. I am unable to delete them.

3. I promise to practice drag and drop every week till it becomes my muscle memory.



@cainam - Ever grateful for the way you explain. Thank you.