Creating an H5P-powered custom web application

Submitted by GokulNC on Thu, 07/30/2020 - 14:05
Forums: 
Developers

We are planning to develop an open-source quiz system using H5P.
We have some queries regarding this to get started:

W are planning to use H5P to serve quiz content (of various types) from our backend to a student on browser (based on the current logged-in user's choices).

  • Rendering is not an issue, since based on user's perferences, we can just render/serve the H5P components via embeddable links
  • But how do we get the responses like answers back? Is there an API?
  • I saw an option for LTI endpoint. But I don't get what's the format, or if it's a web-hook or API, or how to configure its flow.
  • Is there any open-source libraries that can consume/use the LTI endpoint? Because we will require to store the student responses on our own DB.

Basically, this is a simple high-level flow we're targeting:
1. Web App -> Authentication
2. Students selects a subject for quiz
3. Backend (H5P powered) provides the frontend with relevant questions (via embeddable links)
4. Send responses to backend for each question, where we will save the responses to our DB

Any pointers/suggestions is highly appreciable :)

Thanks for your time.

Edit:
I came across xAPI, through which we can hook H5P's events and probably use that to fire requests to backend.
Is that the way to go?

otacke's picture

otacke

Thu, 07/30/2020 - 18:32

Hi GokulNC!

Yes, xAPI is the way to go.

LTI support is a premium feature of H5P.com and not open source software.

Best,

Oliver 

GokulNC

Fri, 07/31/2020 - 07:46

I understand that H5P core is implemented here: https://github.com/h5p/h5p-php-library
And the editor is implemented here: https://github.com/h5p/h5p-editor-php-library

But how do I install them together to setup the whole system? (without any LMS like Wordpress/Drupal)

I came across an unofficial NodeJS implementation of the above 2 repos:
https://github.com/Lumieducation/H5P-Nodejs-library
I am able to install that implementation and it's working end-to-end with both H5P server and editor.

How do I achieve the same using the official repos mentioned above?

otacke's picture

otacke

Fri, 07/31/2020 - 18:24

Lumi is a) using ports of the core and of the editor to node.js and a custom platform built around these. You can't just install the core and the editor. They need a space to live in. https://h5p.org/creating-your-own-h5p-plugin

GokulNC

Sat, 08/01/2020 - 07:40

Cool, thanks a lot!

serettig's picture

serettig

Wed, 08/05/2020 - 12:03

Hi GokulNC,

creating a custom implementation for the official PHP version of H5P is pretty complex. While it is certainly possile, I find the documentation a bit lacking and there are areas where you'll have to look at the source code of the editor and core repository to discover what is going on. The editor and the core are also pretty tightly coupled in my opinion, so you'll have to jump between these repositories a lot to follow code execution trails. It is also necessary to look at existing implementations, e.g. the moodle implementation to understand how and when the methods of the editor and the core are actually called, as this is something that must be done by the implementation. The h5p-nodejs-library includes some notes in the GitHub Wiki, where I've noted down a few obersvations while looking through the code of the PHP implementation.

I've recently come to the conclusion that the whole approach of writing "implementations" for various platforms might not be a good architecture in 2020 anymore. I think it would be better to have a standalone H5P microservice that offers a REST endpoint and a two web components, one for displaying content and the other for diplaying the editor. This would drastically simplify adding H5P to existing applications and ease the development of new ones. I'll attempt to get a prototype of how this might look like this summer... It will be based on h5p-nodejs-library, so it will be "unofficial".

jmansoor

Tue, 08/17/2021 - 22:51

I'm looking for the same solution. if you can help us on paid consultancy please reply me