Hi all,
we'd like to use WebGL projects in moodle 4.2. These are similar to H5P projects: There's a zip file that contains an index.html and a number of assets.
I found some info, mainly this video playlist, about SCORM integration for WebGL. It seems possible to export WebGL projects in a SCORM compliant format. However, the contents for our website come from several teams. It might not be possible to make those teams change their workflows. The sample WebGL project I have is not SCORM compliant. When I try to upload it to a SCORM package activity, I get an error message: "Incorrect file package - missing imsmanifest.xml or AICC structure".
There's a plug-in available that adds a WebGL activity to moodle. A colleague has already used it and I will test it with our systems. However, there hasn't been any activity since 2021 and I doubt the plug-in will ever be approved for publication in the moodle plug-in directory.
Is there a proven solution to use WebGL projects in moodle courses without embedding them in an IFrame from an external server?
Thanks
Oliver
In case you don't need tracking, you should be able to upload the ZIP file into a Moodle file resource. Unzip it (in the file resource) and set the main page to index.html. Once you click on the file, the WebGL project should open.
(I've not tried this with WebGL but it works with other ZIP files.)
(I've not tried this with WebGL but it works with other ZIP files.)
Thank you, that works. I will check with the WebGL developers whether this approach is an option for them.
In the meantime, I have uploaded some WebGL projects as file resources. None of them are responsive. At least they are not usable on smartphones. Do you by any chance have experience with this problem?
I have uploaded webgl as file resources and they've worked.
Maybe test on desktop browsers; if it works there, it would be a webgl mobile compatibility issue rather than a moodle issue.
Maybe test on desktop browsers; if it works there, it would be a webgl mobile compatibility issue rather than a moodle issue.
Thank you. The WebGL projects do work, we just want them to get smaller if the original size doesn't fit in the browser window. We've done some testing in Chrome DevTools and I think the problem can be fixed with some CSS. If we find a good solution, I'll post it in this thread.
Yes, if you're embedding static HTML/Javascript/CSS in Moodle like this, the person writing the embedded files will need to take care of the CSS to make the page responsive. Moodle just embeds the HTML page, it has no control over the display beyond that.
There are ways to style IFrame contents from the parent, at least if everything is on the same domain. Both windows in the screenshot show the same page (at 1200 and 750 px, respectively).
Here is the JavaScript code I used to add the necessary CSS to make the WebGL project they display responsive:
/* The 'resourceobject' id is set by moodle */const IFRAME = document.querySelector('#resourceobject')const HEAD = IFRAME.contentWindow.document.getElementsByTagName('head')[0]
/* These ids come from the WebGL project. It might be possibleto compute the correct aspect ratio from inline CSS attributes. */let cssText = '#unity-container { width: 100%; aspect-ratio: 1.43 / 1; }' + '\n' + '#unity-canvas { width: 100% !important; height: 80% !important; }'
let cssNode = document.createElement("style")cssNode.appendChild(document.createTextNode(cssText))
HEAD.appendChild(cssNode)
However, the HTML structure varies depending on the WebGL project. For example, I've seen body > .webgl-content > #unityContainer > #canvas as well as body > #unity-container > #unity-canvas. It's probably easier to add the CSS manually by downloading index.html, editing it, and re-uploading it.