Set up H5P for Drupal 8

Download and install Drupal

Skip this step if you already have a running Drupal 8 installation.

• Download Drupal 8 from drupal.org.
• Follow the usual installation instructions
  

Install the H5P module

1. Find the latest H5P module from the H5P project page on drupal.org: 

Screen Shot 2017-10-04 at 3.03.35 PM.png

2. Install the H5P module as you usually install a Drupal module. If you are new to Drupal modules, you can take a look at Drupal's installing modules guide.

Drupal - add new module

You should see the following message:

Screen Shot 2017-10-10 at 4.53.03 PM.png

3. Navigate to your site's module administration pages under the 'Extend' tab ('/admin/modules/'). Scroll to the section named "H5P" and enable the "H5P" and "H5P Editor" modules:

Screen Shot 2017-10-04 at 3.05.07 PM.png

Add the H5P field to a Content Type

Drupal Content Types should not be confused with H5P Content Types. Drupal Content Types are simply different types of web pages such as articles or blog posts. H5P Content Types refer to the different types of H5P content such as Course Presentation or Memory Game.

You can add H5P content to Drupal Content Types by adding the H5P field. Let's add the H5P field to 'Basic Page', one of Drupal 8's default content types.

1. Navigate to the 'Structure' section ('/admin/structure') then click on 'Content Types':

Screen Shot 2017-10-04 at 3.08.42 PM.png

2. Click on 'Manage Fields' for the 'Basic Page':

Screen Shot 2017-10-04 at 3.10.37 PM.png

3. Then 'Add field':

Screen Shot 2017-10-04 at 3.12.29 PM.png

4. Select H5P from the drop-down menu then press 'Save and continue':

Screen Shot 2017-10-04 at 3.13.38 PM.png

You can specify the number of H5P fields you want to have in a content type. Let's choose 1 for now. 

5. Lastly, click on the 'Manage Form display' tab and select 'H5P Editor' from the drop-down menu:

Screen Shot 2017-10-05 at 1.48.01 PM.png

Let's check that the H5P field has been added. Click the 'Content' tab at the top (/admin/content), then the add content button:

Screen Shot 2017-10-04 at 3.20.36 PM.png

Click on 'Basic Page' and you here you should be able to see the H5P Editor:

Screen Shot 2017-10-04 at 3.29.18 PM.png

Install content types

Now your module is set up, and you can start creating H5P Content. After you click on "Add new" The H5P Hub will load - offering you a variety of content types to pick from. 
Below you can see how to get new content types from the H5P Hub. 

Here you can find Tutorials how to create content using different content types.

Roles and permissions

Depending on the framework used, access to H5P features may be controlled by defining the permissions for roles or users.

In Drupal, H5P has the following permissions available. They should be assigned users/roles as shown.

* The "update h5p libraries" permissions enables the user to upload H5Ps with updated library versions. Whether or not editors should have this access is up to site policy.

Updating old content to new versions can change their appearance and functionality significantly, preserving old content through library upgrades is always one of the main focuses of a library developer. Be aware of possible versioning and content upgrades issues when letting users upload altered H5P libraries.

** The "Create restricted H5P content types" permissions enables the user to create content types that users without this permission aren't allowed to create. Admins can configure what content types are restricted at admin/content/h5p. Who should have this access is up to the site policy.

Enable H5P shortcodes

H5P shortcodes are not yet possible in D8. 

Enable result reports

By enabling Drupal's Views module a view will appear as a tab on each H5P node and on each user profile displaying basic result information.

Drupal 8's Views module allows us to display content from our database in a variety of ways. In our case, we are going to show two different displays, one for the results of each user and another for the results of each node. 

To upload a pre-built view, click on the 'Configuration' tab then 'Configuration and synchronization'. Click on the 'Import' tab and select 'Single Item'. The full path is '/admin/config/development/configuration/single/import'. Note this sample view expects the H5P Field you created to be called 'H5P' as this will result in the machine name 'field_h5p' which is the machine name the view is seeking to match. 

Select 'View' from the 'Configuration Type' dropdown then paste the following code (note that this is in YAML as opposed to HTML):

uuid: 3541d923-54a4-482b-87ac-4ac1d2617792
langcode: en
status: true
dependencies:
  config:
    - core.entity_view_mode.node.teaser
  module:
    - h5p
    - node
    - user
