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

Drag and drop onto image - draggable images resized

โดย Beatriz Rojo - วันพุธ, 20 พฤศจิกายน 2019, 10:47PM

Hi there,

I'm using Moodle 3.5. I've created a drag&drop onto image question with 2 groups. The size of the images of group 2 is OK. But the size of the images of group 1 has been automatically reduced (they are the images at the top of the graph):

results

Is there a way to overcome that? The user should be able to read the texts of the images in order to complete the question correctly. And why are the images of group 1 resized but not the ones of group 2? I don't think its' something random.

Thanks for your help!

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Joseph Rézeau - วันพฤหัสบดี, 21 พฤศจิกายน 2019, 12:00AM

Hi Beatriz,
It's impossible to understand your problem and help you simply from that screen capture.
Please export that question to Moodle XML format and attach the xml file to your next post here so we can examine it and help.

การประเมินโดยเฉลี่ย:Useful (2)

Re: Drag and drop onto image - draggable images resized

โดย Beatriz Rojo - วันพฤหัสบดี, 21 พฤศจิกายน 2019, 6:52PM

Hi Joseph,
thanks for your reply. I'm attaching the question here. You'll see that the size of the draggable objects of Group 3 have been automatically reduced and have been added the suffix (...)150x100 - the original files that I uploaded were larger and the names don't contain that suffix.

questions-Academy_542-damp;d exercise-20191121-1150.xml

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Joseph Rézeau - วันพฤหัสบดี, 21 พฤศจิกายน 2019, 10:22PM

Hi Beatriz,

The images you upload to the Drag & drop onto image question type as draggable objects are indeed automatically resized to 150x100 pixels (and renamed with a .gif extension).

This is by design and cannot be changed unless you hack that question type on your site (not recommended!)

See this post: https://moodle.org/mod/forum/discuss.php?d=353539#p1426336

การประเมินโดยเฉลี่ย:Useful (4)

Re: Drag and drop onto image - draggable images resized

โดย Beatriz Rojo - วันจันทร์, 25 พฤศจิกายน 2019, 10:23PM

Thanks Joseph, good to know. I won't hack it

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Dominique Bauer - วันอังคาร, 26 พฤศจิกายน 2019, 4:19AM

Hello Beatriz,

Images

In general, for images with many colors, such as photographs, use the JPEG format and for images with few colors, such as simple diagrams like those in your example, use the png format. This way, you will reduce the size of the files.

In order to keep a good resolution of your images, do not shrink them before inserting them in Moodle. For example, if you want an image to be 100 pixels wide when displayed in Moodle, make sure that the image you are uploading is at least 100 pixels wide. In this way, you will get beautiful, crisp and easily readable images.

JavaScript

The avantage of hacking a question with JavaScript is that it's usually easier than hacking the question type on your site. You can easily do it yourself. It is safe and the result of the hacking is limited to your own question.

Just add the following script to the HTML code of the "Question text":

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

<script>
    $(document).ready(function() {
        $(".droparea").css("width", "888px");
        $(".dropbackground").css("width", "888px");
        $(".group1").css("width", "130px");
        $(".group2").css("width", "200px");
    });
</script>

In order to set the Left and Top coordinates of the Drop zones, it may be easier to use a "page ruler" on the preview of the question (use for example this Chrome extension).

Your question should look as shown below. You can try it here. I have also attached below the XML file of the question.

ASAv components-20191125-1511.xml

การประเมินโดยเฉลี่ย:Useful (8)

Re: Drag and drop onto image - draggable images resized

โดย Al Henneberger - วันพฤหัสบดี, 12 มีนาคม 2020, 11:48PM

I have been looking for a way to make the background image larger. Thanks for the code. Is the link to the googleapis required? I am leary of linking to outside locations.

I also noticed in the documentation for this question, at the bottom is some code to add to remove the box outlines. While the code is laudable, I do not want every drag and drop question to have no box outlines nor does it need to be on every page. Is there any code to add to the appropriate questions, like you did for the size, to affect the boxes?

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Tim Hunt - วันศุกร์, 13 มีนาคม 2020, 1:06AM

It should be possible to rewrite the JavaScript here to not require jQuery. Sorry, I don't have time to work it out now. Hopefully someone can.

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Dominique Bauer - วันศุกร์, 13 มีนาคม 2020, 1:33AM

Hello Tim,

You are probably using libraries such as Bootstrap but you don't seem willing to use jQuery, although it often considerably simplifies JavaScript programming. I know the use of jQuery is sometimes questioned, but what about it really?

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Al Henneberger - วันศุกร์, 13 มีนาคม 2020, 3:15AM

I do not have an issue with linking with libraries per se. My apprehension is when I link to an outside library, I do not know if they link to somewhere else and if so to whom and so on. At some point these links could lead to the catching of a virulent virus. But then, my understanding of how these things work could be a gross conceptual error (GCE²)

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Tim Hunt - วันศุกร์, 13 มีนาคม 2020, 6:38AM

Well, it seems that with JavaScript development is that what is 'best' changes every few years. And it sometimes it feels like it changes every few months . I'm not much of a JavaScript expert. I just tend to listen to Andrew Nicols from Moodle HQ, who keeps himself well informed about where things are at.

