Basic Boilerplate hello-world example from download to moodle-ready h5p package.

Submitted by Tugeev on Wed, 11/06/2024 - 14:19
Forums: 
Developers

Hello. I am learning h5p but unfortunately a lot of branches on this forum are either incomplete, unclear or missing important details. I wanted to ask for help with the most basic example and at the same time provide a good starting point for someone who is also trying to learn basics of h5p.

Current goal I want to achieve is to simple create an h5p package that can be uploaded to moodle course and display a 'hello world message'.

Here is the sequence of actions I have taken so far for this attempt, following multiple tutorials and examples (I am working on Windows 11):

  1. Download & installed node.js
  2. Installed h5p and its command line interface via command "npm install -g h5p-cli".
  3. Downloaded a zipped example of the boilerplate 'hello world' from the official github (https://github.com/h5p/h5p-boilerplate) and unpacked it.
  4. Opened the folder in Visual Studio Code and ran the command 'npm install' via the terminal to install all the necessary libraries/packages.
  5. Within the same folder from the same terminal ran the command 'npm run build' to package the library for distribution.
  6. Via the same terminal went one folder up, to the folder containing the unzipped 'h5p-boilerplate-master' folder and packaged the library using the following command: 'h5p pack h5p-boilerplate-master test.h5p', in order to create the h5p package in the current folder.
  7. Renamed the 'test.h5p' to 'test.zip' to be able to open it like an archive.
  8. Following advice on this forum created an h5p.json file I am attaching to this post and manually added it to the 'test.zip' (via simple drag&drop)
  9. Renamed the 'test.zip' back to test.h5p
  10. Uploaded it to moodle via 'Add Activity/Resource -> H5P -> Upload'.

Unfortunately I am currently getting the error 'Validating h5p package failed. Missing main library @library'.

I suspect my issues start with step 7 or 8, and I would be very grateful if someone could explain what exactly my error is, so that I could both fix it and to leave a clear record of the most basic example for other novices to follow, because even getting to the current point has taken me days if not weeks.

Attachments: 
Binary Data h5p.json
otacke's picture

otacke

Wed, 11/06/2024 - 19:41

Hi!

If you want to just use the library, you do not need to turn it into H5P content. You could just upload your packed library on the H5P library management page of moodle and then use it like any other content.

I am little curious if you're really running the latest version of the H5P CLI tool, becuase the pack command should now require `h5p utils pack`, but that should not interfere with the usage.

If you really want to create a content archive - your h5p.json looks fine at a glance - then you'll also need a file named content.json inside a folder named content. It needs to provide the parameters that the "author" entered. Please see the H5P file specification.

I am not sure that's what moodle wants to convey with the error message. My best guess here is that you're not uploading the file with administrative rights, hence the library cannot be installed from the H5P file. Please compare https://snordian.de/2022/12/31/why-cant-i-upload-h5p-content/ for what happens when you upload H5P content.

Also, if ensure that the zip tool that you're using does not alter the -X and -D flag on the archive. People often run into trouble if they manually zip files for H5P because they don't set these zip flags.

And one last note: Please consider using the H5P CLI tool's inbuilt server to develop H5P content types. You won't have much fun doing that on moodle.

Best,
Oliver

Tugeev

Thu, 11/07/2024 - 09:53

Thank you for the detailed feedback.

  1. If there is a way to ensure that I am using the latest version of the h5p CLI - I would be grateful if you could tell me about it. When I try to execute 'h5p --version' that I have seen should provide the information about my version, the terminal says that the command is unknown.
  2. When trying to upload the packed .h5p file without the content folder or the h5p.json I get the errors 'A valid content folder is missing' and 'A valid main h5p.json file is missing'. I assume that the upload section on Moodle that I am interacting with requires the actual finished content package, not just a library.
  3. Unfortunately I have forgotten to include information about the content folder into step 8. I created a content folder with an .jpg file and a content.json file that I am attaching to this comment. I don't think the original hello-world boilerplate example requires any content at all, so I took the image and the example of the content.json from another tutorial. In step 8 I also dragged this folder to the test.zip at the same time as the h5p.json. If I left the content folder empty, windows complained that it couldn't add an empty folder to the archive.
  4. I will examine the role management issue, as I am not familiar with this aspect and the course belongs to the organisation I work at. I upload the package there to test if it in the end-point environment, so to speak.
  5. Just in case I am attaching the h5p file as well.
H5P file: 
Binary Data test.h5p
Attachments: 
Binary Data content.json
otacke's picture

otacke

Thu, 11/07/2024 - 16:17

  1. You can run `npm list -g` in order to check the version all the globally installed modules - h5p-cli should be one of them. The tool itself does not have a version command.
  2. That happens if you upload a file to the H5P Hub (or maybe some custom moodle file upload widget) where content is expected. I was speaking of the H5P library management page in the admin's site settings.
  3. The content folder will at least have to contain a content.json file, so it should never be empty.
  4. If you lack administrative rights, then trying to install an H5P library by uploading a content file is expected to fail. It's a security measure. (https://snordian.de/2022/12/31/why-cant-i-upload-h5p-content/)
  5. I could upload the file to a WordPress site without any issues.

Tugeev

Thu, 11/07/2024 - 13:43

I tried using the CLI-server that you mentioned to test the permission issue. I have done the following:

  1. In another folder called 'COREH5P' I installed the h5p core libraries via the terminal command 'h5p core'
  2. I started the h5p server via the command 'h5p server' and followed the link in the console to open the server interface.
  3. I assumed that I needed to use the import function first. Initially I tried importing the test.h5p WITHOUT content or h5p,json folder inside of it. I got an error saying that these elements were missing.
  4. I then attempted to import the test.h5p WITH the content folder and the h5p.json. This resulted in files from the 'content' folder and h5p.json being imported to the 'content folder', inside the folder with the name I input during the import as a title. I assume that allows importing the custom content for an activity type, defined by the library the server in its 'libraries' folder.
  5. I copied the entire 'h5p-boilerplate-master' folder that I downloaded from github to the 'libraries' folder inside the 'COREH5P'. This allowed me, from the server interface, to click 'new' button and in the drop down menu select 'h5p-hello-world' as the activity type. This, in turn, gave me access to the activity creation interface, where I could edit the text that would be displayed when the activity is used.

If I understand correctly, libraries define activity type, while the 'content' folder and h5p.json define the specific form and content this activity type takes each time the new instance is created.

My question is, I think then, as follows:

When working with moodle, how do I add a new library (i.e. like the 'h5p-boilerplate-master' folder) to the appropriate place so that I can create new instances of that activity?

 

otacke's picture

otacke

Thu, 11/07/2024 - 18:27

Hi!

  1. ---
  2. ---
  3. There's a tutorial on how to get started at https://github.com/h5p/h5p-cli/blob/master/readme.md and some more commands (like register and setup) are explained at https://github.com/h5p/h5p-cli/blob/master/assets/docs/commands.md
  4. The import command allows to upload any H5P content, not just content created with custom libraries.
  5. You'd simple register and setup a repository or clone it to the libraries folder. No need to download it elsewhere and then copy it over.

You understood correctly.

Again: You will have to upload library files via the H5P library management page in the admin settings.