Utility Libraries and Embedded H5P

Submitted by AdamKingSheilds on Wed, 11/02/2016 - 17:14
Forums: 
General discussion

Hey there,

I'm attempting to create a utility library on Wordpress that will be used to simply take the text, displayed onclick of a 'h5p-advancedtext-button', and allow it to be printed on or under the slides (of a CoursePresentation) when using the print functionality; though this is my first library for H5P and I'm fairly stumped how to make a specific H5P (or even all) use this library, when uploaded it simply does nothing. It's not set as runnable as I don't want to use it as a content type and I'm making sure to update the patch version every time I try a new version.

Right now I've simply got the 'mylib.js' example in there with "mylib" replaced with "PrintInfo".
Is there anywhere I'm not looking that would allow me to instruct a H5P to use a specific library?

Thanks in advance.

Regards,
Adam King

H5P file: 
Binary Data H5P.PrintInfo.h5p
timothylim23's picture

timothylim23

Thu, 11/03/2016 - 08:35

 Hi Adam,

thanks for the great question. Unfortunately the documentation is a bit lacking for now but I'll do my best to answer.

To instruct a H5P to use a specific library you would have to create that library and then set it as a dependency in the library.json file in the H5P. A simple example of this would be the library file in H5P summary. The library.json file specifies that a utility library called H5P Question is needed. You can look at H5P Question to see how it is used. 

The first step I would do is to make a utility library and test to see if it is called by printing a console log to the browser. 

Do let me know if you need any more help.

Cheers,

Tim

AdamKingSheilds

Thu, 11/03/2016 - 16:57

Hey Tim, 

Thanks for the response, this does make a lot of sense and I've added my library to the H5P.CoursePresentation dependencies as shown in the Summary library.json though despite there being 37 H5P instances that use H5P.CoursePresentation, my library has no counts of "Contents using it" on the Library Admin page (on WP) .

I'm writing the attach method as a prototype of the class and I've written the class as an anonymous self-executing function but as far as I can tell, the convention is to name your 'constructor' based on the name of the library. I'll throw the code in a hastebin for you but it's only attempting to console.log and clear/set the HMTL of the container (http://hastebin.com/ediniyijal.php)


Thanks for the help, I generally have no issues with programming but as you say, the documentation is a little thin..

 

Update: I managed to update the library.json by uploading a new H5P.CoursePresentation.h5p I'd packed but I had to increase the version number, although if the next official release of CoursePresentation comes out, surely upgrading will be an issue.. I can't very well roll back what I've done by the looks of it or delete the CoursePresentation library (as those 37 instances of H5P depend on it). May have just made matters worse by fixing one issue here. On top of that, the code I wrote in the above HasteBin didn't trigger at all. 

timothylim23's picture

timothylim23

Wed, 11/09/2016 - 09:28

Hi Adam,

I've asked some other people in the Core Team about what is the best way forward and I think there are two main ways you could go about adding additional functionality to Course Presentation:

1. Create a hook. If you are mainly moving dom elements around and don't need such tight integration with the H5P content type, you can try and create a hook to execute the logic automatically. You will still be able to call each content type's API (https://h5p.org/documentation/for-developers/contracts-and-addons).

2. Make a Pull Request. If your utility library is something you think many others will find useful you coud submit a pull request and the Core Team will consider it making it part of the codebase and updating Course Presentation with it.