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.
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:
The overall size of the original image (height and width) should be nicely divisible by the number of columns and rows you want to have, i.e. you should be able to easily calculate exactly how many pixels the image pieces will have afterwards. If you find yourself playing with half pixels, we suggest resizing the original image so that all pieces have the same size. This will help ensure the proper display of the altered image afterwards.
Create the hidden object game
You should start by creating a Classic quiz or Chrono quiz campaign:
In the Questions step, you can configure your settings as follows:
- Select the Clickable images question type:
- Enter your question explaining the hidden object, so 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:
- For statistics, each answer must have a label ("image 07" legend in the picture below). However, you should hide these labels in the game:
- 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.
- In the Settings step, you can decide whether the users can play more than once:
Remove image margin (CSS)
At the Look & feel step of your campaign, you can insert this small piece of code into the Custom code & tags > 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.