Tutoriel H5P : Glisser-Déposer

Apprenez à créer une activité interactive de type « Drag and Drop » étape par étape.

Étape 1 : Préparation du matériel

Avant même d'ouvrir l'éditeur H5P, une bonne préparation vous fera gagner un temps précieux.

1 Image de fond

C'est le « plateau de jeu ». Cela peut être un schéma d'une cellule animale, un circuit électrique à compléter, le système digestif vierge, etc.

2 Éléments à glisser

Ils peuvent être sous forme d'images séparées ou simplement du texte (ex. : noms des organites, des composantes d'un circuit) que vous écrirez directement dans H5P.

3 Scénario pédagogique

Sachez à l'avance quel élément doit aller sur quelle zone de dépôt pour structurer votre activité efficacement.

Astuce : Optimisez le poids de vos images avant de les importer pour que l'activité se charge rapidement pour vos élèves.

Étape 2 : Configuration initiale

Il est temps de créer la structure de votre activité.

1 Espace de création H5P

Ouvrir votre outil de céation H5P préféré (Lumi, moodle, Logiquiz, etc.)

2 Sélection

Dans le sélecteur de contenu, cherchez et sélectionnez « Drag and Drop ».

3 Titre et consigne

Donnez un titre et définissez une consigne globale (ex. : « Glissez les noms des organites sur les bonnes parties de la cellule animale. »). C'est une excellente pratique pour la clarté de la tâche.

Étape 3 : Image de fond (Background)

La première véritable étape de l'éditeur H5P « Drag and Drop » consiste à définir le fond.

1 Ajouter l'image

Dans l'onglet « Paramètres de base », cliquez sur le bouton « Ajouter » sous « Image de fond » et sélectionnez l'image préparée à l'étape 1.

2 Définir la taille

C'est une étape cruciale. Laissez l'image déterminer sa propre taille est généralement la meilleure option au départ.

Attention : Si vous ne mettez pas d'image de fond, vous devrez spécifier manuellement une largeur et une hauteur pour votre zone de travail, sinon elle sera invisible !

Étape 4 : Zones de dépôt (Drop Zones)

Passez maintenant au deuxième onglet en haut de l'éditeur H5P : Tâche.

Ici, vous allez définir les cibles où les éléments devront être lâchés.

1 Création

Cliquez sur l'icône de Zone de dépôt (le petit carré avec des pointillés) dans la barre d'outils, puis cliquez sur votre image de fond.

2 Configuration

Donnez un titre clair (ex. : « Zone Noyau »). Choisissez si ce titre doit être visible par les élèves ou non.

3 Ajustement

Redimensionnez et déplacez la zone pour qu'elle corresponde exactement à l'endroit voulu sur votre image de fond. Répétez l'opération pour toutes les zones cibles.

Étape 5 : Éléments glissables (Draggables)

Toujours dans l'onglet « Tâche », vous allez maintenant créer les objets que l'élève va manipuler.

1 Création des éléments

Dans la barre d'outils, ajoutez votre Texte ou Image à faire glisser sur le plateau.

2 Assigner les zones

Dans les paramètres de cet élément, repérez « Sélectionnez la/les zone(s) de dépôt » et cochez TOUTES les zones où l'élève a le droit de déposer cet élément (même les mauvaises réponses, pour créer le doute !).

3 Définir la bonne réponse

Double-cliquez sur une Zone de dépôt (créée à l'étape 4). Vous y verrez la liste des éléments glissables qui peuvent y atterrir. Cochez celui ou ceux qui constituent la bonne réponse !

Étape 6 : Finition et réglages

Dernière étape pour rendre votre activité pédagogiquement efficace : les rétroactions et les comportements.

1 Rétroaction globale (Overall Feedback)

Définissez des messages bienveillants et spécifiques selon le score de l'élève :

  • 0% à 59% : « Ton effort est là, mais certains concepts scientifiques nécessitent encore ton attention. Prends le temps de revoir les définitions dans tes notes avant de réessayer ! »
  • 60% à 99% : « Tu as une bonne compréhension globale ! Regarde attentivement tes erreurs et utilise la rétroaction pour corriger les derniers détails. »
  • 100% : « Excellent travail ! Tu maîtrises parfaitement ces concepts scientifiques. »

2 Réglages du comportement (Behavioral settings)

  • Bouton Recommencer : Autoriser l'élève à réessayer afin de mettre à profit la rétroaction reçue.
  • Bouton Voir la solution : Ne pas permettre de voir les bonnes réponses après l'exercice, il faut laisser l'élève se reprendre afin de mettre à profit la rétroaction.
  • Opacité : Ajustez la transparence de l'image de fond ou des zones de dépôt pour un meilleur rendu visuel.
N'oubliez pas d'Enregistrer / Sauvegarder !

Votre activité est prête à être testée par vos apprenants.