Drag and drop not responsive

Submitted by lingvemulo on Sun, 12/10/2017 - 23:12
Forums: 
Bugs in content types

Hi - I've created a drag and drop activity, and it works perfectly on the desktop, but not on the iPad or the iPhone. The drop zones don't stay in place, and the text also changes from the default font to a serif font... Odd. 

The activity IS responsive if I resize the browser window on the desktop, so I'm not sure what's going on. (The font is minuscule, though, and I'm still trying to work out how to get my changes to take in my h5p mods plugin...)

Your insights would be appreciated! (I've attached the file, as well as screenshots, in case it helps.)

H5P file: 
Binary Data hopital-d-etre-glisser-deposer-11.h5p
Attachments: 
Image icon iPad problem.PNG
Image icon iPhone problem.PNG
Image icon ok on resized desktop screen.png
Content types: 
Drag and Drop

lingvemulo

Sun, 12/10/2017 - 23:16

This is a screenshot of what it looks like on the desktop.

Attachments: 
Image icon ok on desktop.png
BV52's picture

BV52

Mon, 12/11/2017 - 08:46

Hi lingvemulo,

Thank you for the information and attached files. I am unable to reproduce the issue using my ipad (Chrome & Safari browsers). Would it be possible to share the site so that we can check it?

I've attached screenshots of the test and I've uploaded your content here.

-BV52

Attachments: 
Image icon Chrome in Ipad.jpeg
Image icon Safari in Ipad.jpeg

lingvemulo

Mon, 12/11/2017 - 09:32

Hi - After checking out your examples, I realized that I messed something up by playing with css - I couldn't get any of the changes to take yesterday, but this morning (caches flushed) I apparently did manage to change the font size. I admit that it's a bit confusing to use the h5p mods plugin, since I can't see any of the changes in my normal css editor...

In order for this activity to be feasible on all platforms, however, the words to be dropped need to be big enough to see... :-)

Here's the live version on my site: https://butterflyblinks.com/hopital-detre-glisser-deposer/. I removed the custom css, so it now works as intended, but I actually have no idea how to get the font size of the draggables to be big enough to see.

Thanks for your help!!

falcon's picture

falcon

Thu, 12/21/2017 - 15:09

Hi, I'm sorry you haven't gotten a faster answer. Drag and drop isn't fully responsive, and it can't be made responsive either. If the words are small on a wide screen they will be unreadable on a smaller screen. If they were to be made bigger relative to the background on a smaller screen we would often ruin the layout/idea for the task. Only way to fix this is to use bigger draggables on big screens or use other content types.

otacke's picture

otacke

Fri, 12/22/2017 - 12:18

Just a thought for the community, maybe someone is looking for a coding/UX design challenge: In interactive video, the labeled buttons become small buttons when the available space shrinks too much. Something similar might be implemented for Drag and Drop. As a content designer, you could allow to switch the task to a different user interface automatically. This could be feasible unless the background image plays an important role for solving the task.

lingvemulo

Fri, 12/22/2017 - 12:37

Thanks for confirming what I suspected about the responsiveness. I'll just warn users that they have to have exceptionally good eyes and exceptionally tiny fingers if they want to do this exercise on a phone! Lol. And, of course, work on finding another way to do this.

It's so hard to make "game-y" things responsive... including crosswords, hangman - and yet if we could find a way it would revolutionize what we (teachers) can offer our students...

thomasmars's picture

thomasmars

Tue, 01/02/2018 - 11:45

Indeed, good ideas for solving these kind of issues are always welcome :)

melihkaratas

Sat, 10/06/2018 - 22:43

Hi, I don't see The toolbar allows you to insert. Pleas help me 

Thank you 

Attachments: 
Image icon task.jpg
BV52's picture

BV52

Mon, 10/08/2018 - 08:04

Hi melihkaratas,

In order to give your bug report the best chance of getting answered, please include the following information:

  1. Detailed steps to reproduce the bug (exactly how and when did it happen)
  2. Platform and version number. Wordpress
  3. Mobile or Desktop
  4. Browser: Chrome, Firefox, Safari etc
  5. H5P plugin version
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.
  7. Any browser console errors
  8. Any PHP errors
  9. Screenshots if it's a visual problem

The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!

-BV52

Juho

Thu, 11/08/2018 - 14:01

Hi, You can make it to work on different devices by creating different content for phone, pad, laptop and desktop. Then just hide or show with css @mediaquery.

BV52's picture

BV52

Fri, 11/09/2018 - 03:50

Hi Juho,

Thank you for the tip :-)

-BV52

Atbin

Tue, 01/24/2023 - 01:41

Hi,

Regarding the Drag n Drop responsiveness, on 'Moodle' platform (3.11+) we noticed using an iOS device and browser (iPad/Safari), the drag and drop text element can not be dragged or moved around.

  • Create a course.
  • Set Edit mode to On
  • Add an H5P activity. (ex: 'Course presentation' contet)
  • In the add H5P form, click "Content bank (opens in new window)" link.
  • Click "Add" and select "Drag and Drop".
  • Click the "Step 2 Task"
  • On the Task* area box, click the "T" button.
  • On the Text* box, type abc123 and click the "Done" button.
  • Try to drag and move the abc123 text.

RESULT: The text object does not move when using an IOS device such as iPad. However, using a computer/browser, the text object can be moved around using the mouse. 

Thanks,

Attachments: 
Image icon dragndrop.png
BV52's picture

BV52

Tue, 01/24/2023 - 17:18

Hi Atbin,

Would you mind testing if you will encounter the same issue here: https://bv-demo.h5p.com/content/1291860203487749879

=BV