How to create a "hidden object" campaign

Tabata Vossen -

Note: Steps that are not referred to in this article are to be configured the same way as in any Qualifio campaign ;-)

Preliminary preparation: create or select an image containing an object that you want your participants to find and split it into pieces of identical size.

Here, the selected image has been split into 16 equal pieces:

At step ‘Question’ of your campaign’s creation, configure your questions as follows:

  1. Type: Standard choice by clickable image;
  2. Your question: Where is a certain object from the image and possibly a photo of the object. In the example, it is “Where is this watch?” with a photo of the watch;
  3. Then choose a number of answers equal to the number of pieces of your image. In the example, it is 16 questions;
  4. Insert a piece of the image in each of the answers, from left to right and from top to bottom. Tick the piece of the image that contains the object concerned to mark it as the ‘right answer’. In our example, each of the 16 pieces will be inserted into each of the 16 answers. Piece No.1 goes in question No.1, piece No. 2 goes in question No. 2 and so on. Piece No. 8 contains the watch and is inserted into answer No. 8 and ticked as the ‘correct answer’.

5. Tick the option ‘Hide’ the labels.

6. Choose the alignment of your answers on a number of columns by which your number of pieces is divisible. In the example, four columns have been created, as the 16 pieces can be divided by four.

7. For optimised mobile display we recommend two or three columns, in this case, an image split into nine or six pieces, for instance.

Tip: If you’re allowing multiple entries or want to make it more complicated for people playing again, insert a large number of questions and then choose to display the questions randomly and on a selection of questions only. The example had 49 questions with random questions appearing for five questions.

This way, you can create as many questions as you want for your campaign.

Finally at stage ‘Appearance’ of your campaign’s creation, insert this small 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);}
.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);}

This code will delete the margins between the different image pieces, making the cut invisible to the naked eye.

Powered by Zendesk