Drag and drop background image size

Hello,

I selected an image (500px x 400px) to use as background for the drag and drop task and also specified how large the play area should be in the Task size field (also 500 x 400px), however the background image appears to adopt a css inline style (height: 1165px, width: 908px) and appears really big in the browser. Any ideas on how to fix that? Why doesn't the image keep the size specified in the task size field?

Any help appreciated!

 

Thanks!

  1.  
BV52's picture

Hi beaticus,

Do you have a sample content so that we can take a look?

-BV52

I am having this same issue. Here's a link to my sample content: https://ucdaviscpe.h5p.com/content/1290947822279279958

 

BV52's picture

Hi andcorbett,

Your content is not published publicly and cannot be accessed outside your organization.

-BV

I have made it public now. Sorry about that ;-)

BV52's picture

Hi andcorbett,

Thank you for the sample content. I can see clearly the issue now and I also remembered the reason. Drag and Drop will always automatically scale to use all the available width. This has to do with previously supporting fullscreen etc.the height of the activities are based on the width so that they will scale responsively to any device, be it a watch or a projector. It is best to use an image with a 2:1 ratio, but off course will not always be possible as with the background image that you are using. The workaround around for this is to insert the image as an 'image' in the 'task' instead os using it as a background. There will be some white space though if you do this. I created a sample content here, I apologize if it's a bit crude.

-BV  

Thanks BV!  I've got it working as expected.  andrew

Dear BV52,

I gues I have got the same problem using Moodle 3.9, the image size is 900x690 and the task size is 900x690. Starting the App the image an screen is douple size. I also recused the font size of the answers with the same result. The problem is that when the answer box or the drop zone is out of the window. Enable Fullscreen is OFF! Any solution?

I would appriciate your feedback, Thank you.