0

Thanks to jackrabbithanna’s help on this other question I seem to be 1/2 way to getting H5P related libraries installed in my Drupal 7.59 install. 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).

But like I said, I am 1/2 way there; not fully there. I am able to get the H5PEditor.ScormFile (1.0.8) library installed, but not H5P.Scorm (1.1.16).

The libraries in question are as follows:

To help this process, I have now devised a bit of a Bash scripting process to get the h5p packages built from the source GitHub repos. Here is what I do…

The H5PEditor.ScormFile (1.0.8) Bash dance:

cd ~/Desktop/

git clone https://github.com/pavloshevchuk/h5p-editor-scorm 

cd ~/Desktop/h5p-editor-scorm

find . -type f \( -name '.DS_Store' -o -name '.gitignore' -o -name 'LICENSE' -o -name 'README.md' \) -exec rm {} \;
find . -type d -name '.git' -exec rm -rf {} \;

mkdir H5PEditor.ScormFile && mv {scripts,styles,*.json} H5PEditor.ScormFile

echo '{
  "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",
}' > h5p.json

zip -r ../H5PEditor.ScormFile.h5p *

The H5P.Scorm (1.1.16) Bash dance:

cd ~/Desktop/

git clone https://github.com/pavloshevchuk/h5p-scorm

cd ~/Desktop/h5p-scorm

find . -type f \( -name '.DS_Store' -o -name '.gitignore' -o -name 'LICENSE' -o -name 'README.md' \) -exec rm {} \;
find . -type d -name '.git' -exec rm -rf {} \;

mkdir H5P.Scorm && mv {css,js,*.json} H5P.Scorm
mkdir content && mv icon.svg content

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

zip -r ../H5P.Scorm.h5p *

And with those two things done I now have two H5P files ready to go: H5PEditor.ScormFile.h5p and H5PEditor.ScormFile.h5p.

But while installing H5PEditor.ScormFile.h5p proceeds as expected, the same can’t be said for H5PEditor.ScormFile.h5p. I get the following Drupal system information message:

For security reasons, your upload has been renamed to H5P.Scorm_.h5p.

Followed by this “great news”:

The uploaded file was not a valid h5p package

Screenshot attached below. Any insight is appreciated.

Screensnot of the “H5P.Scorm.h5p” library failing to install as expected.

1 Answer 1

1

Short Answer

Font Awesome (4.5.4) libraries needed to be explicitly installed for H5P so that Scorm (1.1.16) can be installed. Details on how that was done near end of answer.


Long Answer

Happily, I was able to self-solve this. Starting with a fresh, clean, 100% new install of Drupal 7.59 I went ahead with this process again. Getting H5PEditor.ScormFile (1.0.8) installed was fine—as before on a more established Drupal 7.59 install—but ran into the same exact issue with H5P.Scorm (1.1.16)… But on this clean install I did get a major clue via more details in error reporting; screenshot below but the text reads:

“Missing required library FontAwesome 4.5”

FontAwesome H5P Error

I took this error to mean that the Drupal module and related libraries for Font Awesome were not installed and that is why the “The uploaded file was not a valid h5p package.” error came up.

So I went ahead and did that—and installed Font Awesome 4.7 libraries—screenshot below:

Drupal 7.59 Installed Modules

Tried installing H5P.Scorm (1.1.16) again… And again, the same message:

“Missing required library FontAwesome 4.5” message.

So I took this all to mean that H5P needed it’s own library install of Font Awesome, Googled and found this H5P related Font Awesome repo.

Great! So now learning what I learned previously in this other answer, I figured out how to create my own H5P.FontAwesome.h5p library, which WORKS GREAT! Screenshot below to show the process did work and I was able to get H5P.Scorm (1.1.16) installed once the H5P specific Font Awesome library was installed as well:

All SCORM stuff installed after Font Awesome libaray was set

