T.V
- The "Spot the difference" campaign is a classic, which can be reimagined with Qualifio. With this type of campaign, participants have to spot the difference between two pictures. In some cases, they have to do so before time runs out.
Prerequisite: You need to create two versions of the same picture, with the exception of one little detail. The second image, which your participants will have to find the difference in, must be split into pieces of identical size.
Can you find the difference? Test yourself in the fun campaign below:
Pro tip: Images don't have to be nearly identical, but we recommend it for an extra level of difficulty ;)
Should I create a Quiz or a Chrono Quiz campaign?
- Select the Quiz or Contest format to create a simple "Spot the difference" campaign. You will be able to add a timer, but it will not be taken into account when drawing the winners (it's only for fun!)
- Select the Chrono Quiz if you want to add a timer and take it into account when drawing the winner(s).
Creating the game
This slideshow provides easy to follow, step-by-step instructions, demonstrating how to create a "Spot the difference" campaign using Qualifio:
When in your campaign, go to Questions and apply the following settings.
For your original picture
- Choose the Clickable images type of question.
- Add your question text.
- From the Hint menu, pick the Image option and upload your original image.
For your picture containing the difference
- Create as many possible answers as there are pieces of your image. E.g. if you chose to split your image into 16 different pieces (4x4), you should add 16 possible answers to your question.
- For each answer, upload a piece of your picture. This has to be done from left to right and from top to bottom. E.g. your first possible answer has to be illustrated with the upper left piece of your picture, then you should move on to the second piece on the right side of the first one, etc.
- Indicate which one is the right answer.
- You must enter a label for each possible answer. Below the answers, select the option to Hide the labels.
- Choose the right number of columns for your answers. In this example, you'd need 4 columns as the picture has been split into 16 pieces.
- Please note: For a great mobile display, we recommend a maximum of 3 columns.
The ideal image would be an image in 600x400, cut in 3 columns and 2 rows, for a total of 6 pieces (each piece has a size of 200x200).
CSS trick
Once done, you might notice there is a margin between the pieces of your picture. To make those invisible, go to Look & Feel and click Change look and feel. Copy this CSS trick and paste it into the Advanced settings > CSS tab:
.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;}
We hope you’ll find the process of creating your own Spot The Difference campaign straightforward. If not, our experts should be able to help!