Drag and Drop (Map) question type with gif images

Drag and Drop (Map) question type with gif images

by Jason Hollowell -
Number of replies: 14
Picture of Particularly helpful Moodlers

I feel like this question has to have been asked somewhere but my forum search didn't find anything. sad

I want to use the drag and drop question type using an image (map) and images to drag (individual countries from the map). I have 'extracted' the individual countries using Gimp, which was a rather tedious process. When the images are saved as gif images the outlined image can be preserved but when saved as a jpeg image the image is cropped into a square, which for drag an drop results in an awkward situation of having to drag a square, larger than the actual target, onto a map...thereby covering some of the adjacent countries. 

Is there anyway to 'fix' this problem that anyone is aware of.

For reference, I will try to attach some screenshots here of my problem.

The following is when a jpeg is used.


This is with a gif that has apparently been converted, within Moodle, to jpeg...?


Maybe I need to use a different image format to get transparency outside of the 'visible' image?

Thanks, in advance, for any help or advice provided. smile

Jason


Average of ratings: -
In reply to Jason Hollowell

Re: Drag and Drop (Map) question type with gif images

by Jason Hollowell -
Picture of Particularly helpful Moodlers

All,

I'm realizing that my explanation was probably not very clear. sad

My goal is something like the attached screenshot.

Any advice will be most appreciated.

Jason


Average of ratings: -
In reply to Jason Hollowell

Re: Drag and Drop (Map) question type with gif images

by Jason Hollowell -
Picture of Particularly helpful Moodlers

Any advice, suggestions, etc. WILL sincerely  be appreciated. mixed

Jason

Average of ratings: -
In reply to Jason Hollowell

Re: Drag and Drop (Map) question type with gif images

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Have you tried using .png pictures with the white surrounding area set to be invisible and for the whole picture to NOT have a border?

Average of ratings: -
In reply to AL Rachels

Re: Drag and Drop (Map) question type with gif images

by Jason Hollowell -
Picture of Particularly helpful Moodlers

Al,

Thank you very much for the suggestion. I'm not sure if I tried that or not...I tried so many different things, I kind of got lost. smile

I will give that a try and report back.

Regards

Jason

Average of ratings: -
In reply to AL Rachels

Re: Drag and Drop (Map) question type with gif images

by Jason Hollowell -
Picture of Particularly helpful Moodlers

Al,

Well, I either didn't save the image correctly or what I am trying to do isn't possible... I'm not sure which at this point...

It looks like the images (from the items to drag) are automatically converted (or at least formatted in a box) by the Moodle question type...

Back to the drawing board I guess as I'm having multiple issues with the drag and drop onto image question type. sad

Regards

Jason

Average of ratings: -
In reply to Jason Hollowell

Re: Drag and Drop (Map) question type with gif images

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Jason,

I ran in to the same problem and conclusion while trying to help someone else last week. I think the question type needs some work done to it so that it becomes usable for the way you want to use it.

Average of ratings: Useful (1)
In reply to AL Rachels

Re: Drag and Drop (Map) question type with gif images

by Jason Hollowell -
Picture of Particularly helpful Moodlers

Al,

Thanks, I was afraid that was the case. Thank you for the confirmation.

Jason

Average of ratings: -
In reply to Jason Hollowell

Re: Drag and Drop (Map) question type with gif images

by Daniel Thies -
Picture of Core developers Picture of Plugin developers Picture of Testers

Jason & AL,

I was able to get shaped drag items be using SVG images and adding some CSS. The white background and border of the drop is set in the styles.css file. These need to be overridden. The drop zones are rectangular so also will require some changes to CSS.

Daniel

Average of ratings: -
In reply to Daniel Thies

Re: Drag and Drop (Map) question type with gif images

by Jason Hollowell -
Picture of Particularly helpful Moodlers

Daniel,

Wow! Thanks - any chance you can specify the CSS you added/changed?

Regards

Jason

Average of ratings: -
In reply to Jason Hollowell

