H5P element (Lumi, All-in-One HTML file)

[ceryild]

Hello,

I am encountering an issue while working on my Liascript course using Atom. Specifically, I have created an H5P element with Lumi, exported it as an All-in-One HTML file, and saved it on GitHub under the name "CY_FAIR-Principles_html.html" in the repository "modul-fdII-thkoeln". In Atom, I have integrated the element using the iframe tag:

<iframe src="CY_FAIR-Prinzipien html.html" width="100%" height="840" frameborder="0" allowfullscreen="allowfullscreen" title="H5P"></iframe>

However, I am facing an issue where this H5P element does not open in the preview. I am hopeful that we can resolve this problem and would greatly appreciate any assistance you can provide.

Thank you for your attention to this matter.

Best regards

[andre-dietrich]

Hi @ceryild ... It might be the case, that you have to provide the entire URL starting with https://, not the local/relative one. Another problem might be the usage of spaces, but in this case I am not sure. You could also send us your example to LiaScript@web.de - if you don't want to share it publicly - so we could figure out what the problem is ...

;-) André

[ceryild]

Dear André,

Thank you for your reply. We have tried to implement the solutions you suggested.
Renaming the file was not the cause of the error, but it was a helpful hint in terms of best practices - thank you.
In the original code example, we replaced the relative path specification with an absolute path. This did not fix the error either.
With the help of a debugging tool (Firefox), we received a warning -> https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options.

With the following approach, we then tried to exclude potential security risks through the iframe:

<iframe width="960" height="600"></iframe>

<script sandbox="allow-forms allow-modals" allow="" referrerpolicy="no-referrer">

const iframeElem = document.querySelector("iframe");

iframeElem.credentialless = true;
iframeElem.title = "Title";
iframeElem.src = "pathToFile";

</script>

We discovered that embedding H5P elements into an iframe works when the content is hosted on a web server (https://github.com/mbluemm/modul-fdII-thkoeln/blob/main/CY_%201%20Lernbaustein%20Umsetzung.md?plain=1).

The error only occurs when including files from our GitHub repo. Should iframes be avoided due to the security risks? Are there other techniques to embed H5P elements (hosted on GitHub) in LiaScript?

Any tips would be greatly appreciated. Thank you very much in advance.

[andre-dietrich]

Hi, basically one of the following shall be enough, to load your H5P resource ...

<iframe width="960" height="600" src="https://werner-bock.com/wp-content/uploads/2024/02/CY_FAIR-Prinzipien.html"></iframe>

??[link to quiz](https://werner-bock.com/wp-content/uploads/2024/02/CY_FAIR-Prinzipien.html)

With the second one you still have a link at your GitHub-resource...

---

Hosting HTML on directly on GitHub is not possible, if you reference a local HTML file, GitHub will not allow to load HTML, CSS, or JavaScript resources properly. For JS and CSS LiaScript will try to load them as a blob data-uri ... However, long story short, If you want to host such HTML-files on GitHub, you can store them in a docs folder and then create a new branch gh-pages. You can use this branch to host a website or your required resources. This video explains, how to create such a page ...

https://www.youtube.com/watch?v=QyFcl_Fba-k

I hope this will do the job ;-)

Kind regards,

André