how do I edit this library?

Submitted by rorpok on Wed, 01/02/2019 - 14:35
Forums: 
Developers
Hello I want to modify a drag-drop-question library (https://github.com/h5p/h5p-drag-question), for example, I wish that when all draggables are correctly positioned the questionnaire ends, without having to click on "check". The library files are minified, different from the repository files, how do I edit this library?
serettig's picture

serettig

Wed, 01/02/2019 - 17:52

As you can see in the package.json file, the production version of this specifc library is built with webpack. So, you need npm to build the library and get webpack and babel (Babel cross-compiles the very modern EcmaScript of the library to a version of JavaScript that actually works in current browsers). Run 

npm install

and then

npm build

at the command line to produce the minified compiled version of the source code of the repository. 

The steps for changing the library thus are:

  1. Fork the repository
  2. Clone your forked repository
  3. npm install
  4. Modify the library
  5. npm build
  6. Depending on where you've cloned the library and whether the built files are in the correct directory, you'll have to copy the minified files and the metadata (library.json and semantics.json mostly) to a folder in the development directory of your test content management system (Drupal 7 is recommended).
  7. Test your library and repeat Steps 4-7 as often as needed.

Sebastian

rorpok

Fri, 01/04/2019 - 18:35

Many thanks for your response, it was a great help. <br/> I use Wordpress, how can I do to test my work in this CMS?

rorpok

Fri, 01/04/2019 - 20:34

Thank you for your response, it was very helpful!

I performed the library build and the `h5p-drag-question.js` file was generated as expected.

My question now is what do I need to do now to generate the package and run the library?

obs. I'm working with wordpress.

serettig's picture

serettig

Sat, 01/05/2019 - 13:50

To debug and develop your library it is best if you put the H5P module into development mode. Then you can put your h5p-drag-question folder with the JavaScript file, library.json and semantics.json into the 'development' folder on the server. Your CMS will then reload the library every time you create a new piece of content and doesn't cache the libraries, so you don't have to clear the cache every time you make a change. I don't know if WordPress has a development mode. It is recommended to develop libraries with Drupal 7. You can still later upload your file into WordPress without any problem.

You also need to have downloaded all the libraries h5p-drag-question depends on into either the 'development' folder or the 'libraries' folder. The easiest way to get started is to simply upload a standard h5p package of h5p-drag-questions into the development environment, which will install the required dependencies. Simply delete the h5p-drag-questions folder in 'libraries' and copy in your changes version into the 'development' folder.

Once you've tested your library in your development environment, you can download a packed h5p file by clicking on 'download' in the normal view of the content (as you would download any h5p package). This package can then be uploaded to any server for which you have the rights to upload new packages.

It is theoretically also possible to create h5p packges with the h5p-cli tool. Sadly, the tool is outdated I haven't really had much success using it. It also requires you to write the content.json files by hand which isn't much fun. So I would recommend uploading your library into the 'development' folder.

If you need help setting up a Drupal 7 development environment you can check out the guide here. There is also some help for developers in the h5p main site here. I personally have switched to using Docker in my development environment, because you don't have to deal with setting up a whole new webserver by hand. You can read instructions about this here.

Sebastian

rorpok

Sat, 01/05/2019 - 15:12

Thank you very much for your great help Sebastian, it was very useful for me.

bpareek

Wed, 03/06/2019 - 13:13

Sorry for hijacking the conversation but i have some doubts regarding the same topic.

Step 1: I created a new library and uploaded it on Moodle, then i created multiple h5p activities using the new content type/library.

Step 2: I made some new updates in my content type and generated a new h5p file.

Now how to update the library i uploaded to Moodle in Step 1?

 

And will it also update the activities i created?

serettig's picture

serettig

Wed, 03/06/2019 - 21:27

I don‘t have access to our moodle admin interface from where I am (in-laws), but there is a library management page somewhere in the H5P plugin settings. There you can see a list of the currently installed libraries and you can also upload H5P files to install new libraries. Just drag any H5P file with the new library into the dropzone provided on the page. Updating content is done on the same page, I think. Be aware that if your update includes changes to semantics.json you might have to write your own data migration routines!

You can also simply upload the H5P package with the new version with an admin account and moodle should ask you whether you want to install the new library. 

It‘s very important that you increase the version of your library in library.json so that the systems knows there is a new version.

Sebastian