Re: Drag and Drop (Map) question type with gif images

by Daniel Thies -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hello Jason,

You can find the CSS for the background here. Change to background: none will remove the background. (You should probably copy this to the extra CSS in the theme first so you do not need to change the code) Similarly you would remove the border for the drag elements. The drop elements should also be changed to fit your needs. Keep in mind these changes will affect existing questions on the site.

Daniel

Average of ratings: -
In reply to Daniel Thies

Re: Drag and Drop (Map) question type with gif images

by Gordon McLeod -

Hello Daniel,

I've been trying out the css mod you suggested for using  images with transparent backgrounds with drag&drop question type.

I modified the lines for background and border in .../question/type/ddimageortext/styles.css as suggested, and added a couple of .svg images to the question to test with (before I get into batch converting png to svg). In edit mode, both the existing .png images and the new .svg files display, and can be dragged around on the background image to position them. When I go to preview the question though, only the original .png files are displayed (with white, not transparent background). The .svg files aren't displayed at all, although the target boxes to drop them onto are shown.

As the .svg files display in question editing mode I don't think the filetype is an issue, but I must be missing something else. Any suggestions from how you got this to work?

Regards, Gordon.

Average of ratings: -
In reply to Gordon McLeod

Re: Drag and Drop (Map) question type with gif images

by Daniel Thies -
Picture of Core developers Picture of Plugin developers Picture of Testers

Did you purge your cache? SVG may not work across browswers. PNG may be better if it works.

Average of ratings: -
In reply to Daniel Thies

Re: Drag and Drop (Map) question type with gif images

by Gordon McLeod -

Hi Daniel,

Purging caches resolved the problem - I'd already tried that but guess I must have gone back in again and made a change without purging again. I still can't see the .svg files I tested with, but the .png files displayed correctly as transparent (below), which is actually an easier solution.

I made the following changes to the styles.css file:


# Allow transparent backgrounds
.que.ddimageortext .group1, form.mform fieldset#id_previewareaheader .group1 {
    background-color: none!important;
}
.que.ddimageortext .group2, form.mform fieldset#id_previewareaheader .group2 {
    background-color: none!important;
}
.que.ddimageortext .group3, form.mform fieldset#id_previewareaheader .group3 {
    background-color: none!important;
}
.que.ddimageortext .group4, form.mform fieldset#id_previewareaheader .group4 {
    background-color: none!important;
}
.que.ddimageortext .group5, form.mform fieldset#id_previewareaheader .group5 {
    background-color: none!important;
}
.que.ddimageortext .group6, form.mform fieldset#id_previewareaheader .group6 {
    background-color: none!important;
}
.que.ddimageortext .group7, form.mform fieldset#id_previewareaheader .group7 {
    background-color: none!important;
}
.que.ddimageortext .group8, form.mform fieldset#id_previewareaheader .group8 {
    background-color: none!important;
}
.que.ddimageortext .drag, form.mform fieldset#id_previewareaheader .drag {
    border:  none!important;
    cursor: move;
    z-index: 2;
}
.que.ddimageortext .dragitems.readonly .drag {
    cursor: auto;
}
.que.ddimageortext div.ddarea, form.mform fieldset#id_previewareaheader div.ddarea {
    text-align : center;
}
.que.ddimageortext .dropbackground, form.mform fieldset#id_previewareaheader .dropbackground {
    margin:0 auto;
}
.que.ddimageortext .dropzone {
    border: none!important;
    position: absolute;
    z-index: 1;
}

I guess it would be easy enough to leave a few of the groups unchanged (I edited all while testing this) to allow the use of the original "image with white background" format.

Regards, Gordon.


Attachment DnD question transparent fix.jpg
Average of ratings: Useful (2)
In reply to Gordon McLeod

Re: Drag and Drop (Map) question type with gif images

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Nice use of the question type. Purge Caches is a bit like "Have you tried turning it off and on again", but it often fixes the problem (particularly if you do it twice smile

Average of ratings: Useful (1)