.Net implementation integrated into an LMS

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?

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:

<ul>

<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.

</ul>

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:

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.

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",
"mainLibrary":"H5P.InteractiveVideo",
"embedTypes":["div"],
"preloadedDependencies":[
{"machineName":"H5P.InteractiveVideo","majorVersion":"1","minorVersion":"17"},
{"machineName":"H5P.Summary","majorVersion":"1","minorVersion":"8"},
{"machineName":"FontAwesome","majorVersion":"4","minorVersion":"5"},
{"machineName":"H5P.JoubelUI","majorVersion":"1","minorVersion":"3"},
{"machineName":"H5P.Transition","majorVersion":"1","minorVersion":"0"},
{"machineName":"Drop","majorVersion":"1","minorVersion":"0"},
{"machineName":"Tether","majorVersion":"1","minorVersion":"0"},
{"machineName":"H5P.FontIcons","majorVersion":"1","minorVersion":"0"},
{"machineName":"H5P.Question","majorVersion":"1","minorVersion":"3"},
{"machineName":"H5P.Text","majorVersion":"1","minorVersion":"1"},
{"machineName":"H5P.Image","majorVersion":"1","minorVersion":"0"},
{"machineName":"H5P.MultiChoice","majorVersion":"1","minorVersion":"10"},
{"machineName":"EmbeddedJS","majorVersion":"1","minorVersion":"0"},
{"machineName":"H5P.Blanks","majorVersion":"1","minorVersion":"8"},
{"machineName":"H5P.TextUtilities","majorVersion":"1","minorVersion":"0"},
{"machineName":"H5P.AdvancedText","majorVersion":"1","minorVersion":"1"},
{"machineName":"H5P.DragQuestion","majorVersion":"1","minorVersion":"11"},
{"machineName":"jQuery.ui","majorVersion":"1","minorVersion":"10"},
{"machineName":"H5P.MarkTheWords","majorVersion":"1","minorVersion":"7"},
{"machineName":"H5P.Video","majorVersion":"1","minorVersion":"3"},
{"machineName":"flowplayer","majorVersion":"1","minorVersion":"0"},
{"machineName":"H5P.DragNBar","majorVersion":"1","minorVersion":"4"},
{"machineName":"H5P.DragNDrop","majorVersion":"1","minorVersion":"1"},
{"machineName":"H5P.DragNResize","majorVersion":"1","minorVersion":"2"}
]
}

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?

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. 

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)?

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?

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?

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

--H5PEditor.Wizard

--H5PEditor.InteractiveVideo

---FontAwesome

---H5P.DragNBar

---H5P.Image

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

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] !)?