Comment créer une campagne de type "objet caché" ?

Tabata Vossen -

Veuillez noter que les étapes non mentionnées ci-dessous se paramètrent comme pour toute campagne classique dans Qualifio ;-)

Au préalable, vous devez avoir créé une image contenant un élément que vous voulez faire retrouver par vos participants et l'avoir découpée en plusieurs morceaux de taille identique. Comme dans cet exemple réalisé par Hello Agency pour Decathlon :

decathlon1

Dans cet exemple, l’image a été découpée en 16 morceaux.

decathlon2

L’objet à retrouver dans chaque question était soigneusement isolé dans son entièreté (détouré) dans une seule sous-image, inséré à côté de la question. Ici la montre.

A l’étape “Questions” de votre campagne, paramétrez vos questions comme suit :

  1. Type : Choix par image cliquable classique.
  2. Votre question : Où est tel élément de l’image + éventuellement une photo de l’élément (dans l’exemple ici "Où est cette montre ?" + photo de la montre) ;
  3. Ensuite choisissez un nombre de réponses égales au nombre de morceaux de votre image (dans l’exemple : 16 questions) ;
  4. Insérez un morceau de l’image dans chacune des réponses, dans l’ordre gauche vers la droite, et du haut vers le bas. Cocher le morceau de l’image qui contient l’élément à retrouver comme ‘réponse correcte’. (Donc dans notre exemple : chacun des 16 morceaux sera inséré dans chacune des 16 réponsesLe morceau #1 va dans la question #1, le morceau #2 ira dans la question #2 et ainsi de suite… Le morceau #8 contient la montre et qui est inséré dans la réponse#8 est cochées comme "réponse correcte".)
  5. Cocher l’option “Masquer” les labels ;
  6. Choisissez l’alignement de vos réponses sur un nombre de colonnes par lequel votre nombre de morceaux est divisible. (Dans l’exemple on a choisi 4 colonnes puisque 16 morceaux pouvaient facilement se diviser par 4. Nous vous conseillons plutôt 2 ou 3 colonnes pour un affichage optimal sur mobile et donc dans ce cas une image découpée en 9 ou 6 morceaux par exemple.)

Astuce : si vous permettez des participations multiples ou que vous voulez rendre l’exercice plus compliqué pour ceux qui rejouent; insérez beaucoup de questions puis choisissez d’afficher les questions de façon aléatoire et sur une sélection de questions seulement. (Dans l’exemple, il y avait 49 questions avec apparition des questions aléatoires sur 5 questions.)

Créez de cette façon autant de questions que vous souhaitez mettre dans votre campagne.

Finalement à l’étape “Apparence” de la création de votre campagne, insérez ce bout de code dans l’onglet CSS :

Si vous avez 2, 3 ou 4 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);}
.questionset .custom figure {padding: 0;} .questionset .custom figure img {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);}
.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: translateY(0px) scale(1);-webkit-transform: translateY(0px) scale(1);-moz-transform: translateY(0px) scale(1);}

Ce code effacera les marges entre vos différents morceaux d’images, la découpe sera invisible à l’oeil nu.

Réalisé par Zendesk