Certainly a year or so ago, I would have agreed with you that jQuery made things simpler, and was basically essential to make things work reliably in all browsers.

But since the update Andrew Nicols gave to the Dev Jam at the Global MoodleMoot in Barcelona last November, I have been trying his advice that browsers now implement that standards well enough that you don't need any libraries. You can do everything with the standard DOM APIs. It has been working for me (with a lot of looking things up on MDN and https://caniuse.com/ while I get the hang of the new incantations ). That includes changes like https://github.com/maths/moodle-qtype_stack/commit/471cd4f99cc7213a66e9668baad79a08c4a4ec8a#diff-c1f55c5994ce6ed9bbc86a7b3366f508 and the new https://moodle.org/plugins/qtype_recordrtc.

So, for example, I think the plain-JS equivalent of the code you gave is (warning, not tested):

<script>
    document.querySelectorAll(".droparea").forEach(function(e) {e.style.width = '888px'});
    document.querySelectorAll(".dropbackground").forEach(function(e) {e.style.width = '888px'});
    document.querySelectorAll(".group1").forEach(function(e) {e.style.width = '130px'});
    document.querySelectorAll(".group2").forEach(function(e) {e.style.width = '200px'});
</script>

(It does seem that the particular code you gave is something that fits very naturally with jQuery's API, and this non-jQuery version is uglier. It is probably the least convincing bit of de-jQuery-fication I have done.)

I am not saying that you have to do this. I am just saying that this is my impression of where things are going. For example, people are starting to put up sites like http://youmightnotneedjquery.com. Hope this is at least vaguely useful/interesting. Sorry, it may have drifted a bit off-topic for the quiz forum?

การประเมินโดยเฉลี่ย:Useful (4)

Re: Drag and drop onto image - draggable images resized

โดย Dominique Bauer - วันศุกร์, 13 มีนาคม 2020, 11:06AM

Hello Tim,

I very much appreciate your taking the time to give me such a well-developed answer. Honestly, you’ve made my day!

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Al Henneberger - วันศุกร์, 13 มีนาคม 2020, 8:38PM

Thank you for your cogent response.
I shall check out the links and code.
I know some JS and even less jQuery, but am learning. I guess I need to add the DOM APIs to the growing list of things I need to learn.
I look forward to the day when these options are built-in to the question.
Thank you Tim and Dominique.

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Al Henneberger - วันศุกร์, 13 มีนาคม 2020, 2:59AM

I have played with your code to adjust the image and box size. And it works well. I even added a few lines to adjust the box height [$(".group1").css("height", "30px");] then just add the appropriate lines for each group. Very handy.
However, I have noticed I cannot assign any drop boxes beyond 600 px even if the image is set to the values you used. Is there another statement required?
I also noticed, my version of Moodle (3.5.3) also added the // ![ CDATA [ tag(?) after the script tag. Is this normal?

You also mentioned a Chrome extension for a ruler. I cannot get it to show up on the question preview. How did you do it?--never mind I figured it out.

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Peter Kolar - วันศุกร์, 3 เมษายน 2020, 9:56PM

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.

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Marcel Castilho - วันพฤหัสบดี, 13 สิงหาคม 2020, 9:21AM

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.

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Dominique Bauer - วันศุกร์, 14 สิงหาคม 2020, 11:18AM

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:

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Al Henneberger - วันศุกร์, 14 สิงหาคม 2020, 8:51PM

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.

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Dominique Bauer - วันเสาร์, 15 สิงหาคม 2020, 1:34AM

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 ↗.

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Al Henneberger - วันจันทร์, 17 สิงหาคม 2020, 9:29PM

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.

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Dominique Bauer - วันอังคาร, 18 สิงหาคม 2020, 2:19AM

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:

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Dominique Bauer - วันอังคาร, 18 สิงหาคม 2020, 4:13AM

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>

การประเมินโดยเฉลี่ย:Useful (1)

Re: Drag and drop onto image - draggable images resized

โดย Al Henneberger - วันอังคาร, 18 สิงหาคม 2020, 8:32PM

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

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Beatriz Rojo - วันพฤหัสบดี, 13 สิงหาคม 2020, 8:44PM

Thanks a lot, Dominique, and sorry for my late reply!

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Tim Hunt - วันพุธ, 27 พฤศจิกายน 2019, 1:24AM

This is currently a known limitation of this question type. We (the Open University) is currently planning some updates to the various drag-drop question types to get rid of these fixed upper size limits on the background image and draggable items. However, given the way Moodle development processes work, that won't land until Moodle version 3.9.

การประเมินโดยเฉลี่ย:Useful (6)

Re: Drag and drop onto image - draggable images resized

โดย Chris Swinney - วันพุธ, 11 มีนาคม 2020, 2:04AM

Oh nice. I just started building quizzes and saw a lot of potential in the question type, but was immediately surprised at the background resolution. Can I take it that this fix would close https://tracker.moodle.org/browse/MDL-57842?

การประเมินโดยเฉลี่ย: -

Re: Drag and drop onto image - draggable images resized

โดย Tim Hunt - วันพุธ, 11 มีนาคม 2020, 5:51AM

That's the plan.

การประเมินโดยเฉลี่ย: -

Quiz

Drag and drop onto image - draggable images resized

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

Images

JavaScript

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

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

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