.Net implementation integrated into an LMS



I work for Rediteq (http://rediteq.fi/en/) and we are hoping to integrate H5P into our LMS because it sounds like a perfect fit for our customers. The technology stack we are using is C#.Net (MVC) with SQL Server on the backend. I have been going through the available documentation and implementations for other technologies, but it has been fairly hard going to discern what is relevant or where to start. Our intention is to release our H5P implementation to the public, once we get it working, although it won't be as complete a "plugin model" as for example the Wordpress plugin. Probably better consider it as a starting point from which other .Net developers could begin their own implementations.

So, to begin with I would have a few questions:

Among the documentation are comments like "We will make available documentation and tutorials for creating platform integrations in the future." Is there an estimate or roadmap of when this kind of documentation would be produced?

If I've understood correctly, I can take the static resources (.js, .css, images, etc.) from https://github.com/h5p/h5p-php-library ? Can the .js and .css be packaged together and served to pages as two files?

From the above mentioned repo, I would then need to replace the php files with new .Net implementations. The trouble I am having is identifying what are the public ajax end points that need to be implemented (Controller methods for the .Net MVC term)

And lastly, for this round of questions, is the H5P content adding functionality (https://h5p.org/documentation/setup/wordpress under Install content types) something that is a part of Wordpress, implemented in the php or the javascript? If its either of the last two, are there examples of how this is included on a page?


Thank you in advance for any help.

- Miika

falcon's picture

Hi Miika,

I'm glad to hear that you're considering to create and share a .net port of H5P. I think starting out by porting the PHP library makes a lot of sense. I'm sure you've also seen the editor library if you want editing capabilities, and also the reporting library for reports.

Regarding js and CSS the files in that library are used different places and in different frames IIRC so merging them all together does not make sense. h5p-library-details.js, for instance, is only used in the library details page in library administration and not when an H5P is being viewed or edited. The same goes for the CSS files. I think the files should be served and aggregated by the CMS/LMS when they are needed. We plan to create separate repos for the JS and CSS for the platform integrations so that the PHP library will have a submodule for the js and css.

In terms of public endpoints it will be more clear if you look at how Drupal uses that class, but still, it will take a lot of effort. We have the same problem with making clear what API the PHP library offers to the CMS/LMS using it. We will make this more clear both with documentation and code changes, but H5P core is still under very active development and we haven't been able to prioritize it yet.

I'm not sure about the last question, but I think it is regarding the H5P Hub? As much as possible of it is in JavaScript, but there is also a PHP part handling the actual installation and communication with H5P.org. I haven't worked on it myself, but it seems Drupal is spinning up the hub here.

Making a port for .net at this moment will involve you having to do a lot of digging. If possible you could fund a documentation effort prior to you starting to work on this. If no I suggest you look at the plugin for the CMS/LMS you're most familiar with to get the full picture, and you could also join the core team's slack channel if you're interested in getting small questions answered quickly as you move along.

Hello again,

My efforts in the spring to interpret the WordPress plugin did not bear much fruit, but I have now had time to look at the Drupal implementation, and that seems much easier to understand. I would have some follow-up questions before I invest more time though.

- You said " We will make this more clear both with documentation and code changes", with regard to ajax end points and interfaces. Has there been any progress on this documentation?

- The page https://h5p.org/creating-your-own-h5p-plugin says "The APIs provided by these two libraries has not been documented yet. We're planning to simplify the a lot." This makes me a little hesitant to invest too much time in converting the Drupal implementation, if it might change entirely in the near future. So my question is, how stable/final a version is the current Drupal implementation? Is it worth using it as a base for conversion? Or is there a schedule in place for when these simpler interfaces will be implemented?

falcon's picture


I think I'll have to answer this with some good and some bad news:

The good:

  • This will probably not happen anytime soon: "The APIs provided by these two libraries has not been documented yet. We're planning to simplify them a lot." 

The bad:

  • This will probably not happen anytime soon either: "We will make this more clear both with documentation and code changes"

The reason is that we prioritize other things next year like UX improvements, H5P Content Hub(without a big rewrite of core) and in-place editing. 

nategz's picture

Hi Miika,

I'm also interested in porting h5p in .net and I would like to help you guys. I'm currently working in a company the specializes in learning management system. I would like to know what is your current status on porting h5p and if you could share it so we can move forward together.



Thank you.


So far its not progressing all that well. I have to admit this feels a bit like trying to build a car by watching someone drive one. The documentation given here (https://h5p.org/creating-your-own-h5p-plugin) seems simple on the surface. I have the files associated with this example (https://h5p.org/arithmetic-quiz) located on the server, accessible from the addresses specified by the documentation. But the two initializing javascript in the documentation are flawed and don't describe what each section does, so I can't tell how much needs to be written into the page and how much is handled by the server side interface. They also don't seem to match very well with the source code of the page in this example (https://h5p.org/arithmetic-quiz), which makes cursory reference to a Content, but then just seems to link only to one Library?

Is a Content a collection of libraries into a whole task, or is a content just the start parameters for a top level Library? Are you supposed to include all the resource files on the page yourself, or does the H5P backend provide the H5P javascript a list of files that it then downloads if they haven't been downloaded yet?

Trying to work out the API from the bottom up seems very challenging because its very hard to tell what is required by the API, what is specific to that particular implementation, and what is actually required for a minimum working starting point. So I have now tried to approach this problem from the front-end down. I have used as an example the source code from https://h5p.org/arithmetic-quiz . So far I have the following:


<li>H5P basic js and css files are added to page, and jQuery is linked into H5P.jQuery

<li>Dynamically opened section can have either H5P div or H5P iframe wrapper with iframe.

<li>H5P init javascript call (detailed here https://h5p.org/creating-your-own-h5p-plugin) is called, with values taken from the arithmetic sample source code.


I was hoping this would start the process of displaying the content, fail to load additional content (which I could then fix), and make some calls to the server side API (which I could then implement), but nothing happens. No errors or additional calls, nothing to grab on to and follow up. By the time the H5PIntegration.contents is added, are you already supposed to have the content scripts and files loaded on to the page, or what? Any advice on how I could continue from here?

Making a call to H5P.init(<targetObject>) seems to be the next step. If the target object is "<div class="h5p-content" data-content-id="1"></div>", then nothing happens. If the target is the iframewrapper, then it appears to load the files listed in the styles and scripts of the content object (into the iframe I assume?), but then fails with the following errors:

TypeError: H5P.jQuery is not a function[Learn More] v-20180116151538h5pbundle.js:1:70


TypeError: H5P.EventDispatcher is undefined[Learn More] The scripts loaded into the iframe need to include everything needed? Would the div content object require less reloading of scripts?
icc's picture

The view/frontend should be pretty simple; the correct JavaScripts and Stylesheets have the loaded, the H5PIntegration object has to be included to provide the content and settings, and the HTML tag for where the content is inserted must be present.

Getting some content to show shouldn't be too difficult, but I would recommend starting with porting the h5p-php-library to see how all the dependencies are built. Debugging through the WordPress or Drupal plugin when creating content is a nice way of understanding how it all comes together.

I have now started making some headway with this, by approaching it from a top-down direction of development. In essence, get the H5P content to show on the page, and then start looking at what fails and implement the fail-points one at a time. This way, for me at least, is far easier to handle than trying to convert all of the phpLibrary before seeing anything. Some important things that could be mentioned on the Platform Integration page (https://h5p.org/creating-your-own-h5p-plugin) are:

- Script and css resources must be included on the page before H5P.init() call (I had the impression that the H5P library would request these scripts based on the parameters and addresses given).

- Use H5P.init($h5pTargetDiv) to start the H5P content (this isn't mentioned at all in the docs)

- The order of the resources in the cache packages matters, and can cause failures if not correct. The way I am doing it now is going through the dependencies in the content's h5p.json in reverse order and adding the preloaded depencies of each library in order. This can be figured out but could be explicitly defined on the platform integration page.

- When loading the scripts and css to the page, make sure they have finished loading before calling H5P.init(). (for example if you use document.createElement('script') to add the .js cache package to the page, you can use scriptObject.onLoad = h5pInitMethod to force it to wait.


Despite my complaints in this thread, I am really liking the H5P potential, and I hope some of what I have written here can help other developers. With our current development schedule, we might be able to release some kind of open solution/package on github for a .Net implementation by summer 2018.

icc's picture

That is good to hear. Thank you for sharing your experience so that it may be used by others and to update the documentation.

Hello again,

As I mentioned previously I have made a lot of progress in the display of H5P tasks, but the biggest stumbling block currently is how to construct the javascript cache files. As an example we can use this task: https://h5p.org/interactive-video  . It has the following h5p.json data

"title":"Interactive Video","language":"und",


My process so far (which has worked for some other content types) is to go through the preloadedDependencies in reverse order, and add the dependencies listed in that library in order to the .js cache file. However, for the interactive video content type this doesn't work, it has all kinds of javascript errors. Some of these can be fixed by moving sections of the cache file around, but obviously this is very time intensive, and then the next problem popped up. If I use the .js cache file from the example linked above, then it also works in my environment. But this sample file has a content order that is very hard to decipher. 

Could someone explain to me how to determine the dependency cache file order?

icc's picture

The dependencies should be included/loaded in the order they appear in, and dependencies must be loaded/included before the library that depends on it – if not it will crash.

Hello again,

The .Net port continues, now tackling the editor. Had a bit of trouble finding how to prep and launch the editor because of the complete lack of documentation ;), but have now managed to get it working. For some reason though there is an error message on some parts with a message of "Missing translations for library core", which I am having trouble fixing. Including a picture of the ArithmeticQuiz editor, which shows this.

On the page, I am including editor language file (language/en.js or language/fi.js), as well as the library language file if necessary. I tried having a look through the semantics file of the library, but I couldn't identify which part was missing as the UI group section begins like this:

    "name": "UI",
    "type": "group",
    "label": "User interface translations",
    "importance": "low",
    "common": true,
    "fields": [


Some help on this would be appreciated. Thank you in advance. 

thomasmars's picture

Hi, the order of when the language is loaded matters.
Make sure that the correct language file is loaded before the H5P editor is loaded.
The english text should be loaded (fallback to) if the currently selected language of the user is not found.

You can see how this is done in Wordpress: https://github.com/h5p/h5p-wordpress-plugin/blob/master/admin/class-h5p-content-admin.php#L978-L983.

Hi Thomas,

I have exactly that, as far as I can determine. The page has the following operations in order

- Initialise the window.H5PIntegration object.

- load the h5p js (bundled)

- load the h5p editor js (bundled)

- load the h5p editor language js file (either en.js or fi.js)

- (...) later on the page, once the user activates it, the editor is launched with H5PEditor.init().


Is there any way to determine what texts it is trying to find for the parts missing in the image I linked? Just to make sure they exist in the translation file?

thomasmars's picture

This looks correct. You can log out the key in the ns.t() function in h5peditor-editor.js to find the key that is being looked up, then check if it exists in your currently loaded language file by checking the ns.language['core'] object through your developer tools. It seems like language files are not loaded properly before the translation function runs.

Thanks Thomas, thats a good tip. I will be able to get back to working on the editor next week, so will try that out.

EDIT: The problem was that I was loading the language file on the mainpage, but for some reason it was not copied to the iframe. Adding the language file to the H5PIntegration.editor.assets.js list solved the problem.

Hello again,

The H5P .Net conversion continues, with the editor now working very well. The next step is to handle user answers, statistics and xAPI messages. From the .js files I have found the setFinished and contentUserData ajax calls and begun creating handlers for these. They seem straightforward enough. My understanding is that these should be saved into the local database/server, and the xAPI messages are considered to be just one way traffic for reporting purposes?

What I do have questions about though is the xAPI. From the code, it appears that these are just triggered as javascript events, but there are no associated handlers or ajax calls with the H5P .js files. Is the intention that the implementor is responsible for catching and handling the xAPI javascript events and propagating them to the LRS of their choice, either in javascript or via the server? Was there a setting which activates the xAPI events (like postUserStatistics is for the ajax calls)?

tim's picture

Yes, your assumption is correct. H5P intentionally leaves the handling of the xAPI events to the platform in question. 

There isn't a particular setting that activates the xAPI events, they are triggered all the time. 

Another update on the .Net implementation project. Results are being saved to the database, and xAPI statements successfully passed onwards to Grassblade's demo server. Next I plan to broaden the range of content types to try uncover any hidden problems. Most seem to work right out of the box, but there are some issues still with the Interactive Video.

I have a question about the contentUserData though. So far it seems like all user answers are to be stored as xAPI in the LRS, so what is contentUserData used for? Is it supposed to be saved in the local database or the LRS? What would be an example of a content type that does this so I could test it?

otacke's picture

Hi Miika!

Thanks for your update. Sounds great!

The contentUserData is intended for storing the state of the content in general, which can include the students' answers, but also e.g. the slider position/timecode of a video or the text writen in H5P Essay. AFAIR, they will be saved in certain intervals that can be defined in the settings and whenever an xAPI statement is fired. They will will then be restored when the content is loaded again (and "save content state" was activated in the settings). Those data are stored locally, not in al LRS.

At least all the possible subcontents of Interactive Video should be able to save/restore the user data, e.g. Multiple Choice.


My next target is broadening the number of content types that our system supports. The Interactive Video (https://h5p.org/interactive-video) is causing some headaches. I am attaching a file to this which is the json content returned when the editor requests the library. It includes the semantics, language, css and javascript needed by the editor. However, when the editor tries to load this content into the iframe, it produces a very helpful javascript error of "SyntaxError: unexpected token: identifier". I have compared this package to that produced by the editor on the h5p page, and it appears to include all of the same scripts, but the order is different, so that could be the problem.

The logic I use for constructing the order of the scripts is as follows (writing it as pseudocode rather than in a particular language). This works fine for many other content types, but not for Interactive Video. Would someone be able to have a look at the logic below of the semantics package file to see what the problem might be?

var libraryJson = readLibraryJson(<target library library.json>);
var dependencies = {};

foreach (var library in libraryJson.editorDependencies)
    findDependencies(library, dependencies);

function findDependencies(library, dependencies) {
    // Check if this library is already included in the dependencies, if so return out of it.
    // Load the details in this library
    var libraryJson = readLibraryJson(<library.json>);
    foreach (var editorDependency in libraryJson)
        findDependencies(editorDependency, dependencies)
    foreach (var preloadDependency in libraryJson)
        findDependencies(preloadDependency, dependencies)

    // Add the preload dependencies defined in this library
    foreach (var jsDependency in libraryJson.preloadedJs)
        dependencies.javascript.<scriptName> = jsDependency;
    foreach (var cssDependency in libraryJson.preloadedCss)
        dependencies.css.<scriptName> = cssDependency;

Addition to the previous comment, when comparing the content produced by my sight with the Interactive Video demo page, the only missing script is "/sites/all/modules/h5p_ga/h5p-ga.js?ver=0.0.1", but this is not mentioned in the library files. What is this script? Is it required?

icc's picture

No, that's a custom script that's not required.

It sounds like the problem is the order of the files. It's important that the files are loaded in the order they're specified in library.json and that the order of the dependencies are correctly determined here when viewing the content for the first time, and saved here. I.e. if one library or content type requires another then the requirement must be loaded first. 

As far as I am able to determine, thats what my code (detailed in the previous comment) is going. Go through dependencies first (recursion), then add the preloadJs files in order to the list. Yet the list of files produced for the Interactive video sample on the h5p page seems to be in completely different order. Maybe I need to compare the file order of that sample page to the library.json to see if I can understand how it arrived at that ordering.


If a library has dependencies and editorDependencies, which are supposed to be loaded first?

icc's picture

Ah, yes, when loading/displaying the editor only the editorDependencies should be loaded and for the view only dependencies. Here's the code for the editor loading.

Yes, the logic that I have coded is that if opening the editor, retrieve only the editor dependencies of the top level library (but get all dependencies of subsequent libraries, because Multiple Hotspot Image content type failed without this at least), and if opening up the task for viewing, then only retrieve preload dependencies. And this works for all other content types I have tried, but not Interactive Video. However, I will have time on Monday to make a more detailed examination of the files loaded and the order they are in.

Ok, so getting back to solving the InteractiveVideo problem. In the H5P.InteractiveVideo the order of the first few files produced on your sample site (https://h5p.org/interactive-video) is the following:

/sites/default/files/h5p/libraries/H5PEditor.Wizard-1.2/Scripts/Wizard.js?ver=1.2.3"\nvar H5PEditor = H5PEdi…Step :index'\n  }\n};\n"

/sites/default/files/h5p/libraries/H5P.Image-1.0/image.js?ver=1.0.31"\nvar H5P = H5P || {};\n…age;\n}(H5P.jQuery));\n"

/sites/default/files/h5p/libraries/H5P.Table-1.1/scripts/table.js?ver=1.1.5"\nvar H5P = H5P || {};\n…').html(this.text);\n};"

/sites/default/files/h5p/libraries/H5P.Text-1.1/scripts/text.js?ver=1.1.6"\nvar H5P = H5P || {};\n….html(this.text);\n};\n"

/sites/default/files/h5p/libraries/Tether-1.0/scripts/tether.min.js?ver=1.0.2"\nvar oldTether = window…w.Tether = oldTether;\n"



If you inspect the dependencies, they start with the following order

- H5P.InteractiveVideo







So why is the image.js file included before the drag'n'drop files, when this is not the order specified in the library.json? This does not match with a depth-first search of the dependency tree. Yet the example site works, and mine doesn't

Hi MiikaLangille,

I was wondering how well you are going on with the .NET integration of H5P so far? We also have an LMS that utilizes C#.Net (MVC) and are keen to get involved.

Hi Rob,

We currently have a working end to end H5P implementation on top of C# with SQL Server at one end and .Net MVC/Javascript at the other. Most content types work perfectly (InteractiveVideo still causing trouble), results are recorded, xAPI statements are handled, and the editor is implemented also. Still to go is the import/export of content types, but that should be implemented in June. Once we have everything implemented, we need to extract the H5P implementation from our wider system and this will be released as open source. The open source release needs to be made a bit more stand-alone-ish than what we have currently. With the current development schedule, we are looking to release the code sometime at the end of summer or start of autumn.

Or then we can talk about integrating our learning environment into your platform (http://rediteq.fi/en/) :)

Hi MiikaLangille,

What you have sounds really cool, and we would definitely like to get involved with your .NET implementation for H5P.
If you don't mind, my email address is [email protected], and I would like to keep in touch with your progress and hopefully we can work together in developing and maintaining a working solution of H5P for .NET. That would be cool.

Thanks in advance,


Hi Guys,
Firstly congrats on the H5P platform… it is an excellent platform.  We have not commenced actively using it yet as we were needing to navigate the .net process in order for it to integrate with our existing bespoke LMS that we have developed.  We recently found your posting re dot.net - thank you Miika.  We have some asp.net development capability but not a lot of available time so we may be better in a testing role if that is of any use?    If you have any specific areas of need, please let us know.  What are your timeframes for a working version, including the video?



Hi everybody,

Do you have some news about the date of the release ? Is it still planned at the end of summer or start of autumn ?

If you need help, we would be very happy to help you.

Thank you in advance for your answer

Best regards, Christophe

Hello again,

So, the implementation is still progressing. I have now finished the .h5p package import function. I had earlier mentioned that I had serious issues displaying the Interactive Video package, but now that I am importing it through the automated process, it displays just fine. I don't know how it differs to what I was doing before, but at least it works now. 

I still had issues with opening the editor on the Interactive Video task, and have spent a lof of time this week trying to solve it... and the problem turned out to be in the EmbeddedJS library. The first .js file in this package doesn't have a "new line" at the end, and the second .js file doesn't have a comment or "new line" at the beginning... and because the h5peditor method libraryRequested simply does this: js += libraryData.javascript[path]; it means that js got smooshed together and caused an unexpected token identifier error, with the location hidden by the .eval command.... This was very hard to track down. 

Maybe the libraryRequested method should be changed to           js += libraryData.javascript[path] + '\n'; to avoid others having this same problem?


Next on my list is the export function, and then hopefully soon after that I will be able start working on extracting the H5P parts from our system and making it ready for open sourcing.

There have been a number of expressions of interest in this thread, and my question to you would be what are you hoping to get from our open source code? Do you just want to see how we did it so you can then make your own implementation (this is definitely possible)? Are you hoping for a complete module that you can just plug in to your own system (this is a bit beyond our scope, unless somebody is willing to sponsor the development)? Are you interested in buying some consultation to help you with your own integration (get in touch with me at [email protected] !)?


otacke's picture

Hey miika!

Good to know you're making progress!


nategz's picture

Hi Miika,

I just wanted to ask if you're able to implement the creation of new H5P question out from scratch? I mean the downloading of h5p question types functionality and calling the download package api. Thank you.

Yes, our project is able to create a H5P question from scratch for all libraries loaded into the system.

You say that your code is opensource, where can I find it?

Hello Miika trying to connect with you for the consultation of how to integrate h5p in my .net project but not able to connect on the given rediteq account..can we connect on gmail 



We had some trouble with our mail server last week with the Exchange security update, but it should work now if you try again. Or then try [email protected] for my alternate address.


No..I amnot able to connect to you on rediteq address ..can you please provide your skype Id


I don't understand what you mean. [email protected] is just a gmail address. Or do you mean you are trying to connect to it through Hangouts/Meets or some other way? Please just send an email to begin with.

nategz's picture

Hi Miika, 

I just wanted to ask if your team are able to copy the process of updating your on-premise's libraries like downloading an h5p packages on demand?

Thank you,


Yes, our project is able to accept new .h5p packages and use it to update the libraries in our system.

Hi mikah,'

I am not able to connect with you since yesterday on your given address..please give some other alternative address on which i can connect with you soon.

It might be easier if you tell me your email address and I can contact you?

I am not able to connect to you mikaa on the given account for consultation on dot net integration


Hi everyone,

Miika if you don't mind me asking, how long did it take you to do the .NET MVC integration? I've been tasked with converting the editor into .NET core 2. 

Also if anyone is also currently working on a .NET core implementation I would be happy to collaborate!



Hi Kim,

The whole implementation took a few months, but spread out over a longer time because of simultaneously working on other projects too. You may be able to use some of my comments in this thread to skip a few hurdles along the way. If you know php, you may be able to do a more bottom->top conversion, but in the end I found it easiest to approach it from a top->down perspective. i.e. Plug in the javascript, see what calls it makes and implement those, see what breaks next. The server side stuff is not very complicated once you have the file serving and bundling under control. 

Good luck with your project, and like I mentioned in a previous post we are looking to open our implementation soon^tm but are also available for consultation in the mean time.




Thanks Miika,

The last couple of days I've been going through the libraries and looking at the WordPress plugin to try to understand how it all comes together. But there are too many pieces to have to hold in one's head in order to understand how it works, and a bottom up approach looks impossible. So I am following your approach and plugging in the javascript and seeing what breaks in order to port the editor.

Thanks for your help!