How can I install H5P SCORM libraries?

Question

The subject says it all. I am attempting to install H5P SCORM libraries in an install of Drupal 7.59 and running into a roadblock: None of what I am reading—or understanding—is clear about how to install the libraries. I am attempting this on macOS High Sierra under MAMP 4.5 (PHP 7.1.12) and MAMP 3.5.2 (PHP 5.6.10). Apache permissions are fine as far as I can see, FWIW and other temp files and uploads work fine on this setup.

I have installed the following two modules in Drupal:

• H5P: The core H5P module.
• H5P SCORM/xAPI: The H5P SCORM API.

And on the module’s install page I have activated all three modules connected to them:

• H5P (7.x-1.35)
• H5P Editor (7.x-1.35)
• H5P SCORM (7.x-2.4)

But when I go to install the libraries… I just can’t seem to get them to upload without some error happening such as a problem expanding the archive into the temp/ directory and such. The weird thing is temp direcroures are clearly created, but there is no content in them.

I have even followed the “Better Install Instructions” that appear here as a contributed “issue” but with no luck.

The libraries in question are as follows:

• H5PEditor SCORM
• H5P SCORM/xAPI

Do the decompressed files need to have a directory name such as H5PEditor.ScormFile.h5p or H5P.Scorm.h5p? Because if I simply rename the files, the created directory is still h5p-editor-scorm-master and h5p-scorm-master.

The tangential question is… Is there simply a way I can just physically place files in the correct directory structure user libraries/? Or must it be installed via the administration interface? It seems to me if I could just drop those files in, Drupal—and the H5P modules—should be able to see them, right?

Answer 1

See this page about how to manually construct H5P packages and follow the same process for each repo.

You need to download the repo Zip file. Decompress into a temp directory. Delete the LICENSE, README.md, and .gitignore files

Create a new folder to hold the rest of the files like library.json, CSS, JS For the H5P editor, name it H5PEditor.ScormFile. For the h5p-scorm-master, use H5P.Scorm:

Outside of the new folder, create an h5p.json file.

For the H5PEditor.ScormFile, use this:

{
  "title": "H5PEditor.ScormFile",
  "language": "en",
  "author": "Pavlo Shevchuk",
  "license": "cc-by-sa",
  "preloadedDependencies": [
    { "machineName": "H5PEditor.ScormFile", "majorVersion": 1, "minorVersion": 0,"patchVersion": 8, }
  ],
  "mainLibrary": "H5PEditor.ScormFile",
}

for the H5P.Scorm, use:

{
  "title": "SCORM/xAPI",
  "language": "en",
  "license": "cc-by-sa",
  "preloadedDependencies": [
    { "machineName": "H5P.Scorm", "majorVersion": 1, "minorVersion": 1, "patchVersion": 16, }
  ],
  "mainLibrary": "H5P.Scorm",
  "embedTypes": ["div"]
}

Now Zip up the right h5p.json folder and the H5PEditor.Scormfile or and the other with H5P.Scorm directory. Zip compress each, naming the editor file H5PEditor.ScormFile.h5p and the second library H5P.Scorm.h5p.

Creating H5PEditor.ScormFile.h5p.

So create Zip file renamed to H5PEditor.ScormFile.h5p. Inside of that you have a folder named H5PEditor.ScormFile with contents of the Git repo, https://github.com/pavloshevchuk/h5p-editor-scorm, specified files removed. You also create a h5p.json file with the code provided. Place it in the Zip file but outside the H5PEditor.ScormFile directory.

H5PEditor.ScormFile.h5p
├── H5PEditor.ScormFile
│   ├── library.json
│   ├── scripts
│   │   ├── scormFile.js
│   │   └── scormFileUploader.js
│   └── styles
│       └── scormFile.css
├── H5PEditor.ScormFile.h5p

Creating H5P.Scorm.h5p.

Create a second Zip file renamed to H5P.Scorm.h5p. Inside of that you have a folder named H5P.Scorm with contents of the Git repo: https://github.com/pavloshevchuk/h5p-scorm, specified files deleted. Place the icon.svg file in a directory called content, inside the Zip file. You also create a h5p.json file with the code provided. Place it in the Zip file but outside the H5P.Scorm directory. The Zip file contains this structure:

H5P.Scorm.h5p
├── content
│   └── icon.svg
├── h5p.json
├── H5P.Scorm
│   ├── css
│   │   └── scorm.css
│   ├── js
│   │   ├── api
│   │   │   ├── api_1_2.js
│   │   │   ├── api_2004.js
│   │   │   ├── datamodel.js
│   │   │   ├── debug.js
│   │   │   └── flash_detect.js
│   │   └── scorm.js
│   ├── library.json
│   └── semantics.json

You should now have two H5P files and you will now be able to update them at the H5P admin libraries page:

admin/content/h5p

Here's a repo containing the files I made following these instructions: https://github.com/jackrabbithanna/h5p-scorm-libraries