H5P

https://h5p.org/documentation
Admin
H5P is an open-source framework for creating, sharing, and reusing rich HTML5 content and...
Tokens:73,208
Snippets:755
Trust Score:10
Update:9 months ago
Show doc for...
Tokens:
Raw
### H5P Hook Functionality Example (GitHub)

Source: https://h5p.org/documentation/for-developers/visual-changes_page=1

This entry refers to an external GitHub repository providing example code for developing H5P hook functionality. It's intended to help developers understand and implement custom hooks, potentially for extending H5P's capabilities or integrating it with other systems.

```git
git clone <repository_url>
cd <repository_directory>
# Follow instructions within the repository to integrate with your modules.
```

--------------------------------

### Install H5P Command Line Interface (CLI)

Source: https://h5p.org/documentation/api/index

Installs the H5P Command Line Interface globally using npm. This tool is used for managing H5P content and libraries.

```bash
npm install -g h5p
```

--------------------------------

### H5P Example Library: library.json

Source: https://h5p.org/documentation/api/index

Configuration file for the H5P 'MyLib' library. It includes metadata such as title, machine name, version, and specifies preloaded JavaScript files.

```json
{
  "title": "My Lib",
  "machineName": "MyLib",
  "majorVersion": 1,
  "minorVersion": 0,
  "patchVersion": 0,
  "runnable": 1,
  "preloadedJs": [
    {"path": "mylib.js"}
  ]
}
```

--------------------------------

### H5P Example Library: mylib.js

Source: https://h5p.org/documentation/api/index

Defines a simple H5P library named 'MyLib' using JavaScript. It includes an 'attach' method to render content within a container, expecting a 'name' parameter.

```javascript
H5P.MyLib = (function ($) {

  /**
   * @class H5P.MyLib
   * @param {Object} params
   */
  function MyLib(params) {
    var $wrapper;

    this.attach = function ($container) {
      if ($wrapper === undefined) {
        $wrapper = $('<div/>', {
          html: 'Hello ' + params.name
        });
      }

      $container.html('').addClass('h5p-mylib').append($wrapper);
    };
  }

  return MyLib;
})(H5P.jQuery);
```

--------------------------------

### JavaScript Example of H5P Upgrade Script

Source: https://h5p.org/documentation/developers/content-upgrade

An example of an H5P upgrade script written in JavaScript for the 'H5P.Summary' library. It demonstrates how to add a content upgrade function for version 1.1 to wrap existing summaries, ensuring compatibility with new features.

```javascript
var H5PUpgrades = H5PUpgrades || {};
H5PUpgrades['H5P.Summary'] = (function ($) {
  return {
    1: {
      1: function (parameters, finished) {
        // Wrap summaries to allow tip.
        for (var i = 0; i < parameters.summaries.length; i++) {
          parameters.summaries[i] = {
            summary: parameters.summaries[i]
          };
        }
        finished(null, parameters);
      }
    }
  };
})(H5P.jQuery);
```

--------------------------------

### Configure 'Started' Field Display in H5P

Source: https://h5p.org/documentation/setup/drupal8

Configures the display of the 'started' field from the 'h5p_points' table within the H5P project. It specifies the relationship to the H5P content ID and includes general alteration settings similar to other fields.

```json
{
  "id": "started",
  "table": "h5p_points",
  "field": "started",
  "relationship": "field_h5p_h5p_content_id",
  "group_type": "group",
  "admin_label": "",
  "label": "Started",
  "exclude": false,
  "alter": {
    "alter_text": false,
    "text": "",
    "make_link": false,
    "path": "",
    "absolute": false,
    "external": false,
    "replace_spaces": false,
    "path_case": "none",
    "trim_whitespace": false,
    "alt": "",
    "rel": "",
    "link_class": "",
    "prefix": "",
    "suffix": "",
    "target": "",
    "nl2br": false,
    "max_length": 0,
    "word_boundary": true,
    "ellipsis": true,
    "more_link": false,
    "more_link_text": "",
    "more_link_path": "",
    "strip_tags": false,
    "trim": false,
    "preserve_tags": "",
    "html": false,
    "element_type": "",
    "element_class": "",
    "element_label_type": "",
    "element_label_class": "",
    "element_label_colon": true
  }
}
```

--------------------------------

### Create H5P Language File with H5PCLI

Source: https://h5p.org/documentation/for-developers/translate-h5p-libraries

Use the H5P Command Line Interface (H5PCLI) to automatically generate a language file for your H5P library. This command simplifies the process by handling naming conventions and file placement, allowing you to focus on translating the content. Ensure you have the H5PCLI installed before running this command.

