Comment créer une campagne “trouvez la différence” ?

Sébastien Desprez -

Avertissement : Toute étape qui n’est pas mentionnée ici est à réaliser de la même manière que pour une campagne Qualifio classique.

 

Préparez le terrain en créant ou sélectionnant une image qui contient un objet ou une petite différence (par rapport à une autre image similaire) que vous voulez que les participants trouvent. Découpez ensuite cette image en plusieurs morceaux de taille égale.

 

Allez à l’étape 4 - Questions de la création de votre campagne, et configurez vos réglages comme suit :

 

  • Type de question : “choix par image cliquable”
  • Votre question doit ressembler à “Où se trouve tel objet caché ?” ou “Cliquez sur la différence”
  • Créez autant de réponses que vous avez de morceaux composant votre photo de base ;
  • Pour chaque réponse, insérez un morceau de l’image. Cela doit être fait de gauche à droit et de haut en bas ;
  • N’oubliez pas de sélectionner l’image qui contient la bonne réponse et marquez-la comme “bonne réponse” ;
  • Sélectionnez l’option “masquer les labels” ;
  • Choisissez d’aligner vos réponses sur un nombre de colonnes correspondant au nombre de morceaux d’images allant de gauche à droite. (Pour un affichage optimal sur mobile, nous recommandons un maximum de deux ou trois colonnes.)

 

Rendez-vous maintenant à l’étape 2 - Apparence de la création de votre campagne, et insérez ce bout de code dans l’onglet CSS (si vous avez deux, trois ou quatre colonnes) :

 

.answerPic.col_2 {width: 50%;}.answerPic.col_3 {width: 33%;}.answerPic.col_4 {width: 25%;}.answerPic {display: block; float: left !important; margin: 0px;}.answerPic img {max-width: 100%; margin: 0px; border-width: 0px; border-radius: 0px;}.answerPic img:hover {box-shadow: inherit;}.answerPic img {transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1);}.answerPic img:hover {transform: translateY(0px) scale(1); -webkit-transform: translateY(0px) scale(1); -moz-transform: translateY(0px) scale(1);}

 

Ce code va supprimer les marges situées entre les différents morceaux d’image, rendant ainsi la coupe invisible.

Réalisé par Zendesk