How to create a “spot the difference” campaign?

Sébastien Desprez -

Disclaimer: Any step that is not referred here is similar to any standard Qualifio campaign.

Prepare the ground by creating or selecting an image that contains an object or a tiny difference (compared to another similar picture) that you want the participants to spot. Split it into pieces of identical size.

Create a Quiz (or Chrono Quiz) campaign.

The, go to the Questions step, and apply the following settings: 

  • Choose the “standard choice by clickable image” type of question.
  • Your question has to be something like “Where is this object in the image?” If possible, add an illustration of the object the participants are supposed to look for. For example, if your question is “Where is this watch in the image?”, add a photo of the watch in question.
  • Choose a number of answers equivalent to the number of pieces you split the original image into.
  • For each answer, insert a piece of the image. This has to be done from left to right and from to bottom.
  • Don’t forget to mark the image that contains the right answer as the “right answer”.
  • Select the option “mask the labels”.
  • Your answers have to be aligned along a number of columns that matches the number of pieces from left to right. In this example, four columns have been created as there are 16 pieces that compose the image in total. (For a correct mobile display, we recommend two or three columns.)

 

Go back to the Look and feel step and insert this piece of code into the CSS tab (if you have two, three or four columns):

 

.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);}

 

This will delete the margins between the pieces, making the cut invisible.

Powered by Zendesk