```bash
h5p create-language-file h5p-summary nb
```

--------------------------------

### Moodle: Custom CSS for H5Pmod Theme

Source: https://h5p.org/documentation/for-developers/visual-changes_page=1

This example shows how to configure the H5Pmod theme in Moodle to load custom CSS. It involves modifying the theme's config.php, ensuring correct parent theme declaration, and placing custom styles in custom.css. The custom.css file is typically applied when H5P Interactive Video library is used.

```php
$THEME->parents = array('boost');
```

```php
// In version.php, declare 'theme_boost' as a dependency.
// In custom.css, use selectors like '.h5p-draggable'.
```

--------------------------------

### H5P xAPI Event Listener Example

Source: https://h5p.org/documentation/x-api

A practical example of setting up an xAPI event listener using H5P's external dispatcher. This code logs the xAPI statement to the console and is intended to be used within the browser's developer console for testing. It highlights the `event.data.statement` property for accessing the statement details.

```javascript
H5P.externalDispatcher.on('xAPI', function(event) {// Handle the event here, the statement is within event.data.statementconsole.log(event.data.statement);});
```

--------------------------------

### Override Moodle H5P Activity CSS/JS

Source: https://h5p.org/documentation/for-developers/visual-changes_page=2

This example provides a method to override the official Moodle H5P activity CSS and JavaScript. It involves creating a `h5p.css` file in the theme's `styles` directory and a `renderer.php` file to extend the H5P renderer and register the custom CSS file.

```php
<?php

/**
 * Class theme_YOURTHEMENAME_core_h5p_renderer
 *
 * Extends the H5P renderer so that we are able to override the relevant
 * functions declared there
 */
class theme_YOURTHEMENAME_core_h5p_renderer extends \core_h5p\output\renderer {

/**
 * Add styles when an H5P is displayed.
 *
 * @param array $styles Styles that will be applied.
 * @param array $libraries Libraries that will be shown.
 * @param string $embedType How the H5P is displayed.
 */
public function h5p_alter_styles(&$styles, $libraries, $embedType) {
  global $CFG;

  $styles[] = (object) array(
      'path' => $CFG->httpswwwroot . '/theme/YOURTHEMENAME/style/h5p.css',
      'version' => '?ver=0.0.1',
  );
}
}
```

--------------------------------

### Initialize H5P Content

Source: https://h5p.org/documentation/api/H5P

Scans the document for elements with the class '.h5p-content' and initializes H5P instances within them. This is the primary function to start H5P content on a page.

```javascript
H5P.init(target);
```

--------------------------------

### H5P Example Library: semantics.json

Source: https://h5p.org/documentation/api/index

Defines the semantic structure for the H5P 'MyLib' library. It specifies a single text field named 'name' with a label.

```json
[
  {
    "name": "name",
    "type": "text",
    "label": "What is your name?"
  }
]
```

--------------------------------

### Get Library Path

Source: https://h5p.org/documentation/api/H5P

Determines the file path for a specified H5P library. The library is identified by its machine name and version.

```javascript
H5P.getLibraryPath(library);
```

--------------------------------

### H5P Content Definition Example (JSON)

Source: https://h5p.org/documentation/developers/json-file-definitions

This JSON object represents a complete H5P content definition, specifying metadata like title, language, main library, authors, source, license, and dependencies. It serves as a template for creating H5P content.

```json
{
  "title": "Fill in the blanks",
  "language": "en",
  "mainLibrary": "H5P.Blanks",
  "embedTypes": [
    "div"
  ],
  "authors": [
    {
      "name": "fnoks",
      "role": "Author"
    }
  ],
  "source": "https://example.org",
  "license": "CC BY-SA",
  "licenseVersion": "4.0",
  "licenseExtras": "Extra license information is found here",
  "yearFrom": "1950",
  "yearTo": "2050",
  "changes": [
    {
      "date": "02-07-19 11:27:00",
      "author": "fnoks",
      "log": "Initial version"
    }
  ],
  "authorComments": "Author comments",
  "preloadedDependencies": [
    {
      "machineName": "H5P.Blanks",
      "majorVersion": "1",
      "minorVersion": "0"
    }
  ]
}
```

--------------------------------

### Display PHP Info in WordPress

Source: https://h5p.org/documentation/troubleshooting-php

Creates a PHP file to display PHP installation information. This is useful for diagnosing extension issues. Requires web server access to create and access the file.

```php
<?php phpinfo(); ?>
```

--------------------------------

### H5P Semantics JSON Field Example

Source: https://h5p.org/documentation/for-developers/translate-h5p-libraries

