Présentation des interactions par glisser-déposer

Rechercher
Captivate Guide d'utilisation

Sur cette page

S’applique à : Captivate

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Les interactions par glisser-déposer dans Adobe Captivate permettent de tester les utilisateurs pour savoir s’ils peuvent faire correspondre les éléments liés à partir d’un groupe d’éléments.

Ressources et exemples

Ce document présente des procédures qui nécessitent d’utiliser des ressources, comme des images et des exemples de fichiers de projet Adobe Captivate. Vous pouvez choisir d’utiliser vos propres ressources et exemples. Cependant, il est recommandé de télécharger et d’extraire le fichier .zip suivant sur votre ordinateur :

drag-drop-interactions.zip

Création de votre première interaction par glisser-déposer

Nous allons créer une interaction par glisser-déposer basique pour voir comment faire correspondre les pays avec leur capitale. 

  1. Ouvrez un projet vide.

  2. Ajoutez une Diapositive vide depuis le menu Diapositives de la barre d’outils.

  3. Ajoutez à la diapositive des images des monuments et des pays depuis le fichier .zip fourni. Vérifiez l’image ci-dessous.

    CC1

  4. Depuis le menu Insérer , lancez l’assistant d’interaction par glisser-déposer.

  5. À la première étape de l’assistant, définissez les monuments comme sources de glissement. Pour sélectionner les monuments simultanément, appuyez sur la touche Ctrl et cliquez dessus. Cliquez sur Suivant.

    CC2

  6. À la deuxième étape de l’assistant, définissez les pays comme cibles de dépôt. Pour sélectionner les pays simultanément, appuyez sur la touche Ctrl et cliquez dessus. Cliquez sur Suivant.

    CC3

  7. À la troisième étape, mappez les monuments à leurs pays respectifs. Tirez la poignée au centre de la source de glissement et déposez-la sur la cible de dépôt correspondante. Cliquez sur Terminer pour fermer l’assistant.

    CC4

  8. À la dernière étape de l’assistant, deux légendes apparaissent à l’étape : Saisir le texte de réussite ici et Saisir le texte d’échec ici. Maintenant, cliquez sur ces légendes pour modifier les messages de commentaire que l’utilisateur reçoit quand il réussit ou échoue à l’évaluation. Vous pouvez aussi personnaliser les propriétés du texte, comme la couleur, la taille, l’alignement et le style de police.

    Un bouton Envoyer apparaît aussi sur la diapositive à la dernière étape de l’assistant. Ainsi, l’utilisateur doit cliquer sur Envoyer pour terminer la tâche qui lui est attribuée.

    CC5

  9. Vous pouvez donner plusieurs tentatives à l’utilisateur. Accédez à l’Inspecteur des propriétés, dans l’onglet Glisser-déposer, section Actions, et modifiez le Nombre de tentatives sur 3.

    Lorsque vous sélectionnez cette option, vous pouvez également réinitialiser l’interaction de l’utilisateur avant la prochaine tentative. Dans la même section Actions, sélectionnez Réinitialiser tout sous Réinitialiser.

  10. Vous pouvez également laisser les utilisateurs travailler de manière plus interactive au lieu de leur faire envoyer les réponses.

    1. Sélectionnez la cible de dépôt. Accédez à l’Inspecteur des propriétés, dans l’onglet Glisser-déposer, sélectionnez Format   , puis cliquez sur le bouton Actions des objets. 
    2. La boîte de dialogue Sources de glissement acceptées s’ouvre.
    3. Désélectionnez Accepter tout, puis définissez le nombre de tentatives en modifiant le Nombre. Maintenant sélectionnez la source de glissement acceptable pour la cible de dépôt choisie. Définissez aussi les sources de glissement acceptables pour les autres cibles de dépôt.

  11. Pour voir l’interaction par glisser-déposer en action, cliquez sur Aperçu.

Personnalisation des paramètres de l’interaction par glisser-déposer

Application d’effets aux sources de glissements et cibles de dépôt

Vous pouvez créer des effets visuels lors du dépôt de la source de glissement sur la cible de dépôt. Sélectionnez les sources de glissement, accédez à l’Inspecteur des propriétés, onglet Glisser-déposer, section Format   et sélectionnez l’option Zoom avant ou Rayonnement.

De même, vous pouvez aussi définir l’effet Zoom avant pour la cible de dépôt.

Définition d’un message à afficher

Vous pouvez afficher des messages facultatifs quand la correspondance est correcte ou incorrecte ou donner un indice à l’utilisateur.

Sélectionnez la cible de dépôt, accédez à l’Inspecteur des propriétés, dans l’onglet Glisser-déposer, sousAffichage, cochez l’option A l’acceptation. La légende de réussite s’affiche sur la diapositive. Vous pouvez définir le message de réussite.

De même, vous pouvez cocher l’option Au rejet ou l’option Astuce   et définir le message approprié.

Utilisation des propriétés des interactions

Vous pouvez choisir de remettre la source de glissement à sa position d’origine si l’utilisateur la déplace accidentellement. Vous pouvez également autoriser l’utilisateur à la faire glisser à nouveau s’il ne la dépose pas au bon endroit. Utilisez les Propriétés des interactions dans le panneau Options sous l’onglet Glisser-déposer pour réaliser ces actions.

redrag_option

