Supporting and linking to arbitrary embedded files?

usernamenumber's picture

The really short version:
Suppose I have automatically generated a CoursePresentation with slides that get their content from HTML imported from elsewhere. This HTML may contain links to local files, like documents for download. Assuming I've copied all of those files into the CoursePresentation's content/files/ dir, is there an easy way, like a CSS class I can set, for example, for me to tell H5P to just prepend the appropriate contentUrl to a link's target? For details on why I'm trying to do this, read on...

The rather long version:
I am working on a tool to convert Moodle content to H5P. It's functionality is very limited for now, just supporting the page, label, and basic quiz Moodle content types. At least for a first pass (I am under a deadline and need to get support for some basic functionality into place ASAP), I want to convert each Moodle section into a CoursePresentation (or a derived custom content type), where each Moodle activity in the section becomes a slide in the CoursePresentation. 

For Moodle's Page and Label types, which are basically just chunks of HTML, the "right way" is at least arguably to convert each one to a properly laid out AdvancedText slide, but I don't have time for that on this iteration, and anyway the Moodle content contains things like links to downloadable documents that don't seem to have corresponding content types in H5P (though example in the documentation for the `file` type in the semantics guide seems to hint otherwise?) so I'm simply taking the HTML from the Moodle content and adding it verbatim as the AdvancedText's `content` property. This is a quick and dirty hack, but it works except for one problem: linking to the embedded files.

In Moodle, files can be uploaded into the module and can then be linked to like any other local file. As part of the conversion process, I'm copying all of the Moodle embedded files into `content/files/` in the H5P directory, but of course the problem is with linking to them. It's impossible to tell what the URL of the embedded file will be until it's being viewed on the H5P host, so it seems to me I'll need to do something like:

  1. Create a custom content type, maybe based on AdvancedText, called, say, `AdvancedHTML`.
  2. Add `AdvancedHTML` to the list of supported content types in `H5P.CoursePresentation/semantics.json`.
  3. Have my converter set the target of any href or src properties that point to local files to `files/filename.ext`, and maybe also add a `local_content_link` CSS class.
  4. Have the `attach()` function in `H5P. AdvancedHTML/AdvancedHTML.js` prepend all relative URLs (or anything with .local_content_link?) with the result of H5P.getPath(relative_url,id)

Of course, there would only be limited editability from within the H5P editor for now (based on my experiments, you would at least be able to tweak wording and whatnot, you just couldn't upload files or modify URL targets), but that functionality could be added in future revisions. For now it's not a high priority for me, since the content will all be generated by the converter, and anyway, the best way to do this is still at least arguably to figure out how to convert the HTML in Moodle into a properly laid out H5P slide, but I just don't have time for that right now. 

So, does anyone have any advice for doing what I'm trying to do (short version: make it easy to identify links in a slide's content that should be automatically prepended with the content url)? 



falcon's picture

Sounds like a cool project. Thank you for sharing!

Short answer: There are no easy magical way of doing this afaik.

Longer answer:

You are importing HTML with relative urls, and the relative urls doesn't work after import, right? If the files you link to are part of the H5P, i.e. can be deleted if the H5P is deleted they should probably go into that H5Ps content folder as suggested. If not they should go into Drupal's or WordPress's files folder.

If they are part of the H5P the links should get a class by the adapter and should probably be on the form files/filename or something, and you have a javascript that prepends the path to that H5Ps content folder (i.e. #1 - #4 in your post above, or at least attach a script that fixes the links on all a tags with the class from the converter)

If they are in the generic files folder the converter should fix the links to point to that folder.

So not much help from me here really, but I think you're on the right track!

A more proper way could perhaps be creating an H5P file content type, but it seems you don't have time for the most proper ways.