An example of a field definition within an H5P library's semantics.json file. This structure defines the properties of an interactive element, including its display label, internal name, type, widget, placeholder text, and description. Fields like 'name', 'type', and 'widget' are for editor use and typically not translated.

```json
{
  "label": "Textfield",
  "name": "textField",
  "type": "text",
  "widget": "textarea",
  "placeholder": "This is an answer: *answer*.",
  "description": "Marked words are added with two asterix (*) around the word."
}
```

--------------------------------

### Custom H5P CSS Tweaks

Source: https://h5p.org/documentation/for-developers/visual-changes

This is an example of a CSS file used to customize the visual appearance of H5P content. It demonstrates how to modify font size and color for H5P elements when embedded as an iframe. This file should be placed in '/wp-content/uploads/h5p/'.

```css
html.h5p-iframe .h5p-content {
    font-size: 20px; /* size of the font used in H5P content */
    color: #5a5a5a; /* color of the H5P content */ 
}
```

--------------------------------

### ActionBar Constructor

Source: https://h5p.org/documentation/api/H5P.ActionBar

Initializes a new instance of the ActionBar with specified display options.

```APIDOC
## new ActionBar(displayOptions)

### Description
Initializes a new instance of the ActionBar with specified display options.

### Method
Constructor

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **displayOptions** (Object) - Constructor parameters.
  - **export** (boolean) - Optional. Triggers the display of the 'Download' button.
  - **copyright** (boolean) - Optional. Triggers the display of the 'Copyright' button.
  - **embed** (boolean) - Optional. Triggers the display of the 'Embed' button.
  - **icon** (boolean) - Optional. Triggers the display of the 'H5P icon' link.

### Request Example
```json
{
  "displayOptions": {
    "export": true,
    "copyright": false,
    "embed": true,
    "icon": true
  }
}
```

### Response
#### Success Response (200)
N/A (Constructor)

#### Response Example
N/A (Constructor)
```

--------------------------------

### Overriding H5P CSS in WordPress

Source: https://h5p.org/documentation/for-developers/visual-changes_page=1

This example demonstrates how to override H5P CSS in a WordPress theme by adding a custom CSS file. It addresses a specific issue where a strange link is prepended to the H5P content due to incorrect use of `bloginfo('template_directory')`.

```php
// Add MYPLUGIN function to theme's functions.php
// Upload custom CSS file to /uploads/h5p
// Remove _bloginfo('template_directory')_ from code if it's causing the issue.
```

--------------------------------

### Drupal 8 Hook for H5P Styles

Source: https://h5p.org/documentation/for-developers/visual-changes_page=1

This example demonstrates a potential Drupal 8 hook for altering H5P styles. While the user couldn't find `hook_h5p_syles_alter`, this illustrates the expected pattern for such hooks in Drupal modules, which would allow customization of H5P library styles.

```php
// Hypothetical Drupal 8 hook for altering H5P styles
function MYMODULE_h5p_styles_alter(&$styles, $libraries, $embed_type) {
  // Custom logic to alter styles goes here
}

```

--------------------------------

### Thumbnail Constructor

Source: https://h5p.org/documentation/api/H5P.Thumbnail

Initializes a new H5P Thumbnail object with the specified source, width, and height.

```APIDOC
## new Thumbnail(source, width, height)

### Description
A simple and elegant class for creating thumbnails of images.

### Method
Constructor

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **source** (string) - Required - The source of the image.
- **width** (number) - Required - The desired width of the thumbnail.
- **height** (number) - Required - The desired height of the thumbnail.

### Request Example
```json
{
  "source": "path/to/image.jpg",
  "width": 100,
  "height": 100
}
```

### Response
#### Success Response (200)
This constructor does not return a value directly, but initializes an object.

#### Response Example
```json
{
  "message": "Thumbnail object created successfully"
}
```
```

--------------------------------

### H5P Translatable Fields from Semantics.json

Source: https://h5p.org/documentation/for-developers/translate-h5p-libraries

A simplified JSON structure representing translatable fields from an H5P library's semantics.json file. This example demonstrates which fields ('label', 'placeholder', 'description', 'default') are intended for translation, excluding internal editor-related fields. This format is used when manually creating language files.

```json
{
  "label": "Textfield",
  "placeholder": "This is an answer: *answer*.",
  "description": "Marked words are added with two asterix (*) around the word."
}
```

--------------------------------

### ActionBar Methods

Source: https://h5p.org/documentation/api/H5P.ActionBar

Provides documentation for various methods available on the ActionBar instance, including event handling, XAPI event triggering, and DOM element retrieval.

