---
title: "Ajouter un contenu H5P : Glisser-Déposer (Drag and Drop)"
description: "Glisser-Déposer (Drag and Drop) permet de créer des contenus interactifs de glisser-déplacer des images, du texte sur une image. Très utile pour identifier des structures, des éléments d’une interface par exemple. Il est important de donner des consignes claires et…"
url: "https://www.askott.fr/documentation/concepteur-moov/ajouter-un-contenu-h5p-drag-and-drop/"
updated: "2022-12-14"
category: Concepteur MOOV
tags:
  - Alimenter son cours avec des activités H5P
  - Concepteur MOOV
---

# Ajouter un contenu H5P : Glisser-Déposer (Drag and Drop)

Glisser-Déposer (Drag and Drop) permet de créer des contenus interactifs de glisser-déplacer des images, du texte sur une image. Très utile pour identifier des structures, des éléments d’une interface par exemple. Il est important de donner des consignes claires et précises à vos apprenant pour cette activité.

 

*Rappel : voir la procédure générale pour [ajouter des activités H5P dans un cours.](https://www.askott.fr/documentation/concepteur-moov/ajouter-des-activites-h5p-dans-un-cours/)*

 

* *

## **Comment créer un contenu H5P de type Drag and Drop ?**

**Ajouter le contenu H5P dans la Banque de contenus**

 

![](https://www.askott.fr/wp-content/uploads/2022/12/Bank.png)

 

Dans votre cours accédez à la Banque de contenus.

 

![](https://www.askott.fr/wp-content/uploads/2022/12/H5PDDrop_01.png)

 

Cliquez sur **Ajouter** et choisir *Drag and Drop* dans le menu déroulant.

 

## **Comment paramétrer l’activité ? **

![](https://www.askott.fr/wp-content/uploads/2022/12/H5PDDrop_02.png)

 

### Ajouter l’image d’arrière-plan.

1. **Titre :**Nommez l’activité dans le champ. Ce nom s’affichera dans la Banque de contenus.
2. Cliquez sur **+Ajouter** pour insérer votre image (n’oubliez pas d’éditer le copyright).
3. Spécifiez la taille de la zone d’activité qui doit être proportionnelle à votre image (voir la même taille) afin de ne pas déformer l’image. Vous pouvez toujours revenir faire ce réglage après avoir visualisé votre contenu.
4. Cliquez sur *Next Step* **Eléments de l’activité.**

 

### Insérer des zones de dépôt sur l’image.

![](https://www.askott.fr/wp-content/uploads/2022/12/H5PDDrop_03-1.png)

 

1. Cliquez sur l’icône *Insérer Zone De Dépôt.*

 

![](https://www.askott.fr/wp-content/uploads/2022/12/H5PDDrop_04-1.png)

 

1. Dans la fenêtre *Etiquette,*donnez un nom unique.
2. Vous pouvez choisir d’afficher ou non l’étiquette.
3. Réglez la transparence de la zone de dépôt, zéro pour qu’elle soit invisible.
4. Si la zone ne contiendra qu’un seul élément, cochez la case.
5. Validez la création de votre zone de dépôt en cliquant sur **OK.**

 

![](https://www.askott.fr/wp-content/uploads/2022/12/H5PDDrop_04b-1.png)

 

1. **Glissez et redimensionnez la zone de dépôt à l’endroit désiré sur l’image.** Vous remarquerez qu’une petite fenêtre de menu contextuel s’affiche lorsque vous sélectionnez cette zone : vous pouvez rééditer la zone, la déplacer, la redimensionner directement en entrant des valeurs, la copier/coller, la supprimer.

Recommencez les étapes 5 à 11 pour chaque zone de dépôt à créer.

 

### Insérer du texte et des images

Lorsque toutes vos zones de dépôt ont été créées et bien identifiées, vous devez insérer le texte et/ou des images qui seront glisser- déposer (la procédure est la même).

 

![](https://www.askott.fr/wp-content/uploads/2022/12/H5PDDrop_05.png)

 

1. Cliquez sur l’icône **Texte** ou **Image**.

 

![](https://www.askott.fr/wp-content/uploads/2022/12/H5PDDrop_06-1.png)

 

1. Saisir le texte (vous pouvez le mettre en forme avec l’éditeur : couleur, taille, lien…) ou télécharger l’image à glisser-déposer.
2. Déterminez les zones de dépôt avec lesquelles l’élément texte ou image pourra être associé.
3. Cochez cette case uniquement si le texte (ou l’image) peut être déposé dans plusieurs zones.
4. Validez en cliquant sur **Ok.**

 

### Associer les zones de dépôt avec le Texte ou l’Image

![](https://www.askott.fr/wp-content/uploads/2022/12/H5PDDrop_07-1.png)

 

1. Sélectionnez une zone de dépôt et cliquez sur l’icône *Editer*.

 

![](https://www.askott.fr/wp-content/uploads/2022/12/H5PDDrop_08-1.png)

 

1. Dans la fenêtre étiquette : sélectionnez la ou les bonnes réponses de votre zone de dépôt.
2. Modifiez l’opacité si besoin de la zone.
3. Validez en cliquant sur **OK**.

Recommencez l’opération pour chaque zone de dépôt.

## Paramétrer les rétroactions et finaliser l’activité.

Dans le feedback général définissez les intervalles de scores.

Remarque : Dans les paramètres généraux (Behavioural settings) vous pouvez choisir de mettre en évidence ou pas les zones de dépôt.

 

![](https://www.askott.fr/wp-content/uploads/2022/12/H5PDDrop_09-1.png)

 

Cliquez sur **Enregistrer**pour voir le résultat.

Cliquez sur**Quitter**pour terminer l’opération**.**

Le contenu est créé dans votre Banque de contenus. Vous pouvez maintenant l’insérer dans votre cours.

Pour un bon suivi des résultats des apprenants je vous conseille de l’intégrer en créant une activité H5P dans le cours et non pas dans une Page ou une Etiquette.

 

Voir un exemple de contenu Drag and Drop :[https://h5p.org/drag-and-drop](https://h5p.org/drag-and-drop)