Drag and drop in Course Presentation not working?

Submitted by JuliaRie on Wed, 11/15/2017 - 14:05
Forums: 
Bugs in content types

Hi, everyone,

So I've tried to use Drag and Drop on one of the slides in the Course Presentation. With default configuration I get a weird image with an ugly scroll bar. On the Settings tab if I make the blue dotted rectangular bigger, I lose the scroll bar but the image dimentions change as wel. My image doesn't get any better.

Is there a setting I can change to prevent my image from scaling? How can I get the image to fill the entire slide? Is there a minimum image size I need to consider?

Strange thing is when I make content on this website, the Course Presentation doesn't offer Drag and Drop, only Drop Text. Am I trying to use things which are not (yet) ment for each other?

Thank you in advance for your feedback.

Best regards,

Julia Rietveld

thomasmars's picture

thomasmars

Thu, 11/16/2017 - 14:01

Hi,

The size of the image is determined from how wide the container the "Drag and Drop" content type is placed inside (the blue dotted rectangle you're talking about). If you make the container smaller in width you will be able to reduce the size of the image and thus be able to make it small enough that it doesn't need a scroll bar.
Do you have a link to the content so that we can see what is wrong or some screenshots you could attach ?

Access to the content types that are hardest to make are restricted by default, you can visit https://h5p.org/access-to-all-content-types to get access to create all the content types on H5P.org.

JuliaRie

Thu, 11/30/2017 - 15:15

Hi Thomas, thank you for your reply. I attach an example of my presentation where slide 1 has an image (looks ok), slide 2 has the same image in drag and drop (looks not ok at all), slide 3 has an image H5p uses in her tutorial about drag and drop (looks awefull as well). I've tried to change the sizes of the blue dotted area, but it doesn't help much.

Thank you for taking a look at my challenge.

Best regards,

Julia Rietveld

H5P file: 
Binary Data drag-and-drop-in-course-46.h5p
thomasmars's picture

thomasmars

Fri, 12/01/2017 - 09:33

Hi Julia,
To make your DragNDrop look better you have two things which you may tune.First of all go into DragNDrop editor inside the Course Presentation. Here you'll have the possibility to change the "task size" of the DragNDrop, you should try to set this to something similar to your image's dimensions, so for example on slide 2 you could set 240x427. This will prevent your image from looking "skewed".

Now press "done" and to exit the DragNDrop editor. The second place you can tweak how your image will look is in the Course Presentation editor where you can resize the DragNDrop container. If you want the image to have less height you must make sure to give it smaller width, like I pointed out earlier. This is because the height of the task is determined from the width, so that it always keeps its' original ratio and doesn't get "skewed". Also make sure that it has sufficient height if you don't want scrollbars.

Hope this helps, sorry about the bad user experience here, this is one of the reasons DragNDrop is restricted by default.

Best regards,
Thomas