Hi,
I'm trying to get a Jmatch quiz with audio and pictures embedded into Moodle. However, the pictures go quite wonky and the box does not accommodate their size. As well, the background doesn't cover everything. What would the solution to these issues be? I've attached a photo.
It's just a guess, but maybe if you add "overflow: auto; " to the CSS on the white boxes, they will stretch to completely contain the images.
If that doesn't work, or doesn't make sense, or you're not sure how that could be achieved, please upload your JMatch to my testing server, so that we can look at it together there.
Hi Gordon,
Thanks for your reply
I changed the CSS in a copy of the file but it just creates scroll boxes and doesn't do anything about the background. I should note that everything looks fine if I open it in my browser (chrome), but I only encounter problems when I embed in moodle.
I want to upload into your server, but I'm not sure where to do so. I got on the course, but I don't see where to upload.
Best,
Vidhya
> I got on the course,
> but I don't see where to upload.
Switch the course page into Edit mode and add a HotPot activity.
Upload your files, i.e. the Hot Potatoes file and the image files,
to the "Source file" area (see screenshot).
Finally, click the "Save changes" button at the bottom of the page.
Hi there,
I've done as requested. The display is perfectly fine on your server, HOWEVER, the background image won't show up.
Thanks,
Vidhya
Thanks for setting that up.
I have fixed the background using the Site administation -> Plugins -> Activity module -> HotPot -> Body styles
Looks OK to me. How about you?
While it works great on your site, it's still showing wonky images on mine, just as the screenshot depicted. Do you have any idea of what the problem might be? I made all of the display settings the exactly same. Could it be the theme that I'm using (adaptable)?
Could it be the theme that I'm using (adaptable)?
Probably, yes. You can verify for yourself, by switching to a standard theme, such as "Clean" or "More", and then viewing your JMatch again.
In order to fix this issue then, you have to establish which CSS from the Adaptable theme is affecting the white boxes and images in your JMatch, and then override that with your own CSS inserted into the Hot Potatoes exercise.
Most modern browsers have a way to display and adjust the CSS on a webpage. For example, Chrome has a "Developer tools" window, and Firefox has a "Web console" window.
Once you have determined which CSS you need to override the Adaptable theme, you can either insert it into the "Custom CSS" box of the Adaptable theme, or you can add it to each individual Hot Potatoes exercise that you create.
Best regards,
Gordon
Hi Gordon,
Thanks so much for your help! We've verified that it was a theme issue. My colleague with more CSS knowledge hacked the boxes to make them bigger as a quick fix. Good to know that there is a better way.
Best,
Vidhya