```APIDOC
## ActionBar Methods

### createXAPIEventTemplate(verb, extra)

#### Description
Helper function to create event templates added to the EventDispatcher. Will in the future be used to add representations of the questions to the statements.

#### Method
`createXAPIEventTemplate`

#### Endpoint
N/A (Instance Method)

#### Parameters
##### Path Parameters
None

##### Query Parameters
None

##### Request Body
- **verb** (string) - Required - Verb id in short form.
- **extra** (Object) - Optional - Extra values to be added to the statement.

### getDOMElement()

#### Description
Returns a reference to the DOM element.

#### Method
`getDOMElement`

#### Endpoint
N/A (Instance Method)

#### Parameters
None

### hasActions()

#### Description
Checks if the action bar contains any actions.

#### Method
`hasActions`

#### Endpoint
N/A (Instance Method)

#### Parameters
None

### off(type, listener)

#### Description
Removes an event listener. If no listener is specified, all listeners will be removed.

#### Method
`off`

#### Endpoint
N/A (Instance Method)

#### Parameters
##### Path Parameters
None

##### Query Parameters
None

##### Request Body
- **type** (string) - Required - Event type.
- **listener** (H5P.EventCallback) - Optional - Event listener function.

#### Throws
- `TypeError`: If `listener` is not a function.

### on(type, listener, thisArg)

#### Description
Adds a new event listener.

#### Method
`on`

#### Endpoint
N/A (Instance Method)

#### Parameters
##### Path Parameters
None

##### Query Parameters
None

##### Request Body
- **type** (string) - Required - Event type.
- **listener** (H5P.EventCallback) - Required - Event listener function.
- **thisArg** (Object) - Optional - Optionally specify the `this` value when calling the listener.

#### Throws
- `TypeError`: If `listener` is not a function.

### once(type, listener, thisArg)

#### Description
Adds a new event listener that will be fired only once.

#### Method
`once`

#### Endpoint
N/A (Instance Method)

#### Parameters
##### Path Parameters
None

##### Query Parameters
None

##### Request Body
- **type** (string) - Required - Event type.
- **listener** (H5P.EventCallback) - Required - Event listener function.
- **thisArg** (Object) - Optional - Optionally specify the `this` value when calling the listener.

#### Throws
- `TypeError`: If `listener` is not a function.

### trigger(event, eventData, extras)

#### Description
Dispatches an event.

#### Method
`trigger`

#### Endpoint
N/A (Instance Method)

#### Parameters
##### Path Parameters
None

##### Query Parameters
None

##### Request Body
- **event** (string or H5P.Event) - Required - Event object or event type as a string.
- **eventData** (*) - Optional - Custom event data (used when event type as string is used as the first argument).
- **extras** (Object) - Optional - Additional properties for the event.
  - **bubbles** (boolean) - Optional.
  - **external** (boolean) - Optional.

### triggerXAPI(verb, extra)

#### Description
Helper function for triggering xAPI events added to the EventDispatcher.

#### Method
`triggerXAPI`

#### Endpoint
N/A (Instance Method)

#### Parameters
##### Path Parameters
None

##### Query Parameters
None

##### Request Body
- **verb** (string) - Required - The short id of the verb we want to trigger.
- **extra** (Object) - Optional - Extra properties for the xAPI statement.

### triggerXAPICompleted(score, maxScore, success)

#### Description
Helper function to create xAPI completed events. DEPRECATED - USE `triggerXAPIScored` instead.

#### Method
`triggerXAPICompleted`

#### Endpoint
N/A (Instance Method)

#### Parameters
##### Path Parameters
None

##### Query Parameters
None

##### Request Body
- **score** (number) - Required - Will be set as the 'raw' value of the score object.
- **maxScore** (number) - Required - Will be set as the 'max' value of the score object.
- **success** (boolean) - Required - Will be set as the 'success' value of the result object.

### triggerXAPIScored(score, maxScore, verb, completion, success)

#### Description
Helper function to create scored xAPI events.

#### Method
`triggerXAPIScored`

#### Endpoint
N/A (Instance Method)

#### Parameters
##### Path Parameters
None

##### Query Parameters
None

##### Request Body
- **score** (number) - Required - The scored value.
- **maxScore** (number) - Required - The maximum possible score.
- **verb** (string) - Required - The verb id in short form.
- **completion** (boolean) - Required - Indicates if the activity is completed.
- **success** (boolean) - Required - Indicates if the activity was successful.
```

--------------------------------

### MediaCopyright Constructor

Source: https://h5p.org/documentation/api/H5P.MediaCopyright

Initializes a new instance of the MediaCopyright class to manage copyright information for media.

