Prise en charge de H5P et intégration avec Drupal

Qu’est-ce que le H5P ?

H5P est une plate-forme logicielle open source qui permet aux utilisateurs de créer et de partager du contenu interactif et multimédia, tel que des quiz, des vidéos interactives et des chronologies interactives. H5P signifie HTML5 Package, et il est construit sur la norme HTML5, ce qui le rend compatible avec une large gamme de navigateurs Web et d’appareils. La plate-forme comprend également une bibliothèque de contenu où les utilisateurs peuvent accéder et partager du contenu créé par d’autres.

Intégration avec Drupal

Il est recommandé d’installer à l’aide de composer car il contient de nombreuses bibliothèques externes –

composer nécessite ‘drupal/h5p:^2.0@alpha’

Activez l’éditeur H5P et H5P à partir du panneau d’administration ou à l’aide de la commande drush –

raisin en h5p

drush et h5p_editor

OU ALORS

Travailler avec H5P

Créez/modifiez n’importe quel type de contenu et ajoutez un champ de type h5p.

Maintenant, dans la section d’affichage du formulaire de gestion, nous avons 2 types de widgets, le téléchargement h5p et l’éditeur h5p. Par défaut, nous obtenons le téléchargement h5p qui permet aux utilisateurs de télécharger des fichiers h5p (identifiés par les extensions .h5p).

Pour ce faire, vous pouvez simplement vous rendre sur le site Web H5P, créer n’importe quel contenu et cliquer sur réutiliser en bas à gauche de ce contenu particulier. Cela ouvrira une boîte de dialogue, puis cliquez sur « Télécharger en tant que fichier .h5p ». Vous pouvez télécharger ce fichier dans Drupal et le réutiliser.

Un autre utilise un éditeur H5P. Ce widget fournit tout un ensemble de bibliothèques interactives telles que des présentations, des quiz, des cartes de dialogue, des vidéos interactives, etc.

Lors de la première utilisation, nous devons télécharger les bibliothèques qui doivent être utilisées en cliquant simplement sur sur le bouton « OBTENIR ». Cela prendra à peine une minute.

Note: Ces bibliothèques sont téléchargées dans le répertoire drupal local dans sites/par défaut/fichiers/h5p. Tous les actifs tels que les images et les vidéos ou tous les fichiers externes pris en charge seront stockés dans ces dossiers.

Exemple de présentation :

• Cliquez sur le bouton « détails » dans la bibliothèque de présentation de cours.
• Ensuite, vous obtiendrez un exemple/tutoriel sur la façon d’utiliser cette bibliothèque. En bas à droite, cliquez sur « Utiliser ».

• Cet ajax appelle la bibliothèque de présentation et nous obtenons la diapositive à l’écran pour la modifier.
• Vous obtiendrez un éditeur approprié pour rendre vos diapositives interactives. De plus, vous pouvez également utiliser d’autres bibliothèques de H5P dans des diapositives telles que des quiz, vrai/faux, remplir les blancs, etc. J’ai ajouté les captures d’écran de la bibliothèque de présentation de travail.

• Une fois terminé, vous pouvez simplement publier/annuler la publication de ce nœud en fonction des besoins et enregistrer le nœud.

Servir les données de H5P

H5P sert le contenu sur les nœuds via des URL de nœud, des vues (bloc, page, intégration, référence d’entité, API REST).

À partir de Views, nous pouvons simplement ajouter le champ H5P qui contient le contenu.

Nous pouvons également servir des données par programmation à partir de champs pris en charge par H5P à l’aide du gestionnaire d’entités Drupal. Pour cela, nous devons connaître la structure de la base de données H5P. Toutes les données, quelles que soient les bibliothèques, sont stockées dans la table ‘h5p_content’, la plupart des autres tables stockent des informations relatives aux bibliothèques H5P téléchargées, aux utilisateurs et aux compteurs. Cette table contient la colonne ‘paramètres’ qui stocke tout le contenu sous la forme d’un objet chaîne JSON. Toutes les images, liens, vidéos et autres bibliothèques imbriquées sont stockées sous la forme d’objets de chaîne JSON. Pour obtenir les données par programmation, nous devons charger le nœud particulier à l’aide de l’encapsuleur du gestionnaire d’entités.

Après avoir chargé le nœud, nous devons obtenir le champ pris en charge par h5p. Ce champ contient l’ID cible qui fait référence à la table h5p_content.

Après avoir obtenu l’identifiant cible alias h5p_content_id, nous devons transmettre cet identifiant lors du chargement de l’entité h5p_content.

Après avoir chargé le h5p_content, nous devons obtenir les paramètres. Le type de données que nous obtenons pour l’exemple actuel est donné ci-dessous.

Note: Nous pouvons servir ces données à l’aide d’API RESTful, ce qui signifie que cela peut prendre en charge Drupal découplé. Il peut y avoir une limite à la quantité de données que nous pouvons servir.

Limites

• Ce module contient de nombreuses bibliothèques qui pourraient ne pas fonctionner avec Drupal, telles que les bibliothèques liées à la réalité augmentée et à la réalité virtuelle, car il peut utiliser une caméra, mais Drupal peut ne pas la prendre en charge.
• Il n’y a pas de support sur certaines des bibliothèques qui ne fonctionnent pas sur Drupal.
• Vous devrez peut-être passer à un autre CMS si certaines bibliothèques ne fonctionnent pas.
• Tous les actifs tels que les images, les bibliothèques et les autres fichiers de format pris en charge ne peuvent être stockés que dans le répertoire Drupal, S3FS ne peut pas être intégré à H5P dans l’état actuel car aucune configuration n’est fournie.
• Vous pourriez rencontrer des problèmes lors du téléchargement des bibliothèques. Pour cela, essayez de passer votre version de php en 7.4.

TROUVÉ CELA UTILE ? PARTAGEZ-LE