Images in MCQs sometimes don't show up

Submitted by robertcutforth on Wed, 07/26/2017 - 11:36
Forums: 
Bugs in content types

Hi,

We've been using h5P at the University of Manchester for some time and we've just started noticing a problem that appears to happen randomly. Sometimes when a page is opened with an H5P MCQ in it, the images and the boxes don't load properly. I've made a video here to show you exactly what I am talking about:

https://screencast-o-matic.com/watch/cbiOQUlxrE

As you can see, the problem occurs in Chrome and Firefox (and IE, it was tested on another machine) but it seems to always be fine on Safari. Having said that, most of the time it DOES work in all browsers, this issue only happens every now and then. At first we thought perhaps there was some other code on the page that was messing it up, but the page in the video only contains text, images and other H5P questions (including drag and drops).

Anyone have any ideas why this might be happening? Any and all help would be appreciated.

Thanks!

Rob

 

 

icc's picture

icc

Thu, 07/27/2017 - 10:11

Hi Rob,
Thanks for sharing a detailed screencast of the issue.

Font files are used to produce the icons that are missing and seeing as the different browsers use different file formats for fonts the issue may be due to an issue loading the file type. To verify this you can open your browser's console (Ctrl+Shift+J in Chrome) and look for any error messages when the icons are gone. Note that you probably need to have the console open when the page loads.

It's hard to know for sure without any error messages, but if I'm going to guess I'm thinking that the web server probably isn't providing the correct header/mime type for the font files. Do you know which web server you're using? 

robertcutforth

Fri, 07/28/2017 - 11:50

Thanks so much, ICC, I did the check on the console and you were exactly right. The error was:

"Access to Font at '[page URL]/h5p//libraries/FontAwesome-4.5/fontawesome-webfont.woff2?v=4.5.0' from origin [page URL] has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin [page URL] is therefore not allowed access."

I have emailed the IT guys running the server to try to get the setting changed. Much appreciated!