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 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 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% !important;}.answerPic.col_3 {width: 33% !important;}.answerPic.col_4 {width: 25% !important;}.answerPic.col_5 {width: 20% !important;}.answerPic {display: block; float: left !important;}.answerPic img {border-width: 0px; border-radius: 0px;}.questionset .custom figure {padding: 0;}.answerPic img {border-radius: 0px !important;-moz-border-radius: 0px !important;-webkit-border-radius: 0px !important;max-width: 100% !important;}.questionset .answerPic img:hover{transform: none;-webkit-transform: none;-moz-transform: none;}div.answerPic figure {padding: 0px;}.answerPic img {width: 100%; border-radius: 0px !important;-moz-border-radius: 0px !important;-webkit-border-radius: 0px !important;}div.answerPic img:hover {animation: none;-webkit-animation: none;-moz-animation: none;-o-animation: none;-ms-animation: none;position: relative;z-index: 1;box-shadow: 0 0 5px rgba(0,0,0,0.5);}.answerPic {z-index: auto;}

 

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

Réalisé par Zendesk