How to make a Hidden Object game

Tabata Vossen -

In a hidden object game, users search a large image for a smaller item that is hidden somewhere in the said image. Using a custom image and our quiz format, you can create your own hidden object game to be published and shared online. This game can help your brand awareness strategy, potentially increasing product recognition.

VIEW DEMO →

What kind of image will I need to create a Hidden Object game?

  • The main image with the hidden object.
  • A virality image to share on social media channels (optional).

The main image of the game will have to be edited and split into smaller pieces (tiles) of identical size before uploading it to the platform. You can use Photoshop or IMG online to do so.

In this example, the main image was split into 16 equal tiles:

Create the hidden object game

You should start by creating a Classic quiz or Chrono quiz campaign:

Screenshot_2020-01-23_at_10.05.15.png

In the 'Questions' step, you can configure your settings as follows:

  • Select the 'Clickable images' question type:

Screenshot_2020-01-23_at_10.06.31.png

  • Enter your question explaining what the hidden object is so that the participant knows what they're looking for.
  • Upload the tiles of your image as answers. Start with the top left one, then move on horizontally to the right, and then vertically to the bottom until all the tiles are uploaded. The number of possible answers should be equal to the number of tiles you have split your image into (in the example above, 16).
  • Mark the correct area by clicking 'Correct answer' next to it and assign a number of points:

Screenshot_2020-01-23_at_09.42.02.png

  • Each answer must have a label ('image 07' legend in the picture below), for statistics purpose. However, you should hide these labels in the game:

Screenshot_2020-01-23_at_09.42.36.png

  • Choose an alignment option. Your answers should be aligned based on a number of columns by which your number of image tiles is divisible. In the example of 16 image tiles, those can be aligned on four columns.

Note: The optimal number of columns for mobile devices is three or four.

Screenshot_2020-01-23_at_09.50.20.png

  • In the 'Settings' step, you can decide whether the users can play more than once:

Screenshot_2020-01-23_at_09.53.34.png

Remove image margin (CSS)

At the ‘Look & Feel’ step of your campaign, you can insert this small piece of code 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;}

This code will delete the space between the image tiles, making the cut invisible to the naked eye.

Note: This code is only applicable if you have 2-4 columns.

Final tip: A hidden object campaign may contain several games, with each question displaying a hidden object scene. Take advantage of that by creating a narrative (e.g. treasure hunt, race around the world, etc.) that will keep the participant interested in completing the campaign.