dernière mise à jour le 11 juin 2025

    

Après ma création d'un H5P, celui est accessible par le biais du lien sur la page principale du cours et affiche le contenu de façon isolée, sur une page séparée.

Pour rendre l'apprentissage plus interactif ou plus fluide, le contenu du H5P peut être également affichée directement sur la page d'accueil du cours ou dans une ressource ou activité, comme pour cet exemple de vrai/faux. Le contenu du H5P est directement accessible (sans lien intermédiaire) à l'endroit le plus adéquat et s'intègre aux autres contenus pour former un ensemble construit, sans passer changer de page.     

Condition unique : accéder à un champ texte pour intégrer le "code embed" (ou code d'intégration), par ex. dans

  • une Ressource Zone texte, sur la page d’accueil du cours
  • la zone description d’une section, pour un affichage sur la page d’accueil du cours
  • une Ressource Page, comme ici
  • la page/chapitre d’un livre ou d’une leçon,
  • la description/consignes d'un test ou d'une question,
  • etc.

     

Préalable

Une fois le H5P créé, il est préférable de rendre cette activité "Disponible mais pas affiché sur le cours" (menu Admin du H5P/ paramètres/ sous Réglages courants ou via le menu Modifier à droite de l'activité).

> l'activité H5P ne sera plus visible pour les étudiant·es à partir de la section où elle a été créée par la biais d'un lien, son contenu sera visible uniquement dans la page où vous l'intégrerez le contenu H5P.

Exemple : le vrai/faux visible ci-dessus est créé dans la section Organiser des activités de cet espace, avec le paramètre Dispo mais pas affiché mais est visible, pour les lecteur·rices, uniquement sur cette page.

Objectif : le contenu du H5P, ici un quizz, n'a d'intérêt que pour illustrer le propos développé dans cette page. Il est donc plus ergonomique d'intégrer le contenu à cet endroit ; de plus, un lien vers le H5P visible sur la page principal de cours, renvoyant par défaut vers le contenu alors isolé sur une page web séparé, dissocié de ce tutoriel, n'a plus d'intérêt ; pire, il perturberait la structure de la page principale. 

Résultat du paramétrage :

- en tant qu'éditeur du cours, je vois H5P dans la section 'Organiser des activités' et je peux le modifier à partir de cet endroit.

- en tant qu'étudiant·e/lecteur·rice sur ce cours, vous ne pouvez pas voir le quizz dans la section mais uniquement sur cette page (construite avec une ressource Page) car le code "embed" du quizz y a été intégré.

    

À noter que si vous intégrez le H5P dans une page mais que vous modifiez l'activité par après, les modifications seront prises en compte automatiquement à l'endroit où le H5P est intégré. 

      

Étape 1. Récupérer le lien "embed" de l'activité H5p

L'action décrite ci-dessous est indépendante de la création ou la modification de l'activité elle-même. Pour créer une activité H5P : consultez cet article...     

     

  • Dans les paramètres de l'activité H5P (Admin du H5P côté droit), sous la rubrique Afficher les options, laissez cocher Afficher la barre d'action et le cadre
  • Cliquez sur Enregistrer et afficher, résultat : un bandeau est visible en dessous de l’activité.

  • Cliquez sur “Embarqué” pour récupérer le code embed
  • Pour récupérer le code en entier : cliquez une fois dans le lien “<iframe src=...”, faites un ctrl A (pour le sélectionner en entier), puis copiez-le (ctrl C)

  • Conservez le lien précieusement en le collant dans un Word par ex.

Vous obtenez un code de ce type : 

<iframe src="https://uv.ulb.ac.be/mod/hvp/embed.php?id=816342" width="1906" height="470" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://uv.ulb.ac.be/mod/hvp/library/js/h5p-resizer.js" charset="UTF-8"></script>

    

Étape 2. Afficher l’activité H5P à l’endroit souhaité

a) Là où vous souhaitez afficher le H5P, ouvrez la page permettant d'éditer la ressource ou l'activité, par exemple :

    • Zone texte : Admin de la Zone texte/ Paramètres pour atteindre le champ Contenu de la Zone texte
    • Zone description d'une section : menu Modifier de la section (à droite de son intitulé) pour atteindre le champ Résumé
    • Page : Admin de la Page/ Paramètres pour atteindre le champ Contenu de la page
    • Livre ou Leçon : Bouton de la page ou du chapitre à éditer pour atteindre le champ Contenu
    • Test : Admin du test/ champ Description du test ou dans une question elle-même, champ Description de la question

  

b) Dans le champ texte

    • si vous comptez insérer une phrase (intro ou consignes) au-dessus de l'activité H5P, faites-le maintenant (c'est plus difficile de l'ajouter après...). Tapez éventuellement juste un mot que vous modifierez par la suite : dans le second exemple, je tape "texte".
    • développez l’éditeur texte en cliquant sur le 1er bouton en haut à gauche pour afficher toutes les fonctions
    • puis sur le bouton <> pour accéder au code.