```APIDOC
## new MediaCopyright(copyright, labels, order, extraFields)

### Description
A ordered list of copyright fields for media.

### Method
Constructor

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **copyright** (Object) - Required - Copyright information fields.
- **labels** (Object) - Optional - Translation of labels.
- **order** (Array) - Optional - Order of the fields.
- **extraFields** (Object) - Optional - Add extra copyright fields.

### Request Example
```json
{
  "copyright": {
    "title": "Example",
    "author": "Author Name",
    "license": "CC BY"
  },
  "labels": {
    "title": "Title",
    "author": "Author",
    "license": "License"
  },
  "order": ["title", "author", "license"],
  "extraFields": {
    "source": "http://example.com"
  }
}
```

### Response
#### Success Response (200)
This constructor does not return a value directly, but initializes an object.

#### Response Example
```json
{
  "message": "MediaCopyright object created successfully."
}
```
```

--------------------------------

### Get Translated String in H5P JavaScript Code

Source: https://h5p.org/documentation/for-developers/translate-h5p-libraries

This JavaScript code demonstrates how to retrieve a translated string within your H5P editor widget's JavaScript. It uses the H5PEditor.t function, passing the editor library's machine name and the key of the string you wish to translate. This function will return the appropriate translation based on the currently active language.

```javascript
H5PEditor.t('H5PEditor.ImageHotspotQuestion', 'noImage');
```

--------------------------------

### Moodle Plugin Basic Configuration (PHP)

Source: https://h5p.org/documentation/for-developers/visual-changes_page=2

This PHP code snippet shows the basic configuration variables for a Moodle plugin, including version, requirements, cron interval, component name, maturity, and release version. This is typically found in the plugin's main file.

```php
$plugin->version = 2018082200;
$plugin->requires = 2013051403;
$plugin->cron = 0;
$plugin->component = 'mod_hvp';
$plugin->maturity = MATURITY_STABLE;
$plugin->release = '1.10';
```

--------------------------------

### Define Font Faces for H5P Content in Moodle

Source: https://h5p.org/documentation/for-developers/visual-changes_page=2

This example shows how to define custom font faces using CSS for H5P content within a Moodle theme. It includes the use of `@font-face` declarations to load custom fonts and apply them to specific H5P elements, aiming to override default fonts within the H5P iframe.

```css
@font-face {
  font-family: 'Shabnam';
  src: url([[font:theme|Shabnam.eot]]);
  src: url([[font:theme|Shabnam.eot]]) format('embedded-opentype'),
       url([[font:theme|Shabnam.woff]]) format('woff'),
       url([[font:theme|Shabnam.woff2]]) format('woff2'),
       url([[font:theme|Shabnam.ttf]]) format('truetype'),
       url([[font:theme|Shabnam.svg]]) format('svg');
  font-weight: normal;
  font-style: normal;
}

.h5p-interactive-video .h5p-splash-wrapper .h5p-splash .h5p-splash-title {
  font-family: Shabnam !important;
}
```

--------------------------------

### Custom CSS for H5P Elements

Source: https://h5p.org/documentation/for-developers/visual-changes_page=2

This CSS code provides examples for customizing the appearance of H5P content. It targets specific elements like the iframe content, images within columns, and aims to control font size, line height, and image dimensions. The use of '!important' may be necessary to override existing styles, though it should be used judiciously.

```css
.h5p-iframe .h5p-content {
font-size: 16px;
line-height: 1.5em;
width: 50%;
height: auto;
}

.h5p-column-content.h5p-image > img {
width: auto !important;
height: auto !important;
max-width: 50% !important;
}
```

--------------------------------

### CSS for H5P Course Presentation Font and Color Customization

Source: https://h5p.org/documentation/for-developers/visual-changes

This CSS code provides examples for customizing the appearance of H5P Course Presentations. It targets specific selectors like '.h5p-course-presentation' to change font family and color. It highlights the importance of using more specific selectors than '.h5p-frame' to ensure styles are applied correctly, and advises inspecting the network tab to verify CSS loading.

```css
html.h5p-iframe .h5p-content {
  font-family: 'Barrio', cursive;
}

.h5p-course-presentation {
  font-family: 'YourChosenFont', sans-serif;
  color: #333;
}
```

--------------------------------

### Enter Fullscreen Mode

Source: https://h5p.org/documentation/api/H5P

Enables fullscreen display for an H5P instance. It accepts the target element, instance details, and a callback for when fullscreen is exited.

```javascript
H5P.fullScreen($element, instance, exitCallback, $body, forceSemiFullScreen);
```
Tokens:
Raw