id: h5p_results
label: 'H5P results'
module: views
description: ''
tag: ''
base_table: node_field_data
base_field: nid
core: 8.x
display:
  default:
    display_plugin: default
    id: default
    display_title: Master
    position: 0
    display_options:
      access:
        type: perm
        options:
          perm: 'access content'
      cache:
        type: none
        options: {  }
      query:
        type: views_query
        options:
          disable_sql_rewrite: false
          distinct: false
          replica: false
          query_comment: ''
          query_tags: {  }
      exposed_form:
        type: basic
        options:
          submit_button: Apply
          reset_button: false
          reset_button_label: Reset
          exposed_sorts_label: 'Sort by'
          expose_sort_order: true
          sort_asc_label: Asc
          sort_desc_label: Desc
      pager:
        type: mini
        options:
          items_per_page: 10
          offset: 0
          id: 0
          total_pages: null
          expose:
            items_per_page: false
            items_per_page_label: 'Items per page'
            items_per_page_options: '5, 10, 25, 50'
            items_per_page_options_all: false
            items_per_page_options_all_label: '- All -'
            offset: false
            offset_label: Offset
          tags:
            previous: ‹‹
            next: ››
      style:
        type: table
        options:
          grouping: {  }
          row_class: ''
          default_row_class: true
          override: true
          sticky: false
          caption: ''
          summary: ''
          description: ''
          columns:
            title: title
          info:
            title:
              sortable: false
              default_sort_order: asc
              align: ''
              separator: ''
              empty_column: false
              responsive: ''
          default: '-1'
          empty_table: false
      row:
        type: 'entity:node'
        options:
          view_mode: teaser
      fields:
        title:
          id: title
          table: node_field_data
          field: title
          entity_type: node
          entity_field: title
          label: ''
          alter:
            alter_text: false
            make_link: false
            absolute: false
            trim: false
            word_boundary: false
            ellipsis: false
            strip_tags: false
            html: false
          hide_empty: false
          empty_zero: false
          settings:
            link_to_entity: true
          plugin_id: field
          relationship: none
          group_type: group
          admin_label: ''
          exclude: false
          element_type: ''
          element_class: ''
          element_label_type: ''
          element_label_class: ''
          element_label_colon: true
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_alter_empty: true
          click_sort_column: value
          type: string
          group_column: value
          group_columns: {  }
          group_rows: true
          delta_limit: 0
          delta_offset: 0
          delta_reversed: false
          delta_first_last: false
          multi_type: separator
          separator: ', '
          field_api_classes: false
        name:
          id: name
          table: users_field_data
          field: name
          relationship: uid
          group_type: group
          admin_label: ''
          label: Name
          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
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          click_sort_column: value
          type: user_name
          settings:
            link_to_entity: true
          group_column: value
          group_columns: {  }
          group_rows: true
          delta_limit: 0
          delta_offset: 0
          delta_reversed: false
          delta_first_last: false
          multi_type: separator
          separator: ', '
          field_api_classes: false
          entity_type: user
          entity_field: name
          plugin_id: field
        started:
          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
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          date_format: fallback
          custom_date_format: ''
          timezone: ''
          plugin_id: date
        finished:
          id: finished
          table: h5p_points
          field: finished
          relationship: field_h5p_h5p_content_id
          group_type: group
          admin_label: ''
          label: Finished
          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
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          date_format: fallback
          custom_date_format: ''
          timezone: ''
          plugin_id: date
        points:
          id: points
          table: h5p_points
          field: points
          relationship: field_h5p_h5p_content_id
          group_type: group
          admin_label: ''
          label: Points
          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
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          set_precision: false
          precision: 0
          decimal: .
          separator: ','
          format_plural: false
          format_plural_string: "1\x03@count"
          prefix: ''
          suffix: ''
          plugin_id: numeric
        max_points:
          id: max_points
          table: h5p_points
          field: max_points
          relationship: field_h5p_h5p_content_id
          group_type: group
          admin_label: ''
          label: 'Max points'
          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
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          set_precision: false
          precision: 0
          decimal: .
          separator: ','
          format_plural: false
          format_plural_string: "1\x03@count"
          prefix: ''
          suffix: ''
          plugin_id: numeric
      filters:
        status:
          value: '1'
          table: node_field_data
          field: status
          plugin_id: boolean
          entity_type: node
          entity_field: status
          id: status
          expose:
            operator: ''
          group: 1
        uid_current:
          id: uid_current
          table: users
          field: uid_current
          entity_type: user
          plugin_id: user_current
          relationship: uid
      sorts:
        created:
          id: created
          table: node_field_data
          field: created
          order: DESC
          entity_type: node
          entity_field: created
          plugin_id: date
          relationship: none
          group_type: group
          admin_label: ''
          exposed: false
          expose:
            label: ''
          granularity: second
      title: 'H5P results'
      header: {  }
      footer: {  }
      empty: {  }
      relationships:
        field_h5p_h5p_content_id:
          id: field_h5p_h5p_content_id
          table: node__field_h5p
          field: field_h5p_h5p_content_id
          relationship: none
          group_type: group
          admin_label: 'H5P from field_h5p'
          required: false
          plugin_id: standard
        uid:
          id: uid
          table: h5p_points
          field: uid
          relationship: field_h5p_h5p_content_id
          group_type: group
          admin_label: 'H5P user points'
          required: false
          plugin_id: standard
      arguments: {  }
      display_extenders: {  }
    cache_metadata:
      max-age: 0
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - url.query_args
        - user
        - 'user.node_grants:view'
        - user.permissions
      tags: {  }
  page_1:
    display_plugin: page
    id: page_1
    display_title: 'User results'
    position: 1
    display_options:
      display_extenders: {  }
      path: user-results
      filters:
        status:
          value: '1'
          table: node_field_data
          field: status
          plugin_id: boolean
          entity_type: node
          entity_field: status
          id: status
          expose:
            operator: ''
          group: 1
        uid_current:
          id: uid_current
          table: users
          field: uid_current
          relationship: uid
          group_type: group
          admin_label: ''
          operator: '='
          value: '1'
          group: 1
          exposed: false
          expose:
            operator_id: ''
            label: ''
            description: ''
            use_operator: false
            operator: ''
            identifier: ''
            required: false
            remember: false
            multiple: false
            remember_roles:
              authenticated: authenticated
          is_grouped: false
          group_info:
            label: ''
            description: ''
            identifier: ''
            optional: true
            widget: select
            multiple: false
            remember: false
            default_group: All
            default_group_multiple: {  }
            group_items: {  }
          entity_type: user
          plugin_id: user_current
      defaults:
        filters: false
        filter_groups: false
      filter_groups:
        operator: AND
        groups:
          1: AND
      display_description: ''
    cache_metadata:
      max-age: 0
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - url.query_args
        - user
        - 'user.node_grants:view'
        - user.permissions
      tags: {  }
  page_2:
    display_plugin: page
    id: page_2
    display_title: 'Node results'
    position: 2
    display_options:
      display_extenders: {  }
      path: node/%node/results
      filters:
        status:
          value: '1'
          table: node_field_data
          field: status
          plugin_id: boolean
          entity_type: node
          entity_field: status
          id: status
          expose:
            operator: ''
          group: 1
      defaults:
        filters: false
        filter_groups: false
        arguments: false
      filter_groups:
        operator: AND
        groups:
          1: AND
      arguments:
        nid:
          id: nid
          table: node_field_data
          field: nid
          relationship: none
          group_type: group
          admin_label: ''
          default_action: default
          exception:
            value: all
            title_enable: false
            title: All
          title_enable: false
          title: ''
          default_argument_type: node
          default_argument_options: {  }
          default_argument_skip_url: false
          summary_options:
            base_path: ''
            count: true
            items_per_page: 25
            override: false
          summary:
            sort_order: asc
            number_of_records: 0
            format: default_summary
          specify_validation: false
          validate:
            type: none
            fail: 'not found'
          validate_options: {  }
          break_phrase: false
          not: false
          entity_type: node
          entity_field: nid
          plugin_id: node_nid
      display_description: ''
    cache_metadata:
      max-age: 0
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - url
        - url.query_args
        - 'user.node_grants:view'
        - user.permissions
      tags: {  }

Go to 'Structure' then 'Views' to see our newly created 'H5P results' view:

Screen Shot 2017-10-05 at 1.20.17 PM.png

Press 'Edit' to see how the H5P results View is defined.

The sample View comes with two displays, one for User Results and another for Node results. For the purposes of this tutorial, we are just going to show the User results display.

Navigate to the path specified, we will see that the H5P results display is as we expect:

Screen Shot 2017-10-09 at 3.29.53 PM.png