H5P

Introduction

H5P est un plugin pouvant être installé sur certaines plateformes pédagogiques (Angl. Learning Management System, LMS) qui permet de créer du contenu interactif comme des vidéos interactives, des jeux, des quiz etc. H5P facilite la création, le partage et la réutilisation de contenus et d'applications HTML5 (interopérabilité).

Selon Wikipédia, “ H5P - abréviation de HTML5 Package - est un logiciel libre (licence MIT) de création de contenu interactif, basé sur HTML5 et JavaScript. Il est développé depuis 2014. H5P comporte un éditeur de contenu intuitif qui permet de générer aisément des contenus interactifs bien que l'interface soit uniquement en langue anglaise. Les contenus créés peuvent être utilisés en ligne directement sur le site, téléchargés pour être transmis ou intégrés dans une autre plateforme H5P. H5P peut être interfacé dans Drupal, Moodle et WordPress3. Les utilisateurs acceptent que le contenu créé le soit sous licence Creative commons attribution 4.0 international (CC BY 4.0).”, consulté le 21 Avril 2020.

Intégration de H5P et mise à jour

Types d'intégration H5P

Il y a 3 types d'intégration de H5p :

• Lien direct ou intégration à partir de H5P.com
• Intégration à travers la norme IMS LTI (Learning Tools Interoperability (LTI) (option payante). Cette norme permet de communiquer avec un système externe depuis le LMS que vous utilisez sans que les utilisateurs n'aient besoin d'une nouvelle authentification. tout en faisant remonter des informations vers le LMS.
• Intégration en tant que plugin dans les plateformes pédagogiques comme Moodle, Drupal ou WordPress (option gratuite).

Ces différentes installations sont documentées dans la documentation officielle concernant l'intégration de H5P. Elles traitent aussi de l'intégration des différents types de contenus interactifs et de leurs mises à jour. A TECFA, nous avons l'installation du plugin H5P sur notre TecfaMoodle.

Mise à jour H5P dans Moodle

Dans Moodle, H5P est composé d'un ensemble de librairies Javascript permettant de créer les différents contenus interactifs. (à faire) Voir https://docs.moodle.org/3x/fr/H5P#Consid.C3.A9rations_techniques_pour_les_administrateurs

Insérer un contenu interactif H5p dans Moodle

Pour insérer un contenu interactif H5P, ajoutez d'abord une activité H5P dans Moodle (cf. image ci-dessous)

1. Activer le mode édition
2. Ajouter une activité ou une ressource
3. Sélectionner Contenu interactif H5P

Intégration d'un contenu interactif H5P dans Moodle

Utilisation de base

Une fois l'activité créée, vous avez deux possibilités (cf. image ci-dessous) : créer un contenu interactif (Ajouter une activité) ou importer un contenu interactif H5P (Téléverser)

Créer ou téléverser une activité H5P

Pour créer un nouveau contenu, commencez par sélectionner une activité parmi les 41 proposés dans la liste. Vous avez deux options : cliquer sur détails pour avoir un descriptif de l'activité ou cliquer pour sur obtenir pour installer et utiliser ce contenu.

Voici par exemple avec le contenu "paires d'images". En cliquant sur obtenir, il est possible d'avoir accès à une démonstration et d'installer ce type de contenu.

Obtenir un contenu

Une fois cliqué sur installer, cliquer ensuite sur Utiliser pour avoir accès à l'interface vous permettant de designer votre activité

Utiliser un contenu

Créer un nouveau contenu

Pour l'exemple, nous avons choisi "image pairing" (paires d'images) pour faire une illustration des champs pouvant être paramétrés et remplis.

Vous noterez au passage que l'interface est quasiment exclusivement en anglais sauf quelques termes qui ont été traduit en français. Cependant, il est possible de modifier les instructions faites aux apprenants en français de telle sorte que ceci soit transparent pour eux en remplissant les instructions (surlignés en jaune ci-dessous) mais aussi en remplaçant les éléments de l'interface (voir plus loin).

Dans l'exemple ci-dessous, vous devez remplir différents champs :

• Titre
• Métadonnées
• Description de la tâche (Task description)
• Texte alternatif pour les images (Alternative Text for images) pour que l'outil soit accessible à toute personne comme la majorité des contenus H5P (plus d'informations sur l'accessibilité des contenus dans la page content type accessibility).

A ce stade et pour cet exemple, vous avez la possibilité d'accéder à l'exemple 'image pairing' de la documentation officielle.

