Brand New - Having Trouble Making .H5P

Submitted by Pixii on Mon, 04/22/2024 - 22:13
Forums: 
Developers

Hey there!

As the subject says, I am brand spankin' new to H5P... like as of 30 minutes ago I attempted to figure out more about it.

I found this tutorial section:
https://h5p.org/tutorial-greeting-card

And followed everything in the tutorial. Dotted my i's, crossed my t's, double checked for spelling errors. I mean, the tutorial is pretty straight forward... but every single time I try to upload the "H5P.GreetingCard.h5p" into Lumi and Moodle, it fails.

  • I have selected all 4 of these files within the Desktop:/H5P.GreetingCard folder, and ziped them up into Desktop/H5P.GreetingCard/H5P.GreetingCard.zip
  • Then, I right-clicked on "H5P.GreetingCard.zip" and renamed the extension from .zip to .h5p
  • In the Lumi Desktop app, I selected H5P Editor > Open Existing H5P > and navigated to Desktop/H5P.GreetingCard/H5P.GreetingCard.h5p


But it fails everytime. (I also tried an H5P activity in Moodle)

I have no idea what I am doing wrong. The contents of each file has been copied and pasted directly from the tutorial.
I am not new to CSS, JavaScript, HTML or JSON, I've been making websites and software for over 20 years.
So this isn't an issue of "you need to learn HTML before you learn H5P"

I'm clearly just missing something in the documentation, or I overlooked something, and I just need a second pair of eyes, or something other puzzle piece I seem to be missing.

Thanks in advance!

H5P file: 
Binary Data H5P.GreetingCard.h5p
otacke's picture

otacke

Mon, 04/22/2024 - 23:11

That tutorial is quite outdated and often leads to trouble.

You should not zip files manually, but use the H5P CLI tool for packing libraries with its `pack` utility command.

If you prefer zipping manually, you need to add required flags -D (do not add directory entries) and -X (eXclude eXtra file attributes), e.g. as

zip -rDX myNewFile.h5p *

Pixii

Tue, 04/23/2024 - 18:51

Hey there, thanks for the reply.

There still seems to be a major chunk of updated documentation missing.

  • I followed the instructions in the GitHub README located at: https://github.com/h5p/h5p-cli,
  • I have 2 folders: h5p-cli (the github clone) and environment
  • Within environment, I ran the command h5p core which installed the subfolders: cache, content, libraries, temp and uploads
  • I decided to test h5p setup htp-multi-choice which installed a handful of official packages in the libraries subfolder
  • cd'ing into the libraries directory I decided to try to pack "H5P.MultiChoice-1.16" using the command h5p utils pack H5P.MultiChoice-1.16 test.h5p
  • The result: Packing 1 library to file...
    H5P.MultiChoice-1.16 OK 1.16.12
  • This created a test.h5p in the libraries directory

Great, we're getting somewhere! However

  • In Lumi, I attempted to import "test.h5p", but I got the same error "Could not open H5P"

I went back to the Greeting Card tutorial and created the file structure that I saw in the H5P.MultiChoice-1.16 library. So essentially, I just used that basic boiler plate example, but I'm making sure to structure the file as is. In doing so, I was able to pack a new test.h5p (this time, the boiler plate greeting card tutorial)

  • I attempted to upload that to Moodle instead, and I see the errors: invalid-content-folder and invalid-h5p-json-file

I can see what this is referring to on the File Structure documentation: https://h5p.org/specification

However, when I attempt to follow the documentation to create this file structure, adding the h5p.json and content example, so that the folder looks more like this:

h5p-test/

├── content│   ├── images│   │   └── explain.png│   └── content.json├── H5P.Blanks│   ├── ...│   ├── library.json│   └── semantics.json└── h5p.json Then I attempt to run h5p utils pack h5p-test test.h5p... that command does nothing. No error, not success, just nothing

 

 

otacke's picture

otacke

Tue, 04/23/2024 - 19:36

When you pack an H5P library, it's not an H5P content file, but merely the library related bits and pieces.

You cannot upload a library package via the H5P Hub (it's expecting a full H5P content file). You will have to do that on the respective library settings page of moodle, WordPress, Drupal, ... or Lumi (try the cog in the upper right-hand corner).