And to make everyone’s life easier—especially mine—I created a fairly simple Bash script that allows me to automatically create the H5PEditor.ScormFile.h5p, H5P.FontAwesome.h5p and H5P.Scorm.h5p libraries on my macOS machine; see below for source code. Just save it as a Bash file named something like build_h5p_scorm_libs.sh and give yourself execute permissions via chmod u+x build_h5p_scorm_libs.sh and you are good to go.

Library installation order should be as follows:

  • H5PEditor.ScormFile.h5p
  • H5P.FontAwesome.h5p
  • H5P.Scorm.h5p

Genuinely hope this helps someone in the future!

#/bin/bash

################################################################################
# Build the H5PEditor.ScormFile H5P file.
################################################################################

# Go to the Desktop.
cd ~/Desktop/

# Clone the repo.
git clone https://github.com/pavloshevchuk/h5p-editor-scorm

# Go into that cloned repo.
cd ~/Desktop/h5p-editor-scorm

# Clean up cruft that is not needed for the H5P file.
find . -type f \( -name '.DS_Store' -o -name '.gitignore' -o -name 'LICENSE' -o -name 'README.md' \) -exec rm {} \;
find . -type d -name '.git' -exec rm -rf {} \;

# Create the library directory and copy files into it.
mkdir H5PEditor.ScormFile && mv {scripts,styles,*.json} H5PEditor.ScormFile

# Create the 'h5p.json' file.
echo '{
  "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",
}' > h5p.json

# Now Zip that all up into a compressed `.h5p` archive like this.
zip -rq ../H5PEditor.ScormFile.h5p *

################################################################################
# Build the H5P.FontAwesome H5P file.
################################################################################

# Go to the Desktop.
cd ~/Desktop/

# Clone the repo.
git clone https://github.com/h5p/font-awesome

# Go into that cloned repo.
cd ~/Desktop/font-awesome

# Clean up cruft that is not needed for the H5P file.
find . -type f \( -name '.DS_Store' -o -name '.gitignore' -o -name 'LICENSE' -o -name 'README.md' \) -exec rm {} \;
find . -type d -name '.git' -exec rm -rf {} \;

# Create the library directory and copy files into it.
mkdir FontAwesome && mv {*.css,*.otf,*.eot,*.svg,*.ttf,*.woff*,*.json} FontAwesome

# Create the 'h5p.json' file.
echo '{
  "title": "FontAwesome",
  "language": "en",
  "license": "cc-by-sa",
  "preloadedDependencies": [
    {
      "machineName": "FontAwesome",
      "majorVersion": 4,
      "minorVersion": 5,
      "patchVersion": 4
    }
  ],
  "mainLibrary": "FontAwesome"
}' > h5p.json

# Now Zip that all up into a compressed `.h5p` archive like this.
zip -rq ../H5P.FontAwesome.h5p *

################################################################################
# Build the H5P.Scorm H5P file.
################################################################################

# Go to the Desktop.
cd ~/Desktop/

# Clone the repo.
git clone https://github.com/pavloshevchuk/h5p-scorm

# Go into that cloned repo.
cd ~/Desktop/h5p-scorm

# Clean up cruft that is not needed for the H5P file.
find . -type f \( -name '.DS_Store' -o -name '.gitignore' -o -name 'LICENSE' -o -name 'README.md' \) -exec rm {} \;
find . -type d -name '.git' -exec rm -rf {} \;

# Create the library directory and copy files into it.
mkdir H5P.Scorm && mv {css,js,*.json} H5P.Scorm

# Create the content directory and copy files into it.
mkdir content && mv icon.svg content

echo '{
  "title": "SCORM/xAPI",
  "language": "en",
  "author": "Pavlo Shevchuk",
  "license": "cc-by-sa",
  "preloadedDependencies": [
    {
      "machineName": "H5P.Scorm",
      "majorVersion": 1,
      "minorVersion": 1,
      "patchVersion": 16
    }
  ],
  "mainLibrary": "H5P.Scorm",
  "embedTypes": [
    "div"
  ]
}' > h5p.json

# Now Zip that all up into a compressed `.h5p` archive like this.
zip -rq ../H5P.Scorm.h5p *

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.