Image size in drag and drop

Submitted by raba on Sun, 05/01/2022 - 23:50
Forums: 
Content creation

Hello,

I have imported an image in "drag and drop". But no matter how I set the image size, the image always looks the same. Then what is the meaning of the image size setting?

One more thing: I want to keep the drop zones as small as possible, but I can't get down below 24 x 24. Is there any way to go below these values?

Ralph

otacke's picture

otacke

Mon, 05/02/2022 - 06:40

Hi!

The task size (I think you are referring to that) should control the number of "pixels" that are used for the available area in the browser. As long as you keep the aspect ratio, the image will in fact look the same, but the dropzones and elements should get larger/smaller as their size are using absolute values. Same for the position. Please note that "pixels" are only used internally, so if you set a task size with a width of 960 and the user is running a 1920 width resolution, then in full screen mode a task "pixel" would in fact use up 2 pixels on screen.

There's in fact a default minimum size value set to 24 task pixels (https://github.com/h5p/h5p-drag-n-resize/blob/master/H5P.DragNResize.js#L471) and that's even smaller that accessibility guidelines would suggest, but as explained, that will depend on the task size set and the space that the task uses up on screen.

Best,

Oliver 

raba

Mon, 05/02/2022 - 08:51

Hi otacke,

thank you very much for your advice. Yes, I meant the task size. I want to get as small drop zones as possible and also small draggable texts. The students are supposed to drag points whose coordinates are known to the right place in the coordinate system and works sensibly only if the places are not too big.

Have I understood this correctly: If I leave all elements at a certain value, for example 24 x 24 pixels, then the larger I choose the task size, the smaller they will be displayed?

There is still one problem: If the moveable elements become very small, then I can no longer accommodate the coordinate information. So the indication of the place to which they should be moved. Is there a solution for this?

Best Regards,

Ralph

 

 

otacke's picture

otacke

Mon, 05/02/2022 - 13:37

Hi Ralph!

Have I understood this correctly: If I leave all elements at a certain value, for example 24 x 24 pixels, then the larger I choose the task size, the smaller they will be displayed?

Yes, didn't it take longer to ask that question than to try? ;-)

When you click on crossing arrow symbol in the menu that gets attached to an element when you select it, you can enter coordinates and sizes manually.

Best,
Oliver

raba

Sun, 05/08/2022 - 18:02

Hi Oliver,

unfortunately, it does not work.

I want to write again what I want to do. I give a table of value pairs (x|y) and next to it an initially empty coordinate system. Next to each pair of values in the table there is a small marker (small image), which has to be moved with the mouse to the right place in the coordinate system.

The problem is that the mark and the drop zones must be as small as possible, so that an inaccurate drop is not called correct. The smallest drop zone is 24 x 24, and that is too large.

Now I thought the problem could be fixed if I increased the task size of the background image. That also seems to work at first glance. Drop zone and marker are tiny. When I click on them once, it also shows a size of 5 x 5. But on the second click, the size jumps back to 24 x 24 and I have accomplished nothing at all. It still looks exactly the same as before the increase.

The video under 

https://oszlisemeitner-my.sharepoint.com/:v:/g/personal/ba_osz-lise-meit...

shows that nothing changes when you go from 1000 x 1000 to 3000 x 3000 with the task size.

Gruß

Ralph

otacke's picture

otacke

Mon, 05/09/2022 - 06:47

Hi Ralph!

Then I may have had a faulty thought process or there's an issue with the content type.

Best,

Oliver 

raba

Mon, 05/09/2022 - 11:30

Hi Oliver,
I have also tried it under Moodle 3. The result is the same.
So what is the point of changing the task size if nothing changes when I change the task size?
Greetings
Ralph

otacke's picture

otacke

Mon, 05/09/2022 - 17:50

Hi Ralph!

You'll have to ask that question to someone from the H5P core team, I don't know what that parameter is supposed to do then and don't have the time to look at the code.

Best,
Oliver

BV52's picture

BV52

Mon, 05/09/2022 - 18:58

Hi Everyone,

What Oliver suggested should work however when I was testing this it seems that there are certain limitations in Drag and Drop. The dropzone is indeed limited to 24x24 and will always default to that when you try to change it to anything smaller. It also looks like there is a maximum task size which is 1000x1000 (I have to confirm this with the dev team). This is the reason why in Ralph's video the drop zone size does not change.anymore since in reality the task size is not expanding at all. I attached several screenshots using different task size. You will notice that there is a big difference between the 400x300 compared to 800x600, however as I go higher there isn't much difference if there were any at all.

-BV

Attachments: 
Image icon 400x300.png
Image icon 800x600.png
Image icon 1200x900.png

raba

Tue, 05/10/2022 - 10:51

Hi,