Éditeur ATTO

Éditeur Tiny


  

    • dans la fenêtre pop up qui s'affiche, copier/coller le code embed récupéré précédemment à la fin du code déjà présent

    • Cliquez sur Mettre à jour en bas de fenêtre puis Enregistrer en bas de page.

> l'activité H5P s'affiche et vous pouvez la tester !

 

Le H5P n'apparait pas ?

Il arrive que le code original ne fonctionne pas. Dans ce cas, utilisez plutôt le code suivant mais remplacez les 6 chiffres, indiqués ici en jaune, par les chiffres de votre H5P (pour cela, affichez votre H5P -cliquez sur le H5P à partir de la page d'accueil du cours- et récupérez les chiffres dans la barre d'adresse url). 

<iframe src="https://uv.ulb.ac.be/mod/hvp/view.php?id=816342” allowfullscreen="allowfullscreen" width="786" height="470" frameborder="0" width="100%"; height="100%" ;></iframe>

   

c) Dernier réglage : retour dans les paramètres du H5P (Admin du H5P) pour décocher Afficher la barre d'action et le cadre (rubrique Afficher les options).

De cette façon, le bandeau n'apparait plus en-dessous du H5P (comme dans le quizz affiché en haut de cette page).

 

 Importation d'une année à l'autre

Lors d'une restauration ou d'un import d'un cours à un autre, les activités H5P sont bien dupliquées dans le nouvel espace de cours. Afficher le H5P à partir de la page principale du cours, vous constaterez que les chiffres en fin d'url sont différents d'un cours à l'autre.

Néanmoins, si les contenus H5P sont "intégrés" directement à certaines pages, la duplication sera effectuée mais le lien embed, permettant l'affichage, fera toujours référence au H5P de l'ancien espace (autrement dit, le lien n'est pas automatiquement mis à jour). Résultat : vous verrez le contenu mais pas les étudiant·es du nouveau cours. Solution : affichez le H5P dans le nouveau cours à partir de la page principale du cours et copiez les 6 chiffres présents en fin d'URL ; ensuite, dans le code embed du H5P intégré, dans la page où le contenu est affiché, modifiez les 6 chiffres du code, comme expliqué ci-dessus à partir du point b), via le bouton 'code source'.

      

Astuces 

Il est conseillé de finir l’intégration pour voir le résultat sur le cours (quittez le mode édition pour avoir une meilleure vue du rendu final) puis revenir au code pour le modifier si c’était réellement utile. La grandeur d’affichage ou le fait de centrer le H5P est un peu compliqué à gérer mais parfois indispensable.

  • Partie du contenu invisible

Si une barre de défilement est présente à gauche, c'est parce que la fenêtre est trop petite pour faire apparaitre tout le contenu de l'activité H5P. Exemple dans la capture ci-dessus : quand on affiche la 2e question, le bas du H5P c-à-d les éléments de navigation () sont invisibles, sauf si le visiteur fait défiler le H5P vers le bas grâce à la barre de défilement (en gris côté droit). Au mieux, c'est ennuyant, au pire, une information importante peut être ratée. 

Pour résoudre cela, agrandir la taille de la fenêtre en changeant la valeur de “height” (en jaune) dans le code embed (exemple : 570 au lieu de 470). Reprendre à l'étape 2 pour atteindre le code.

<iframe src="https://uv.ulb.ac.be/mod/hvp/embed.php?id=816342" width="800px" height="470px" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

  • Taille

La taille est gérable à partir des éléments en jaune et bleu ci-dessus : préférez toujours des valeurs px pour height (valeurs absolues). Par contre, la largeur (width) peut être gérée en % : entendez % de la largeur de la page. 100 % correspond à la largeur entière de la page. Le H5P fonctionne alors en mode responsive c-à-d qu'il s'adapte à l'agrandissement ou réduction de la fenêtre du navigateur du visiteur.

  • Pour centrer le H5P sur la page, plusieurs moyens : 
    • avant le H5P, faites un saut de ligne (enter) ; tapez une lettre sur la ligne avant et après le H5P, sélectionnez la ligne avant le H5P, le H5P et la ligne après et cliquez sur le bouton Aligner au centre de l'éditeur de texte :

    • ajoutez un bout un code : votre code collé précédemment est en bleu ; en enregistrant le code, des balises du type <p> et </p> se sont ajoutées respectivement en début et en fin de code ; remplacer le <p> au début par la partie renseignée ici en jaune :

<p style="text-align: center;"><iframe src="https://uv.ulb.ac.be/mod/hvp/embed.php?id=816342" width="800" height="250" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

   

   

© 2023 Université Virtuelle