H5P Integration plugin testing

[MitchellShiell]

Summary

This branch is being used to test and document H5P plugin integration on the current Bioinformatics.ca web infra

Tooling

We are testing the H5P stand-alone plugin linked here

Setting up the environment

Biofinformatics.ca homepage

Note

Although not particularly useful I'm starting here as the homepage is basic HTML allowing me to easily test the H5P plugin quickly

Largely replicating steps outlined in the tooling doc linked above

1. Download tunapanda/h5p-standalone and place it in the repo
2. Rename the extension of any given H5P module from .h5p file to .zip.
3. Extract the .zip file contents into a h5p-folder folder inside of your website root directory.
4. Add the following code on the of the webpage. This will load the scripts for the H5P Standalone.

<link type="text/css" rel="stylesheet" media="all" href="./dist/styles/h5p.css" />
<script type="text/javascript" src="./dist/main.bundle.js"></script>

4. Add the following code to the body of the webpage

<div id="h5p-container"></div>
<script type="text/javascript">
  const {
    H5P
  } = H5PStandalone;
  new H5P(document.getElementById('h5p-container'), {
    h5pJsonPath: 'question-set-11',
    frameJs: './dist/frame.bundle.js',
    frameCss: './dist/styles/h5p.css'
  });
</script>

In the example provided on this draft PR I updated the h5pJsonPath to point to the folder extracted from the H5P zip file (question-set-11). This renders the component on the page:

If you want to run this yourself locally

1. Clone the repo branch

git clone -b h5p-plugin-test https://github.com/bioinformaticsdotca/bioinformaticsdotca.github.io.git

2. Using npm install http-server

npm install -g http-server

3. Run

http-server

The webpage can be accessed and viewed from your localhost:8080

Bioinformatics.ca course page (PNA-A 2024)

https://github.com/bioinformaticsdotca/PNA-A_2024

• I will need a bit more time look at bookdown and how extensible/flexible it is with this plugin, should have somthing for you here come Monday

Further considerations

• Will need to test other content types to ensure the plugin can render all relevant H5P components
• Would need to consider how to make this as easy on your authors as possible to use and add H5P content
• A limitation i foresee is not being able to track and store user inputs for assessment, this would require having them login to the course page and storing there info (user details & H5P inputs) in a database on a currently non-existent back-end

[bioinformatics-ca]

Potential option: host on WP bioinformatics.ca site using H5P plugin. Note that this may not be a permanent solution as we are redeveloping the site and don't know what the new framework will be

https://h5p.org/wordpress

[clin-oicr]

Summary

Testing and documenting the learnitdown package on Bioinformatics.ca Bookdown template infrastructure.

Tooling

• Bioinformatics.ca Bookdown template infrastructure: https://github.com/bioinformatics-ca/PNA-A_2024
• R package (learnitdown): https://github.com/learnitr/learnitdown

Setting up the Environment

1. Followed CBW’s Bookdown Documentation page on setting up the environment: https://cbw-dev.github.io/bookdown-docs/index.html

2. Installed R package remotes
   install.packages("remotes")

3. Installed learnitdown package using install_github:
   remotes::install_github("SciViews/learnitdown")

4. Modified the code to pull from H5P.org instead of Wordpress

library(learnitdown)

h5p(
  id = "712",
  baseurl = "https://h5p.org",
  idurl = "h5p/embed/",
  width = 1090,
  height = 583,
  toc = "",
  toc.def = "",
  h5p.img = "",
  h5p.link = ""
)

Conclusion

• Learnitdown package may be a possible solution
• Learnitdown has h5p() function:
  • H5P content is stored and access from Wordpress
  • The function pulls H5P content from Wordpress and integrates it into Bookdown
  • It does not have to pull from Wordpress, the code can be modified to be pull from any host

Further Considerations

• Learnitdown requires Wordpress dependency or host dependency
• Wordpress infrastructure dependency:
  • If Wordpress goes down, the embedded H5P content on Bookdown may be affected
  • Since H5P content is externally hosted, it will need to be fetched separately
    • This can result in slow loading time, especially if content is large
• H5P plugin cannot be used on a free plan of Wordpress
  • Requires additional cost for Wordpress plan
• Cannot pass data between Bookdown and H5P content without a more complex solution (ex. API, or backend server)
• Shiny is a R package that allows you to create interactive web applications directly from R
  • May be a possible solution of embedding Shiny apps instead of H5P