Création d’une interaction réactive de glisser-déposer

  1. Ouvrez un projet réactif.

  2. Insérez deux boîtes Fluid Box verticales depuis la barre d’outils. 

  3. Insérez trois boîtes Fluid Box horizontales dans la ligne supérieure et la ligne inférieure. 

    cc_responsive_1

  4. Comme dans la section précédente, ajoutez à la diapositive des images des monuments et pays à partir du fichier .zip fourni.

  5. Ajustez les boîtes Fluid Box pour les adapter autour de chaque image.

    cc_responsive_2

  6. Déplacez le curseur de prévisualisation pour voir l’apparence des images sur différents facteurs de forme. Par exemple, l’image ci-dessous montre leur apparence sur un iPad.

    cc_responsive_3

  7. Lancez l’assistant d’interaction par glisser-déposer. 

  8. Définissez les sources de glissement et les cibles de dépôt et mappez-les comme dans la section précédente. Modifiez également les légendes de réussite et d’échec.

  9. Prévisualisez le projet.

Utilisation des types dans une interaction de glisser-déposer

Vous pouvez aussi utiliser des interactions de glisser-déposer pour que les utilisateurs regroupent des éléments similaires parmi une collection d’éléments. Cette tâche est réalisée à l’aide de l’option Types. Par exemple, nous créons un projet pour séparer les fruits et les légumes.

Drag-and-drop

  1. Ouvrez un projet vide.

  2. Ajoutez une diapositive vide depuis le menu Diapositives de la barre d’outils.

  3. Ajoutez à la diapositive des images de fruits et de légumes, à partir du fichier .zip fourni.

    dnd-_fv1

  4. Lancez l’assistant d’interaction par glisser-déposer.

  5. Premièrement, définissez tous les éléments de fruits et légumes comme sources de glissement. Ensuite, classez-les en groupes séparés par Types. Vous pouvez exécuter cette tâche en deux temps comme suit :

    1. Sélectionnez tous les éléments de fruit simultanément. Pour nommez ce groupe Fruits, cliquez sur le symbole + de l’option Ajouter au type de la barre d’outils de l’assistant.
    2. De même, sélectionnez chaque légume simultanément et créez un type nommé Légumes.

    Cliquez sur Suivant.

    DnD-FV3
    DnD-FV4

  6. Sélectionnez les paniers comme cibles de dépôt. Cliquez sur Suivant.

    DnD-FV5

  7. Faites glisser la poignée au centre de l’un des éléments de fruit et pointez sur le panier Fruits. En faisant glisser l’élément, tous les autres éléments de fruit pointent aussi automatiquement vers le panier Fruits. De même, lorsque vous associez un élément de légume au panier Légumes, tous les autres éléments de légume sont liés au panier Légumes. Cliquez sur Terminer.

    DnD-FV6

  8. Définissez les messages de réussite et d’échec. Ajoutez aussi une légende et nommez-la Vous avez droit à 3 tentatives

  9. Vous pouvez donner plusieurs tentatives à l’utilisateur. Accédez à l’Inspecteur des propriétés, dans l’onglet Glisser-déposer, section Actions, et modifiez le Nombre de tentatives sur 3.

    Lorsque vous sélectionnez cette option, vous pouvez également réinitialiser l’interaction de l’utilisateur avant la prochaine tentative. Dans la même section Actions, sélectionnez Réinitialiser tout sous Réinitialiser.

    DnD-FV7

  10. Pour voir l’interaction en action, cliquez sur Aperçu.

Intégration d’une interaction par glisser-déposer dans un quiz Adobe Captivate

L’interaction par glisser-déposer peut être intégrée à un quiz Adobe Captivate pour, en parallèle aux questions, évaluer votre interaction par glisser-déposer.

Nous ajoutons l’interaction par glisser-déposer dans la première section de cet article à un quiz.

  1. Ouvrez un projet vide.

    Nommez le titre Démarrer le quiz. 

    Ajoutez aussi à la diapositive un bouton avec le symbole de démarrage, depuis le menu Formes de la barre d’outils. Accédez à l’Inspecteur des propriétés, onglet Propriétés, section Actions et définissez En cas de réussite sur Aller à la diapositive suivante.

  2. Pour créer une simple interaction par glisser-déposer, suivez les étapes 3 à 8 de la section : Création de votre première interaction par glisser-déposer

  3. Sélectionnez la diapositive de glisser-déposer dans la Bande de film. Accédez à l’Inspecteur de propriétés, dans l’onglet Glisser-déposer, section Actions, et sous Compte-rendu, cochez Insérer dans le quiz.  Vous pouvez voir que Ajouter au Total est coché automatiquement une fois que l’option Insérer dans le quiz est cochée.

    Vous pouvez aussi collecter les réponses données par l’utilisateur dans une session et les envoyer à un LMS pour les publier dans un rapport. Pour cette option, sous Rapports,  cochez Communiquer les réponses.

  4. Pour montrer la note aux utilisateurs après qu’ils aient envoyés les réponses :

    1. Accédez au menu Quiz de la barre de menu et choisissez Préférences de quiz.
    2. La boîte de dialogue Préférences de quiz s’ouvre. Dans la boîte de dialogue, dans le volet Catégories, sous Quiz, sélectionnez Paramètres.
    3. Cochez Montrer le score à la fin du quiz. Une diapositive de résultats du quiz est ajoutée après la diapositive d’interaction par glisser-déposer.
    dnd_quiz_menu

  5. Supprimez les légendes du commentaire de la diapositive de glisser-déposer.

  6. Pour voir le quiz en action, prévisualisez le projet.