Take care of your H5P content

Submitted by otacke on Sun, 12/22/2024 - 10:46
otacke's picture
Forums: 
General discussion

Take care of your H5P content! With the H5P Caretaker brought to you by NDLA (shortly) ...

Attachments: 
Image icon Screenshot from 2024-12-22 09-32-24.png

Realia

Thu, 12/26/2024 - 21:46

Hi Oliver !

Very useful tool to make better H5P contents and thoroughly check accessibility : thanks NDLANO and thanks to you for bringing this tool to the community.

I've test-driven it on its temporary homepage on your server but I have stumbled upon a minor issue : as I couldn't scroll the page (no scrollbars), I couldn't see the results for the H5P file that I had uploaded. The content was cut and I couldn't scroll to read it. I am using Chrome as a browser. I've managed to fix the issue locally thanks to the Chrome Inspector by adding these lines to the CSS :

.page { .background-light { max-height: 500px; overflow-y: auto; } }

Only then was I able to scroll the 3rd DIV from the main container and review the 83 errors found in my contents.

Best,

Isabelle

otacke's picture

otacke

Fri, 12/27/2024 - 00:42

I'd need more information to reproduce this issue. There's no particular height or overflow setting for the CSS class that you are referencing, so the browser should just make the page higher.

Realia

Fri, 12/27/2024 - 12:31

Hi Oliver !

I've run some more tests and here are the results :

1. H5P Caretaker on my Chrome : I can't scroll the page (I have to tweak the code through the inspector to get scrollbars on the Results div). Here is the console log :

But my Chrome version is outdated due to the old age of my Imac that I can't update anymore (yeah, I should buy a new one) :

So I have tried the page on my husband's computer on Chrome which is updated and I can't reproduce the issue. It is surely related to my Chrome outdated version...

To make sure, I have tried the Caretacker with Firefox on my computer (which is updated to the latest version) and everything is smooth :

 

I've also tested on Safari on my computer and the page is completely broken (the CSS won't load ?) but then again, my Safari can't update anymore :

 

In conclusion, the issue is due to my Imac's old age: time has come to replace it :(

Best,

Isabelle

Attachments: 
Image icon Capture d’écran 2024-12-27 à 12.17.47.png
Image icon Capture d’écran 2024-12-27 à 12.19.16.png
Image icon Capture d’écran 2024-12-27 à 12.18.37.png
Image icon Capture d’écran 2024-12-27 à 12.16.28.png
otacke's picture

otacke

Fri, 12/27/2024 - 19:19

Thanks for that good report!

Your older version of Chrome does seem to have problems with the CSS @import rule - which it should not. That's not something special (https://developer.mozilla.org/en-US/docs/Web/CSS/@import#browser_compatibility), so my best guess is that the server issue ("The message port closed") is the true cause. That should be something that I can find, hopefully.

Safari version 15 does not seem to load the stylesheets at all. I guess I used something that it in fact cannot understand - it will definitely not handle container queries, for instance, available as of Safari 16. I will take a look as well. H5P itself only guarantees to work on the latest three browser versions, and if using container queries is the cause, you will run into trouble with H5P as well. That feature is simple and great, H5P Group will surely adopt it soon, and container queries would need to be replaced by custom JavaScript making things more complicated.

Will probably have a look tomorrow. Lying in bed all day today with a stomach issue.