What should I do now?

I tried to ask a question under the description of drag and drop in H5P. But even though I am logged into h5p.org and can write here, at this point, it does not work under drag and drop.

As you can see, there are "Login in" and "Register" buttons there. The attached screenshot shows that. But nothing happens when I click on these buttons. And with that I can't write there either.

Ralph

Attachments: 
Image icon H5P.jpg
BV52's picture

BV52

Tue, 05/10/2022 - 12:09

Hi Ralph,

Can try posting your question in the forums. The sample pages, documentation pages were not meant to be a place to ask questions that is what the forum is for.

-BV

raba

Tue, 05/10/2022 - 15:23

I have just written in this forum.

BV52's picture

BV52

Tue, 05/10/2022 - 18:32

Hi Ralph,

Sorry I wasn't paying attention to who posted the comment. We could just continue the conversation here, BTW cross posting your issue will not yield help at all since it may confuse the community. Anyway I don't think there is not much we can help with your specific use case, not unless the activity you are creating can be broken down into smaller parts. If it is possible to crop the image to something smaller the limitation of the drop zone and task size.

-BV

raba

Wed, 05/11/2022 - 09:34

Hi BV52,

so there is no solution to my problem?

But what exactly do you mean when you write that "crop the image to something smaller the limitation of the drop zone and task size."?

Ralph

BV52's picture

BV52

Wed, 05/11/2022 - 18:38

Hi Ralph,

I attached 2 screenshots were I cropped the original image from my previous post. You will notice that the drop zone is visibly smaller compared to the backgorund. This of course would only be possible if you can crop the background image without any issues on how the lesson is presented i.e. not showing the whole background may confuse students. So if cropping is not an option I'm afraid using Drag and Drop for your specific use case is not possible without updating the code the remove the limitations of the taks size and drop zone size.

-BV

Attachments: 
Image icon cropped 1.png
Image icon cropped 2.png

raba

Fri, 05/13/2022 - 08:47

Hi BV52,

I think I've figured out why increasing the Task Size doesn't change anything for me. Increasing the Task Size only has an effect if it is a small background image. I tried it with a small icon and it worked the same as yours.

However, I already start with a large image and that cannot be further enlarged by increasing the Task Size. But I need high resolution to be able to enter the points. Therefore it makes no sense to start with an extremely reduced coordinate system.

Ralph

villon's picture

villon

Wed, 05/11/2022 - 21:31

Hello, community,
since I think that sometimes one has to think about alternatives, it would be a possibility that raba could think about using geogebra, since H5P requires special adaptations, especially in my own experience in mathematical matters.
Here is a link to drag and drop applications with geogebra.
https://www.geogebra.org/m/TcNZa9aH

greetings

villon

raba

Fri, 05/13/2022 - 08:56

Hi villon,

I have experimented a lot with Geogebra and I think I will find a basic solution to this problem as well. The link https://www.geogebra.org/m/TcNZa9aH gives good hints.

However, experience shows that the use of Geogebra for such problems can quickly lead to plenty of tricky "programming", especially when, as here, there are 20 points to be entered. Then you want to make the work easier and use JavaScript. Unfortunately, I then receive only a few meaningful error messages.

I thought that I can spare myself all this if I use H5P "drag and drop". And that would also be a good solution - if only the areas were smaller.

Ralph

raba

Thu, 05/19/2022 - 14:53

Hi villon,

In the meantime, I have taken a closer look at a solution in GeoGebra and I have made good progress.

I believe that I will come to a good solution with it. However, you have to write a lot if you want to do without JavaScript.

Maybe I'll solve this task with JavaScript again later, but I'm not so sure about that and GeoGebra doesn't give good error messages.

Thanks for your hints.

Ralph

hermex

Wed, 07/06/2022 - 11:46

Hi everyone,
I'm working on an interactive video, it's HD720. I'm inserting a Drag and Drop activity, a background image and setting it's size to 1280x720 (image actual size is the same), but when I visualize it the image is too small, I can barely read the informations.
Is there a limit to this background image size? 

Thanks to you all.

Attachments: 
Image icon Screen Shot 2022-07-06 at 06.37.25.png
villon's picture

villon

Wed, 07/06/2022 - 15:17

 

Hola hermex,
Creo que has perdido el norte con tu petición y deberías más bien crearla como un post aparte, por ejemplo en el foro: Creación de contenidos. Porque en este hilo que has secuestrado, tu pregunta probablemente no será respondida.
Saludos villon

Hello hermex,
I think you have lost your way with your request and should rather post it as a separate post, for example in the forum: Create content creation. Because in this thread you hijacked, your question will probably not be answered.
Greetings villon

hermex

Wed, 07/06/2022 - 19:59

Thanks, I'll change place of my post.