Aller au contenu principal

H5P – Image Hotspots

Créer une image réactive​

Les points d’intérêts ou "hotspots" d'images peuvent être utiles pour créer des infographies rapidement et simplement. Utilisez n'importe quelle image et enrichissez-la de points d'intérêt et d'informations détaillées sur les détails représentés.
L'élève interagit avec l'image pour obtenir plus d'informations sur un sujet particulier et s'y engager de manière ordonnée.
Les "hotspots" peuvent révéler du texte, des images et des vidéos lorsque l'on clique dessus.

Pistes pédagogiques
  • Créer des infographies sur différents sujets et les enrichir de "hotspots", points d’intérêts interactifs.

ETAPE 1 : Création de l'activité H5P​

➡️ Dans votre cours Moodle,

  1. Cliquez sur le menu "Plus".
  2. Cliquez sur le bouton "Banque de contenus".
  3. Cliquez sur le bouton Ajouter".
  4. Sélectionnez l'activité "Image Hotspots".

ETAPE 2 : Paramétrage de l'activité H5P​

➡️ Dans la page de paramétrage de l'activité,

  1. Donnez un titre à votre activité H5P : c'est le nom qui s'affichera dans votre Banque de contenu
  2. Ajoutez l'image d'arrière-plan.
    Il sera possible de la modifier pour la recadrer ou la faire tourner
  3. Paramétrez vos puces :
  • Type d'icône
  • Couleur de la puce

Exemple par défaut :


➡️ Ajout d'une première puce

  1. Cliquez sur l'aperçu de l'image pour placer vote puce.
  2. Option "Recouvrir toute l'image d'arrière-plan" : si vous ajoutez une vidéo ou une image vous pouvez cocher cette case pour que les élèves puissent mieux voir ou se concentrer sur votre contenu.
    Laissez la case non cochée pour générer une petite fenêtre contextuelle pour le contenu de ce point d'accès.
  3. Entrez le titre de votre contenu, il est facultatif,bien qu’utile, pour ajouter un contexte supplémentaire si nécessaire.
  4. Sélectionnez le type de contenu que vous voulez ajouter au"hotspot"dans la liste déroulante.
    Il existe trois types de contenu possibles :
    Texte, Vidéo ou Image. Vous pouvez les combiner avec le bouton .

  • Le texte doit être assez court – 3 à 4 phrases - de sorte que le popup ne prenne pas trop de place sur l'écran.


  • Pour les vidéos,

a. Il est possible de télécharger la vidéo à partir de votre disque dur (format mp4 - votre vidéo doit être limitée à 16 Mb), ou de coller directement le lien d’une vidéo trouvée sur Peertube, Youtube ou ailleurs.


b. Dans la partie "Visuels", vous pouvez choisir de télécharger une image statique qui s'affichera si la vidéo ne marche pas, et définir l'affichage.
c. Dans la partie "Playback", vous pouvez choisir si la vidéo est lue automatiquement lorsque vous cliquez sur le "hotspot" ou choisir de faire une boucle sur la vidéo.

  1. Ajoutez d'autres puces cliquables.
  2. Enregistrez. L'activité est créée dans votre banque de contenus. Elle peut être modifiée à tout moment

ETAPE 3 : Publication​

Il est possible d'afficher directement votre module H5P dans le cours par le biais d'une étiquette. A réserver aux modules de type consultation pour lesquels il n'y aura pas de suivi des résultats.

OPTION 1 : Intégration dans la page de cours (ressource étiquette)​

➡️ Activez le mode édition, cliquez sur et sélectionnez la ressource **''Étiquette''.**


  1. Dans l'éditeur de texte de l'étiquette, cliquez sur l'icône .
  2. Dans la boîte de dialogue qui s'ouvre, cliquez sur "Parcourir les dépôts" et recherchez votre activité dans la banque de contenus. Sélectionnez l'option de votre choix (Copie ou Alias, voir ci-dessous).
  3. Cliquez sur le bouton "Insérer H5P". L'activité H5P s'affiche dans l'éditeur de texte.
  4. Cliquez sur "Enregistrer et revenir au cours".

OPTION 2 : Diffusion d'une activité H5P de la banque de contenus comme activité H5P (A PRIVILÉGIER)​

Pour un bon suivi des résultats des élèves, il est :

  • déconseillé de l'intégrer dans une étiquette via le bouton de l'éditeur de textes (option 1 présentée ci-dessus).
  • conseillé de créer une activité H5P (bouton bleu).

Il est possible d'afficher cette activité comme toutes les autres activités Moodle, sous forme de lien dans le cours.

➡️ Activez le mode édition, cliquez sur et sélectionnez l'**activité H5P.**

  1. Donnez un nom à l'activité.
  2. Dans la description, entrez ici le sujet ou les consignes.

Si vous voulez faire apparaître une description dans le cours, cochez la case "Afficher la description…".

  1. Dans le fichier de paquetage, cliquez sur l’icône "ajouter".

  1. Dans le sélecteur de fichiers, cliquez sur Banque de contenus puis sur l'activité H5P.

  1. Sélectionnez l'option COPIE ou ALIAS.
  2. Cliquez sur "Sélectionner ce fichier".
  3. Cliquez sur le bouton "Enregistrer et revenir au cours".

:::tip **A savoir** : - **COPIE** : l'animation H5P ne bougera plus, quelles que soient les modifications faites sur l'original dans la banque de contenus. - **ALIAS** : les modifications ultérieures faites sur l'original dans la banque de contenus seront répercutées sur chaque alias. :::