New H5P Interactive Code Content Type

I made my first H5P content type called Interactive Code. I’m pretty excited! The extension allows editable programming code to be displayed. Many programming languages including Javascript, Python, Ruby, PHP, C++ and even SQL are supported and no server-side libraries are required. I think the new content type has the power to truly transform computer science education. Imagine being able to embed scaffolded programming code with auto-grading and feedback capability in WordPress, Drupal, as well as any LMS via LTI — H5P, already has a really broad and diverse reach.

The Interactive Code H5P content type in action with Python and Javascript on the same page.

Making a H5P Content Type is very easy

Actually much easier than I thought it would be. I just followed the developer guide, setup a local docker environment to run Drupal, enabled dynamic content type loading and reverse engineered the “Hello World” Greeting Card Example. The code for the Interactive Code content type is available: https://github.com/aneesha/h5p-interactivecode

The following 3 files are required by an H5P content type:

• library.json
  Define Metadata for the project and additional css and javascript files to include.
• semantics.json
  In pure json define the add/edit form. Many form elements are available and make it incredibly easy to make add/edit forms for content types.

Add/Editing the Interactive Code H5P Content Type

Klipse does the Heavy Lifting

All the Interactive Code H5P content type does is embed functionality already available in the amazing Klipse plugin. Klipse adds interactive coding to blog posts and websites.

What’s Next

Support for providing feedback and auto-grading are coming soon.