Moodle in English: Drag and drop onto image - draggable images resized

Hello Dominique,

the code you provided works great for me, but I'm having problems with the padding of the dragable images (the padding is always 5px on each side, no matter how I try to change it). I tried many possible solutions like below, but nothing works for me:

$(".group1").css("padding", "0px");

$(".group1").each(function() { this.style.setProperty("padding", "0px", "important"); });

I successfuly made images transparent etc., but on the picture below, you can see why the exact image size (without padding) is important to me. On the image below, there is a background image with just the axis and transparent image of the signal dropped on top.

Another (probably similar and somehow related) problem is the size of the drop zones - they are just slightly bigger than the dragable image (rectangle with yellow shadow).

Is there a way to change those properties just for one question in a similar way or not?

Any help will be much appreciated.

Average of ratings: -

Re: Drag and drop onto image - draggable images resized

by Marcel Castilho - Thursday, 13 August 2020, 9:21 AM

hey Peter,

did you found any solutions for the padding problem? I'm using similar graphics and having the exact same problems. Tried different Jquery codes but it didn't work.

Average of ratings: -

Re: Drag and drop onto image - draggable images resized

by Dominique Bauer - Friday, 14 August 2020, 11:18 AM

Hello Peter and Marcel,

I successfuly made images transparent...

Please feel free to share how you did this. It would surely help many people.

With a workaround that uses only a few lines of JavaScript, the adjustments that can be made are limited. Removing the padding and sizing the drop zones seems difficult to achieve on the user side. Tim Hunt mentioned that the Drag and drop question types will be revised to get rid of some limitations. In the meantime, I suggest that you simply adjust the size of the dragable images, for example with $(".group1").css("width", "some value in px") and adjust the position of the drop zones.

As long as it is done carefully, an adjustment by eye might be sufficient, in most cases, to give an acceptable result. See the example below at https://moodleformulas.org/mod/quiz/view.php?id=8297:

Average of ratings: -

Re: Drag and drop onto image - draggable images resized

by Al Henneberger - Friday, 14 August 2020, 8:51 PM

Is there a way to see the code in your example? I can only move the blocks around.

Also, Martin Osterreicher's 27FEB2020 post in https://tracker.moodle.org/browse/MDL-57842? explains why the image limitations are the way they are and indirectly how to change it. Though, everything discussed in this thread may be available in 3.9 (based on some of the posts in the tracker). Since I only have 3.5.3, I cannot verify that.

Average of ratings: -

Re: Drag and drop onto image - draggable images resized

by Dominique Bauer - Saturday, 15 August 2020, 1:34 AM

Hello Al,

I added the XML files at moodleformulas ↗.

Thank you for the link to the Tracker.

You can verify on Moodle demo sites, which use 3.9, for example New question types quiz - Drag, drop and Select missing words ↗.

Average of ratings: -

Re: Drag and drop onto image - draggable images resized

by Al Henneberger - Monday, 17 August 2020, 9:29 PM

Thank you for your reply.

Let me see if I understand what is going on.

It looks like the reference image still needs to be no more than 600x400 due to the limits in the php file. The file in your example is 600x400 based on the filename. The code seems to 'scale' the image and dragables to the size in the JQuery code in the question. This could explain some of the fuzziness.

Previously when I tried this, my reference image was >600x400 based on code similar to what you used and could not have draggables beyond 600. The limitations in the php file would explain that. I do not remember where I got my original code, I was down a rabbit hole at the time and cannot find my test question.

But, then again, I am probably completely out-to-lunch.

Average of ratings: -

Re: Drag and drop onto image - draggable images resized

by Dominique Bauer - Tuesday, 18 August 2020, 2:19 AM

Hello Al,

It is understood that the solution proposed here is only a workaround and therefore has some limitations. For example, it currently works in Chrome but not the padding is not removed in Firefox, although it can probably be improved to work in Firefox as well. The real solution will obviously come from a modification of the question itself.

You will find the JavaScript code in the text of the question of Example 2: https://moodleformulas.org/course/view.php?id=65&section=2

Replace the draggable images with images from your image bank. This way, they won't lose quality and won't be fuzzy.
Make draggable images transparent.
Eliminate padding from draggable images as shown in the code.
Adjust the sizes of draggable images and drop zones to match.

You will get (in Chrome) a "perfect" question as follows:

Average of ratings: -

Re: Drag and drop onto image - draggable images resized

by Dominique Bauer - Tuesday, 18 August 2020, 4:13 AM

Here is the JavaScript code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {

        /* ADJUST BACKGROUND IMAGE SIZE */
        $(".droparea").css("width", "888px");
        $(".dropbackground").css("width", "888px");

        /* REPLACE BACKGROUND IMAGE WITH IMAGE FROM IMAGE BANK */
        $(".dropbackground").attr("src", "https://moodleformulas.org/draftfile.php/5/user/draft/265385612/Formulas_20200817_1208_background.png");

        /* ADJUST DRAGGABLE IMAGES SIZE */
        $(".group1").css("width", "300px");
        $(".group1").css("height", "300px");

        /* MAKE DRAGGABLE IMAGES TRANSPARENT */
        $(".group1").css("mix-blend-mode", "multiply");

        /* REPLACE DRAGGABLE IMAGES WITH IMAGES FROM IMAGE BANK */
        $(".group1.choice1").attr("src", "https://moodleformulas.org/draftfile.php/5/user/draft/265385612/Formulas_20200817_1208_red.png");
        $(".group1.choice2").attr("src", "https://moodleformulas.org/draftfile.php/5/user/draft/265385612/Formulas_20200817_1208_blue.png");
        $(".group1.choice3").attr("src", "https://moodleformulas.org/draftfile.php/5/user/draft/265385612/Formulas_20200817_1208_yellow.png");
        $(".group1.choice4").attr("src", "https://moodleformulas.org/draftfile.php/5/user/draft/265385612/Formulas_20200817_1208_green.png");
    });
</script>

<script>
    window.onload = function() {

        /* REMOVE PADDING (CHROME) */
        $(".group1").css("padding", "0px");

        /* ADJUST DROP ZONE SIZE */
        $(".dropzone").css("width", "300px");
        $(".dropzone").css("height", "300px");
    };
</script>

Average of ratings: Useful (1)

Re: Drag and drop onto image - draggable images resized

by Al Henneberger - Tuesday, 18 August 2020, 8:32 PM

Thank you.
I shall keep this code in mind when I next need it.

Average of ratings: -

Quiz

Drag and drop onto image - draggable images resized

Re: Drag and drop onto image - draggable images resized

Re: Drag and drop onto image - draggable images resized

Re: Drag and drop onto image - draggable images resized

Re: Drag and drop onto image - draggable images resized

Re: Drag and drop onto image - draggable images resized

Re: Drag and drop onto image - draggable images resized

Re: Drag and drop onto image - draggable images resized

Re: Drag and drop onto image - draggable images resized

Re: Drag and drop onto image - draggable images resized

Empowering educators to improve our world

Moodle

Support

Get Involved

Contributions

Downloads

Tracker

Development

Empowering educators to improve our world