Configuration de l'activité

Dans la même fenêtre un peu plus bas, vous avez accès à deux types de paramétrages pour cet exemple :

• Définition du comportement de l'activité i.e l'apprenant a t'il le droit de refaire une tentative ?
• Options et texte. Ces paramètres vous permettent de personnaliser les boutons et le feedback envoyés aux étudiants (voir plus loin). Par exemple, traduire en français le bouton "check" comme dans l'exemple ci dessous.

Options de configuration de l'activité

Enfin, pour les métadonnées, vous pouvez (devez) remplir un certain nombre d'éléments utilisés dans les langages de modélisation pédagogique pour faciliter la recherche, l'indexation et la réutilisation des contenus d'apprentissages.

Dans l'activité, il suffit de cliquer sur métadonnées à côté de titre pour ouvrir la fenêtre permettant de renseigner les métadonnées (cf. ci-dessous). Dans cette fenêtre, vous devez renseigner un les éléments et notamment choisir la licence. A ce propos, attention au travail que vous réutilisez dans le cadre notamment d'une licence libre. Vous devez remettre cette licence mais aussi indiquer les modifications que vous avez réalisez sur l’œuvre dans le journal des modifications . Une fois que vous avez terminé d'entrer les métadonnées, cliquer sur "enregistrer les métadonnées" en haut à droite.

Métadonnées

L'ensemble de ces étapes réalisées, vous pouvez maintenant enregistrer votre séquence.

Dans notre exemple, voici ce que l'étudiant peut visualiser :

Simulation de l'activité "image pairing" sur les animaux

Voici le résultat une fois que l'étudiant à réaliser l'activité. Vous pouvez voir que les changements que nous avons fait dans "options et texte" (cf. plus haut) sont affichés ici comme par exemple le bouton "réessayer".

Résultat de l'activité "image pairing" réalisée par un étudiant

Export et import de contenus

Comme mentionné plus haut, H5P permet de réutiliser du contenu en exportant ou important un contenu H5P.

Pour exporter du contenu dans Moodle, cliquer sur réutiliser et une nouvelle fenêtre s'ouvre qui permet d'exporter le contenu créer sous forme de fichier H5P en cliquant Download as an .h5p file ou de copier le contenu en cliquant sur copy content.

Exporter un contenu (fichier H5P ou copier le contenu)

L'importation d'un fichier H5P peut se faire dans Moodle mais aussi dans un autre LMS compatible H5P et ayant le plugin H5P installé. Pour importer un fichier H5P dans Moodle, cliquer sur Téléverser (cf. point 3.Utilisation de base). Une fois le contenu importé, un message vous signale que l'opération s'est correctement déroulée.

Importer un contenu

Pour importer une activité que vous avez copiée via copy content, vous devez :

1. Créer une nouvelle activité H5P dans Moodle
2. Cliquer sur coller

Remarque : à ce stade, l'activité et son paramétrage est collée mais les images ne sont pas importer. Il est donc nécessaire de réimporter les images. Pour le moment, nous conseillons de réaliser un export en H5P (explorer un peu plus pour le collage d'activité, Lydie BOUFFLERS (discussion) 29 avril 2020 à 11:26 (CEST))

Coller un contenu

Types de contenus

H5P permet d'insérer plusieurs types de contenus interactifs, il en existe au total 41 (Avril 2020) que l'on peut classifier en trois catégories principales:

• Questionnaires : Single choice Set, Arithmetic Quiz
• Contenus interactifs : Accordion Tutorial, Timeline
• Jeux : Drag the words, Fill in the Blanks

Chaque contenu a un tutoriel dédié sur le site de H5P, consultez la liste et lisez le tutoriel sur la page tutoriels pour les auteurs (EN).

Résultats

(a développer) Le plugins H5P stocke les résultats de base tels que les heures de début et de fin, les scores des utilisateurs par type de contenu H5P. Notamment, pour le scoring, c'est via le paramétrage que vous faites que ces scores seront remontées (note en point, barème etc.)

Liens

Documentation et tutoriels

• Lien générique vers la documentation officielle (EN)
• Utilisation de base H5P
• Tutoriels sur tous les contenus interactifs
• Exemples de contenus interactifs et téléchargements de démo
• Import et export de contenus

Installation H5P sur Moodle

• Documentation H5P : 5P sur Moodle
• Documentation Moodle H5P sur Moodle