Du "drag and drop" dans Genially

Article écrit par : Patrice Nadam
Première mise en ligne le 13 mai 2020
Mise à jour le 29 juin 2020

Nous développons de petits bouts de code qui, ajoutés à une page Genially, offrent de nouvelles possibilités. C’est le cas du « drag and drop » proposé ici.

Nous avons utilisé cette fonctionnalité dans notre défi Le laboratoire.

Drag and drop simple

Dans une première version, nous proposons la possibilité de placer trois éléments permettant une seule association. Le principe et la mise en place sont très simples, trois éléments suffisent :

  • un objet ;
  • une cible ;
  • et une des quatre réactions (ON/OFF, ON/OFF1, OFF/ON, OFF/ON1)

Il suffit de les intégrer dans une page et de les grouper avec trois objets Genially (images, formes, textes etc), et le tour est joué ! ATTENTION, il faut que les trois éléments soient dans la page et qu’ils appartiennent chacun à un groupe pour que cela fonctionne ! Pensez aussi à activer l’option Glisser éléments dans les paramètres de votre Genially.

Dans la dernière version (du 03/06/20), c’est le centre de l’objet qui est repéré sur toute la surface de la cible. Les éléments réactions peuvent tous être utilisés dans la page car sont ils indépendants les uns des autres, mai sils ont des comportements différents :

  • ON/OFF, visible au début, disparaît quand l’objet est sur la cible et réapparaît quand on l’enlève ;
  • ON/OFF1, visible au début, disparaît définitivement ;
  • OFF/ON, invisible au début, apparaît quand l’objet est sur la cible et redisparaît quand on l’enlève ;
  • OFF/ON1, invisible au début, apparaît et reste affiché.

Bientôt la vidéo de cette nouvelle version !


DND10++, le drag and drop multiple

Les besoins grandissant (et on ne vous dit pas tout !), nous avons développé une deuxième version permettant de créer jusqu’à 51 associations. Le principe est le même que celui de la version précédente, mais il vous faut taper une petite ligne de code afin de définir le nombre d’associations désirées. Quand les X associations sont réalisées, l’élément à afficher apparaît. Ainsi vous pouvez générer des exercices ou des énigmes nécessitant de retrouver une chronologie, de classer des objets, des étiquettes (texte à trous)...

Le tutoriel complet à partir de l’exemple du tableau à double-entrée.

Note : cette vidéo n’a pas de son.

Valérie Perreaut a conçu cette vidéo-tutoriel très claire avec un exemple d’objets multiples et nombre plus restreint de cibles, et configuration de la rétroaction finale.


DNDX, X drag and drop indépendants

Évolution du DND10, le DNDX permet de créer 20 associations indépendantes. À chacune d’elles correspond un groupe à afficher. En jouant avec les groupements (les A ensemble, l’objet On ou la cible Cn avec l’affichage An-1...) on génère des animations intéressantes.

Valérie Perreaut propose une utilisation du DNDx sous forme d’exerciseur donnant un feedback positif ou négatif pour chaque proposition.

Dans ce second tutoriel, elle combine le DNDx au DND10 pour ajouter un feedback global.

Un outil combinable à d’autres

Le DND peut bien sûr être combiné avec tous les autres outils Genially. En voici un bel exemple de Benjamin Lagarrigue (lien direct.), qui exploite conjointement le Couise de S’CAPE et le DND simple pour le final (à la réussite du quiz, apparition d’une clé qui permet d’ouvrir un coffre).

Il est possible également de combiner le DND, toutes versions confondues, à notre YouX qui permet de bloquer le déplacement d’un objet selon une seule direction : un tutoriel vidéo est présent dans l’article dédié au YouX.

Autres tutoriels video

  • Notre webinaire du 10 juin 2020 explique entre autres l’utilisation de cet outil. La vidéo est chapitrée : il vous suffit de cliquer sur le nom de l’outil sur le post-it jaune pour accéder au passage recherché.
  • En Polonais par Agnieszka Kubica et Joanna Wasilewska (Mishmash tips)
  • En espagnol par GoodatMaths