4 days ago
An easy-to-follow guide on making an interactive Hidden Objects game (code samples included)
Summarize
Did you enjoy playing hide-and-seek as a child, trying to find all your friends in the backyard? Or perhaps you spent hours searching for Waldo in magazines of the same name? It's time to bring that experience to your audience's emails with our new interactive game, Hidden Objects. We’ll not only demonstrate how to play but also show you how to create your own games.
How this game works
The game mechanics are quite simple. You need to find all the objects in the picture. Clicking on an object removes it from the picture and fills a counter for that object, which shows how many more similar objects need to be found. There are several groups of objects, and once you've found them all, you'll see the game's final message.
With this game, you can diversify your email marketing by:
- creating themed emails with the game, timed to coincide with various holidays (Easter, New Year, Halloween, etc.);
- giving promo codes, discounts, and other gifts to those who complete the game;
- teasing products through the final message and objects to be found in the picture;
- and much more.
Using our guide, you’ll create a game comprising:
- an AMP version of the game;
- a kinetic version, built with HTML5 and CSS3; and
- a fallback version for clients whose email does not support interactivity.
The HTML version contains the kinetic (HTML5 and CSS3) version that serves as the main version and will be shown when the client’s email supports HTML5 and CSS3, with a fallback for those subscribers whose email does not support kinetic content. The AMP version will be shown if the client’s email supports AMP and will override the HTML version.
Now, let’s get down to business and create our game.
AMP version
First, we start with our AMP version. You need a one-column structure for which you must set the option “include it in AMP HTML” only, so it is visible only in AMP HTML.
After that, add an HTML block to this structure and paste this code.
<style amp-custom>
.find-items-amp .game-bg { position: relative; } .find-items-amp .game-bg label { display: block; position: absolute; width: 25px; height: 25px; background-repeat: no-repeat; background-position: center center; background-size: contain; } .find-items-amp .object-1, .find-items-amp .object-2, .find-items-amp .object-3, .find-items-amp .object-4 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img01.png); } .find-items-amp .object-1 { top: 16%; left: 0; transform: rotate(62deg); } .find-items-amp .object-2 { top: auto; left: auto; bottom: 22%; right: 3%; } .find-items-amp .object-3 { top: 56%; left: 45%; } .find-items-amp .object-4 { top: 75%; left: 0; transform: rotate(115deg); } .find-items-amp .object-5, .find-items-amp .object-6, .find-items-amp .object-7, .find-items-amp .object-8 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img02.png); } .find-items-amp .object-5 { top: 84%; left: 35%; } .find-items-amp .object-6 { top: 29%; right: 2%; left: auto; transform: scaleX(-1); } .find-items-amp .object-7 { top: 59%; left: 67%; transform: scaleX(-1); } .find-items-amp .object-8 { top: 11%; left: 22%; } .find-items-amp .object-9, .find-items-amp .object-10, .find-items-amp .object-11 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img03.png); } .find-items-amp .object-9 { top: 56%; left: 5%; } .find-items-amp .object-10 { top: auto; left: 59%; bottom: 18%; transform: rotate(116deg); } .find-items-amp .object-11 { top: auto; left: 68%; bottom: 9%; } .find-items-amp .object-12, .find-items-amp .object-13 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img04.png); } .find-items-amp .object-12 { top: 6%; left: 81%; transform: rotate(74deg); } .find-items-amp .object-13 { top: 68%; left: 23%; } .find-items-amp .object-14 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img05.png); top: 83%; left: 55%; } .find-items-amp .object-15 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img06.png); top: 75%; left: 20%; } .find-items-amp .example { display: flex; justify-content: center; align-items: center; text-align: center; } .find-items-amp .example div { margin: 15px 5px 0; } .find-items-amp .example-img { display: block; width: 50px; height: 50px; border: 1px solid #333; border-radius: 50%; padding: 5px; box-sizing: border-box; } .find-items-amp .example-img img { width:35px;height:auto;} .find-items-amp .example-text { display: block; padding-top: 5px; } .find-items-amp .done { opacity: 0.5; } .find-items-amp .result { text-align: center; padding: 15px 0 0; } @media only screen and (max-width: 600px) { .find-items-amp .example { flex-wrap: wrap; } .find-items-amp .game-bg label { width: 20px; height: 20px; } }
</style>
<div class="find-items-amp">
<div class="game-container">
<div class="game-bg">
<amp-img height="387" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/bg4.jpg" width="560" alt=""></amp-img>
<label class="object-1"></label>
<label class="object-2"></label>
<label class="object-3"></label>
<label class="object-4"></label>
<label class="object-5"></label>
<label class="object-6"></label>
<label class="object-7"></label>
<label class="object-8"></label>
<label class="object-9"></label>
<label class="object-10"></label>
<label class="object-11"></label>
<label class="object-12"></label>
<label class="object-13"></label>
<label class="object-14"></label>
<label class="object-15"></label>
</div>
<div class="example">
<div>
<span class="example-img">
<amp-img layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img01.png" width="50" alt="" height="50"></amp-img>
</span>
<p class="example-text">
<b>
0
</b> /4
</p>
</div>
<div>
<span class="example-img">
<amp-img layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img02.png" width="50" alt="" height="50"></amp-img>
</span>
<p class="example-text">
<b>
0
</b> /4
</p>
</div>
<div>
<span class="example-img">
<amp-img alt="" height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img03.png" width="50"></amp-img>
</span>
<p class="example-text">
<b>
0
</b> /3
</p>
</div>
<div>
<span class="example-img">
<amp-img alt="" height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img04.png" width="50"></amp-img>
</span>
<p class="example-text">
<b>
0
</b> /2
</p>
</div>
<div>
<span class="example-img">
<amp-img width="50" alt="" height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img05.png"></amp-img>
</span>
<p class="example-text">
<b>
0
</b> /1
</p>
</div>
<div>
<span class="example-img">
<amp-img height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img06.png" width="50" alt=""></amp-img>
</span>
<p class="example-text">
<b>
0
</b> /1
</p>
</div>
</div>
</div>
<div>
<h2 style="padding-bottom:15px">
Congratulations!
</h2>
<p>
You've earned yourself a sparkling reward! Get 15%OFF with the code GAME.
</p>
</div>
</div>
Here’s what it looks like now. You have the basic layout of the game.
The game now includes a main image, elements to find, a list of things to find, and a message after the game ends.
All hidden elements are created using label tags with the following classes:
The items that need to be found already have their own style code, and it looks like this (please note that the values are given in % so that the game can be adapted for mobile devices):
To make the game playable, we need to make items clickable. We'll do this using attributes added to each element that needs to be found. These attributes look like this:
tabindex="1" id="object-1" on="tap:AMP.setState({ unit1: +unit1+1}),object-1.hide" role="button"
This line consists of the following vital parts:
- tabindex="1" is the attribute required when using on="tap:" if the tag we're adding it to isn't a button;
- on="tap:" is the click event handler;
- role="button" is the attribute used to indicate that the element will be used as a button. In AMP, it's required along with on="tap:" if the tag we're adding it to isn't a button;
- AMP.setState({ }) is a special AMP syntax for creating variables;
- unit1 is the variable we use to store the number of identical elements the recipient clicked (dragonflies, ladybugs, etc.); and
- object-1.hide hides the element that was just clicked using its ID.
To avoid having to manually write each line for each element, simply replace this part of the code with the one below.
<label tabindex="1" id="object-1" on="tap:AMP.setState({ unit1: +unit1+1}),object-1.hide" role="button" class="object-1"></label>
<label id="object-2" on="tap:AMP.setState({ unit1: +unit1+1}),object-2.hide" role="button" tabindex="1" class="object-2"></label>
<label id="object-3" on="tap:AMP.setState({ unit1: +unit1+1}),object-3.hide" role="button" tabindex="1" class="object-3"></label>
<label id="object-4" on="tap:AMP.setState({ unit1: +unit1+1}),object-4.hide" role="button" tabindex="1" class="object-4"></label>
<label role="button" tabindex="1" id="object-5" on="tap:AMP.setState({ unit2: +unit2+1}),object-5.hide" class="object-5"></label>
<label id="object-6" on="tap:AMP.setState({ unit2: +unit2+1}),object-6.hide" role="button" tabindex="1" class="object-6"></label>
<label id="object-7" on="tap:AMP.setState({ unit2: +unit2+1}),object-7.hide" role="button" tabindex="1" class="object-7"></label>
<label on="tap:AMP.setState({ unit2: +unit2+1}),object-8.hide" role="button" tabindex="1" id="object-8" class="object-8"></label>
<label on="tap:AMP.setState({ unit3: +unit3+1}),object-9.hide" role="button" tabindex="1" id="object-9" class="object-9"></label>
<label on="tap:AMP.setState({ unit3: +unit3+1}),object-10.hide" role="button" tabindex="1" id="object-10" class="object-10"></label>
<label tabindex="1" id="object-11" on="tap:AMP.setState({ unit3: +unit3+1}),object-11.hide" role="button" class="object-11"></label>
<label role="button" tabindex="1" id="object-12" on="tap:AMP.setState({ unit4: +unit4+1}),object-12.hide" class="object-12"></label>
<label id="object-13" on="tap:AMP.setState({ unit4: +unit4+1}),object-13.hide" role="button" tabindex="1" class="object-13"></label>
<label id="object-14" on="tap:AMP.setState({ unit5: +unit5+1}),object-14.hide" role="button" tabindex="1" class="object-14"></label>
<label id="object-15" on="tap:AMP.setState({ unit6: +unit6+1}),object-15.hide" role="button" tabindex="1" class="object-15"></label>
Next, we need to create indicators that will show the number of elements found. To do this, replace the entire div class="example" with the following code:
<div class="example">
<div [class]="unit1>=4 ? 'done' : ''">
<span class="example-img">
<amp-img layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img01.png" width="50" alt="" height="50"></amp-img>
</span>
<p class="example-text">
<b [text]="+unit1">
0
</b> /4
</p>
</div>
<div [class]="unit2>=4 ? 'done' : ''">
<span class="example-img">
<amp-img layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img02.png" width="50" alt="" height="50"></amp-img>
</span>
<p class="example-text">
<b [text]="+unit2">
0
</b> /4
</p>
</div>
<div [class]="unit3>=3 ? 'done' : ''">
<span class="example-img">
<amp-img alt="" height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img03.png" width="50"></amp-img>
</span>
<p class="example-text">
<b [text]="+unit3">
0
</b> /3
</p>
</div>
<div [class]="unit4>=2 ? 'done' : ''">
<span class="example-img">
<amp-img alt="" height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img04.png" width="50"></amp-img>
</span>
<p class="example-text">
<b [text]="+unit4">
0
</b> /2
</p>
</div>
<div [class]="unit5>=1 ? 'done' : ''">
<span class="example-img">
<amp-img width="50" alt="" height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img05.png"></amp-img>
</span>
<p class="example-text">
<b [text]="+unit5">
0
</b> /1
</p>
</div>
<div [class]="unit6>=1 ? 'done' : ''">
<span class="example-img">
<amp-img height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img06.png" width="50" alt=""></amp-img>
</span>
<p class="example-text">
<b [text]="+unit6">
0
</b> /1
</p>
</div>
</div>
There are two important steps in this code. First, we add [text]="+unit1" to all <b> tags, where:
- [text] is a special amp attribute that modifies the text content of an element;
- unit1 is a variable that stores the number of elements found – each type requires its own variable; and
- + converts the value to a number (null becomes 0).
This replaces everything inside the <b> tag, 0 in our example, with the value of the corresponding variable.
The second step is that we add classes to change the color of the indicators when all elements from a group are collected using [class]="unit1>=4 ? 'done' : ''".
This entry checks if the variable is greater than or equal to 4, then sets the class "done"; otherwise, no class. The variable name and the number "4" are unique for each group.
So, the game is almost done, objects are clickable, and we can see how many and what items the recipient has found. The last thing we need to do is to display the end-of-game message. To do this, you need to add the following attributes to the block with the result class (copy and paste):
hidden [hidden]="+unit1 != 4 || +unit2!=4 || +unit3!= 3 || +unit4!=2 || +unit5 != 1 || +unit6!=1"
The hidden attribute hides the block by default. The [hidden] attribute describes the display condition. It lists all the variables of the groups of hidden elements and the number of elements to be found. Until they equal the maximum number, the block will be hidden.
If you want to change the texts to your own, replace these texts with the ones you prefer.
Next, you need to add the following attribute to the class="game-container" block:
[hidden]="+unit1 >= 4 && +unit2>=4 && +unit3 >= 3 && +unit4>=2 && +unit5 >= 1 && +unit6>=1"
In this case, it's the other way around: as soon as the variables reach the maximum value, the game block will be hidden. So, instead of the game, a message will appear.
To change the main image of the game, replace this link here:
To change the objects recipients must find, replace this link for each object:
You also need to replace these links in the style code, as they are responsible for displaying the objects on top of the background image.
Important note: Game customization only covers replacing text and images. The number of objects to find should not be adjusted, as this could break the game's logic.
This completes the creation of the AMP version. Here is the full code so that you can check whether you have done everything correctly according to the guide:
<style amp-custom>
.find-items-amp .game-bg { position: relative; } .find-items-amp .game-bg label { display: block; position: absolute; width: 25px; height: 25px; background-repeat: no-repeat; background-position: center center; background-size: contain; } .find-items-amp .object-1, .find-items-amp .object-2, .find-items-amp .object-3, .find-items-amp .object-4 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img01.png); } .find-items-amp .object-1 { top: 16%; left: 0; transform: rotate(62deg); } .find-items-amp .object-2 { top: auto; left: auto; bottom: 22%; right: 3%; } .find-items-amp .object-3 { top: 56%; left: 45%; } .find-items-amp .object-4 { top: 75%; left: 0; transform: rotate(115deg); } .find-items-amp .object-5, .find-items-amp .object-6, .find-items-amp .object-7, .find-items-amp .object-8 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img02.png); } .find-items-amp .object-5 { top: 84%; left: 35%; } .find-items-amp .object-6 { top: 29%; right: 2%; left: auto; transform: scaleX(-1); } .find-items-amp .object-7 { top: 59%; left: 67%; transform: scaleX(-1); } .find-items-amp .object-8 { top: 11%; left: 22%; } .find-items-amp .object-9, .find-items-amp .object-10, .find-items-amp .object-11 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img03.png); } .find-items-amp .object-9 { top: 56%; left: 5%; } .find-items-amp .object-10 { top: auto; left: 59%; bottom: 18%; transform: rotate(116deg); } .find-items-amp .object-11 { top: auto; left: 68%; bottom: 9%; } .find-items-amp .object-12, .find-items-amp .object-13 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img04.png); } .find-items-amp .object-12 { top: 6%; left: 81%; transform: rotate(74deg); } .find-items-amp .object-13 { top: 68%; left: 23%; } .find-items-amp .object-14 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img05.png); top: 83%; left: 55%; } .find-items-amp .object-15 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img06.png); top: 75%; left: 20%; } .find-items-amp .example { display: flex; justify-content: center; align-items: center; text-align: center; } .find-items-amp .example div { margin: 15px 5px 0; } .find-items-amp .example-img { display: block; width: 50px; height: 50px; border: 1px solid #333; border-radius: 50%; padding: 5px; box-sizing: border-box; } .find-items-amp .example-img img { width:35px;height:auto;} .find-items-amp .example-text { display: block; padding-top: 5px; } .find-items-amp .done { opacity: 0.5; } .find-items-amp .result { text-align: center; padding: 15px 0 0; } @media only screen and (max-width: 600px) { .find-items-amp .example { flex-wrap: wrap; } .find-items-amp .game-bg label { width: 20px; height: 20px; } }
</style>
<div class="find-items-amp">
<div [hidden]="+unit1 >= 4 && +unit2>=4 && +unit3 >= 3 && +unit4>=2 && +unit5 >= 1 && +unit6>=1" class="game-container">
<div class="game-bg">
<amp-img alt="" height="387" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/bg4.jpg" width="560"></amp-img>
<label id="object-1" on="tap:AMP.setState({ unit1: +unit1+1}),object-1.hide" role="button" tabindex="1" class="object-1"></label>
<label id="object-2" on="tap:AMP.setState({ unit1: +unit1+1}),object-2.hide" role="button" tabindex="1" class="object-2"></label>
<label id="object-3" on="tap:AMP.setState({ unit1: +unit1+1}),object-3.hide" role="button" tabindex="1" class="object-3"></label>
<label on="tap:AMP.setState({ unit1: +unit1+1}),object-4.hide" role="button" tabindex="1" id="object-4" class="object-4"></label>
<label role="button" tabindex="1" id="object-5" on="tap:AMP.setState({ unit2: +unit2+1}),object-5.hide" class="object-5"></label>
<label id="object-6" on="tap:AMP.setState({ unit2: +unit2+1}),object-6.hide" role="button" tabindex="1" class="object-6"></label>
<label id="object-7" on="tap:AMP.setState({ unit2: +unit2+1}),object-7.hide" role="button" tabindex="1" class="object-7"></label>
<label on="tap:AMP.setState({ unit2: +unit2+1}),object-8.hide" role="button" tabindex="1" id="object-8" class="object-8"></label>
<label role="button" tabindex="1" id="object-9" on="tap:AMP.setState({ unit3: +unit3+1}),object-9.hide" class="object-9"></label>
<label tabindex="1" id="object-10" on="tap:AMP.setState({ unit3: +unit3+1}),object-10.hide" role="button" class="object-10"></label>
<label id="object-11" on="tap:AMP.setState({ unit3: +unit3+1}),object-11.hide" role="button" tabindex="1" class="object-11"></label>
<label tabindex="1" id="object-12" on="tap:AMP.setState({ unit4: +unit4+1}),object-12.hide" role="button" class="object-12"></label>
<label id="object-13" on="tap:AMP.setState({ unit4: +unit4+1}),object-13.hide" role="button" tabindex="1" class="object-13"></label>
<label on="tap:AMP.setState({ unit5: +unit5+1}),object-14.hide" role="button" tabindex="1" id="object-14" class="object-14"></label>
<label on="tap:AMP.setState({ unit6: +unit6+1}),object-15.hide" role="button" tabindex="1" id="object-15" class="object-15"></label>
</div>
<div class="example">
<div [class]="unit1>=4 ? 'done' : ''">
<span class="example-img">
<amp-img height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img01.png" width="50" alt=""></amp-img>
</span>
<p class="example-text">
<b [text]="+unit1">
0
</b> /4
</p>
</div>
<div [class]="unit2>=4 ? 'done' : ''">
<span class="example-img">
<amp-img width="50" alt="" height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img02.png"></amp-img>
</span>
<p class="example-text">
<b [text]="+unit2">
0
</b> /4
</p>
</div>
<div [class]="unit3>=3 ? 'done' : ''">
<span class="example-img">
<amp-img alt="" height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img03.png" width="50"></amp-img>
</span>
<p class="example-text">
<b [text]="+unit3">
0
</b> /3
</p>
</div>
<div [class]="unit4>=2 ? 'done' : ''">
<span class="example-img">
<amp-img height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img04.png" width="50" alt=""></amp-img>
</span>
<p class="example-text">
<b [text]="+unit4">
0
</b> /2
</p>
</div>
<div [class]="unit5>=1 ? 'done' : ''">
<span class="example-img">
<amp-img alt="" height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img05.png" width="50"></amp-img>
</span>
<p class="example-text">
<b [text]="+unit5">
0
</b> /1
</p>
</div>
<div [class]="unit6>=1 ? 'done' : ''">
<span class="example-img">
<amp-img height="50" layout="responsive" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img06.png" width="50" alt=""></amp-img>
</span>
<p class="example-text">
<b [text]="+unit6">
0
</b> /1
</p>
</div>
</div>
</div>
<div [hidden]="+unit1 != 4 || +unit2!=4 || +unit3!= 3 || +unit4!=2 || +unit5 != 1 || +unit6!=1" hidden class="result">
<h2 style="padding-bottom:15px">
Congratulations!
</h2>
<p>
You’ve earned yourself a sparkling reward! Get 15%OFF with the code GAME.
</p>
</div>
</div>
Kinetic version built with HTML5 and CSS3
Now it's time to create the kinetic or interactive HTML version, built with HTML5 and CSS3. Add another empty one-column structure that we place below our AMP version. Select it and pick the “Include in HTML only” option.
Next, add an HTML block to this structure and paste this code:
<style>
.find-items-html .game-bg { position: relative; } .find-items-html .game-bg label { display: block; position: absolute; width: 25px; height: 25px; background-repeat: no-repeat; background-position: center center; background-size: contain; } .find-items-html .object-1,
.find-items-html .object-2,
.find-items-html .object-3,
.find-items-html .object-4 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img01.png); } .find-items-html .object-1 { top: 16%; left: 0; transform: rotate(62deg); } .find-items-html .object-2 { top: auto; left: auto; bottom: 22%; right: 3%; } .find-items-html .object-3 { top: 56%; left: 45%; } .find-items-html .object-4 { top: 75%; left: 0; transform: rotate(115deg); } .find-items-html .object-5,
.find-items-html .object-6,
.find-items-html .object-7,
.find-items-html .object-8 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img02.png); } .find-items-html .object-5 { top: 84%; left: 35%; } .find-items-html .object-6 { top: 29%; right: 2%; left: auto; transform: scaleX(-1); } .find-items-html .object-7 { top: 59%; left: 67%; transform: scaleX(-1); } .find-items-html .object-8 { top: 11%; left: 22%; } .find-items-html .object-9,
.find-items-html .object-10,
.find-items-html .object-11 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img03.png); } .find-items-html .object-9 { top: 56%; left: 5%; } .find-items-html .object-10 { top: auto; left: 59%; bottom: 18%; transform: rotate(116deg); } .find-items-html .object-11 { top: auto; left: 68%; bottom: 9%; } .find-items-html .object-12,
.find-items-html .object-13 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img04.png); } .find-items-html .object-12 { top: 6%; left: 81%; transform: rotate(74deg); } .find-items-html .object-13 { top: 68%; left: 23%; } .find-items-html .object-14 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img05.png); top: 83%; left: 55%; } .find-items-html .object-15 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img06.png); top: 75%; left: 20%; } .find-items-html .example { display: flex; justify-content: center; align-items: center; text-align: center; } .find-items-html .example div { margin: 15px 5px 0; } .find-items-html .example-img { display: block; width: 50px; height: 50px; border: 1px solid #333; border-radius: 50%; padding: 5px; box-sizing: border-box; } .find-items-html .example-img img { width:35px;height:auto;}
.find-items-html .example-text { display: block; padding-top: 5px; }
.find-items-html .result { display: none; text-align: center; padding: 15px 0 0; }
.find-items-html .example-text b { display: none; }
.find-items-html .example-text .example-1-0,
.find-items-html .example-text .example-2-0,
.find-items-html .example-text .example-3-0,
.find-items-html .example-text .example-4-0,
.find-items-html .example-text .example-5-0,
.find-items-html .example-text .example-6-0 { display: inline-block; }
@media only screen and (max-width: 600px) {
.find-items-html .example { flex-wrap: wrap; }
.find-items-html .game-bg label { width: 20px; height: 20px; }
}
#input-1:checked~* .object-1,
#input-2:checked~* .object-2,
#input-3:checked~* .object-3,
#input-4:checked~* .object-4,
#input-5:checked~* .object-5,
#input-6:checked~* .object-6,
#input-7:checked~* .object-7,
#input-8:checked~* .object-8,
#input-9:checked~* .object-9,
#input-10:checked~* .object-10,
#input-11:checked~* .object-11,
#input-12:checked~* .object-12,
#input-13:checked~* .object-13,
#input-14:checked~* .object-14,
#input-15:checked~* .object-15 { display: none; }
.groupe-1:checked~* .example-text .example-1-0,
.groupe-2:checked~* .example-text .example-2-0,
.groupe-3:checked~* .example-text .example-3-0,
.groupe-4:checked~* .example-text .example-4-0,
.groupe-5:checked~* .example-text .example-5-0,
.groupe-6:checked~* .example-text .example-6-0 { display: none !important; }
.groupe-1:checked~* .example-text .example-1-1,
.groupe-2:checked~* .example-text .example-2-1,
.groupe-3:checked~* .example-text .example-3-1,
.groupe-4:checked~* .example-text .example-4-1,
.groupe-5:checked~* .example-text .example-5-1,
.groupe-6:checked~* .example-text .example-6-1 { display: inline-block; }
.groupe-1:checked~.groupe-1:checked~* .example-text .example-1-1,
.groupe-2:checked~.groupe-2:checked~* .example-text .example-2-1,
.groupe-3:checked~.groupe-3:checked~* .example-text .example-3-1,
.groupe-4:checked~.groupe-4:checked~* .example-text .example-4-1 { display: none !important; }
.groupe-1:checked~.groupe-1:checked~* .example-text .example-1-2,
.groupe-2:checked~.groupe-2:checked~* .example-text .example-2-2,
.groupe-3:checked~.groupe-3:checked~* .example-text .example-3-2,
.groupe-4:checked~.groupe-4:checked~* .example-text .example-4-2 { display: inline-block; }
.groupe-1:checked~.groupe-1:checked~.groupe-1:checked~* .example-text .example-1-2,
.groupe-2:checked~.groupe-2:checked~.groupe-2:checked~* .example-text .example-2-2,
.groupe-3:checked~.groupe-3:checked~.groupe-3:checked~* .example-text .example-3-2 { display: none !important; }
.groupe-1:checked~.groupe-1:checked~.groupe-1:checked~* .example-text .example-1-3,
.groupe-2:checked~.groupe-2:checked~.groupe-2:checked~* .example-text .example-2-3,
.groupe-3:checked~.groupe-3:checked~.groupe-3:checked~* .example-text .example-3-3 { display: inline-block; }
.groupe-1:checked~.groupe-1:checked~.groupe-1:checked~.groupe-1:checked~* .example-text .example-1-3,
.groupe-2:checked~.groupe-2:checked~.groupe-2:checked~.groupe-2:checked~* .example-text .example-2-3 { display: none !important; }
.groupe-1:checked~.groupe-1:checked~.groupe-1:checked~.groupe-1:checked~* .example-text .example-1-4,
.groupe-2:checked~.groupe-2:checked~.groupe-2:checked~.groupe-2:checked~* .example-text .example-2-4 { display: inline-block; }
.groupe-1:checked~.groupe-1:checked~.groupe-1:checked~.groupe-1:checked~* .example-1,
.groupe-2:checked~.groupe-2:checked~.groupe-2:checked~.groupe-2:checked~* .example-2,
.groupe-3:checked~.groupe-3:checked~.groupe-3:checked~* .example-3,
.groupe-4:checked~.groupe-4:checked~* .example-4,
.groupe-5:checked~* .example-5,
.groupe-6:checked~* .example-6 { opacity: 0.5; }
#input-1:checked~#input-2:checked~#input-3:checked~#input-4:checked~#input-5:checked~#input-6:checked~#input-7:checked~#input-8:checked~#input-9:checked~#input-10:checked~#input-11:checked~#input-12:checked~#input-13:checked~#input-14:checked~#input-15:checked~.game-container { display: none; }
#input-1:checked~#input-2:checked~#input-3:checked~#input-4:checked~#input-5:checked~#input-6:checked~#input-7:checked~#input-8:checked~#input-9:checked~#input-10:checked~#input-11:checked~#input-12:checked~#input-13:checked~#input-14:checked~#input-15:checked~.result { display: block; }
</style>
<div class="find-items-html">
<input id="input-1" name="objects" type="checkbox" class="groupe-1" style="display:none">
<input id="input-2" name="objects" type="checkbox" class="groupe-1" style="display:none">
<input type="checkbox" id="input-3" name="objects" class="groupe-1" style="display:none">
<input id="input-4" name="objects" type="checkbox" class="groupe-1" style="display:none">
<input name="objects" type="checkbox" id="input-5" class="groupe-2" style="display:none">
<input name="objects" type="checkbox" id="input-6" class="groupe-2" style="display:none">
<input type="checkbox" id="input-7" name="objects" class="groupe-2" style="display:none">
<input id="input-8" name="objects" type="checkbox" class="groupe-2" style="display:none">
<input name="objects" type="checkbox" id="input-9" class="groupe-3" style="display:none">
<input name="objects" type="checkbox" id="input-10" class="groupe-3" style="display:none">
<input id="input-11" name="objects" type="checkbox" class="groupe-3" style="display:none">
<input id="input-12" name="objects" type="checkbox" class="groupe-4" style="display:none">
<input name="objects" type="checkbox" id="input-13" class="groupe-4" style="display:none">
<input id="input-14" name="objects" type="checkbox" class="groupe-5" style="display:none">
<input name="objects" type="checkbox" id="input-15" class="groupe-6" style="display:none">
<div class="game-container">
<div class="game-bg">
<img alt="" height="387" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/bg4.jpg" width="560" class="adapt-img">
<label for="input-1" class="object-1"></label>
<label for="input-2" class="object-2"></label>
<label for="input-3" class="object-3"></label>
<label for="input-4" class="object-4"></label>
<label for="input-5" class="object-5"></label>
<label for="input-6" class="object-6"></label>
<label for="input-7" class="object-7"></label>
<label for="input-8" class="object-8"></label>
<label for="input-9" class="object-9"></label>
<label for="input-10" class="object-10"></label>
<label for="input-11" class="object-11"></label>
<label for="input-12" class="object-12"></label>
<label for="input-13" class="object-13"></label>
<label for="input-14" class="object-14"></label>
<label for="input-15" class="object-15"></label>
</div>
<div class="example">
<div class="example-1">
<span class="example-img">
<img src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img01.png" width="40" alt="" height="40">
</span>
<p class="example-text">
<b class="example-1-0">
0
</b>
<b class="example-1-1">
1
</b>
<b class="example-1-2">
2
</b>
<b class="example-1-3">
3
</b>
<b class="example-1-4">
4
</b> /4
</p>
</div>
<div class="example-2">
<span class="example-img">
<img alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img02.png" width="40">
</span>
<p class="example-text">
<b class="example-2-0">
0
</b>
<b class="example-2-1">
1
</b>
<b class="example-2-2">
2
</b>
<b class="example-2-3">
3
</b>
<b class="example-2-4">
4
</b> /4
</p>
</div>
<div class="example-3">
<span class="example-img">
<img alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img03.png" width="40">
</span>
<p class="example-text">
<b class="example-3-0">
0
</b>
<b class="example-3-1">
1
</b>
<b class="example-3-2">
2
</b>
<b class="example-3-3">
3
</b> /3
</p>
</div>
<div class="example-4">
<span class="example-img">
<img alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img04.png" width="40">
</span>
<p class="example-text">
<b class="example-4-0">
0
</b>
<b class="example-4-1">
1
</b>
<b class="example-4-2">
2
</b> /2
</p>
</div>
<div class="example-5">
<span class="example-img">
<img src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img05.png" width="40" alt="" height="40">
</span>
<p class="example-text">
<b class="example-5-0">
0
</b>
<b class="example-5-1">
1
</b> /1
</p>
</div>
<div class="example-6">
<span class="example-img">
<img src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img06.png" width="40" alt="" height="40">
</span>
<p class="example-text">
<b class="example-6-0">
0
</b>
<b class="example-6-1">
1
</b> /1
</p>
</div>
</div>
</div>
<div class="result">
<h2 style="padding-bottom:15px">
Congratulations!
</h2>
<p>
You've earned yourself a sparkling reward! Get 15%OFF with the code GAME.
</p>
</div>
</div>
The HTML version has a similar structure, but all interactivity is achieved using input tags linked to label tags using the for="" attribute.
All input tags for buttons are placed at the very beginning. Don't move them, as we use the CSS selector "~" in the styles, which is closely linked to the code structure, and changing the layout may cause the game to stop working.
The layout of hidden elements hasn't changed; only the for attributes have been added.
Each input tag responsible for these elements is assigned classes that indicate the group to which the input belongs. This makes it easier to display the number of elements found in each group.
It's worth noting that the indicator layout in the HTML version is different. All the numbers needed to be displayed for each group have been added to the code.
The style code also specifies that, depending on the number of elements found, the corresponding number should be displayed in each group:
A separate style code is used to hide elements after clicking:
Here's what the styles look like to change the color of the indicators for groups that have already been collected:
Finally, the following styles are used to display the result and hide the game. All input tags are listed here:
To change the background image of the game, replace this link.
To change the images for your objects, replace this link for each object.
Also, replace these links in the style code to change the object images on top of the background image with your own images.
To change the final message texts, just replace these with the ones you want.
Fallback version
The last thing we need to create is our fallback version. A fallback version is required for clients whose email does not support HTML5 and CSS3, or AMP. This version of the game is pretty simple, as it will have a layout similar to our mechanics, but without interactivity. Clicking on elements will lead to the web version of the email.
In this example, the fallback will contain a background image and a list of elements to find.
We continue to work on the kinetic HTML block that we already have. Insert this piece of code between the </style> and the <div class="find-items-html"> tags in the HTML version you already created previously:
<!--[if !mso]><!-- -->
<input checked id="fallback_ctrl" type="checkbox" class="fallback_ctrl" style="display: none !important; mso-hide: all">
<!--<![endif]-->
<!-- FALLBACK -->
<span id="fallback" class="fallback">
<table width="100%">
<tbody>
<tr align="center">
<td>
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank"><img alt="" height="387" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/bg4.jpg" width="560" class="adapt-img"></a>
</td>
</tr>
<tr>
<td style="padding-top: 20px">
<table align="center" width="60%">
<tbody>
<tr>
<td align="center">
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank" style="text-decoration: none; color: #333"><img alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img01.png" width="40"></a>
</td>
<td align="center">
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank" style="text-decoration: none; color: #333"><img alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img02.png" width="40"></a>
</td>
<td align="center">
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank" style="color: #333; text-decoration: none"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img03.png" width="40" alt="" height="40"></a>
</td>
<td align="center">
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank" style="text-decoration: none; color: #333"><img alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img04.png" width="40"></a>
</td>
<td align="center">
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank" style="color: #333; text-decoration: none"><img alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img05.png" width="40"></a>
</td>
<td align="center">
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank" style="text-decoration: none; color: #333"><img width="40" alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img06.png"></a>
</td>
</tr>
<tr>
<td align="center" esd-text="true" class="esd-text" style="padding-top: 5px">
<p>
0/4
</p>
</td>
<td esd-text="true" align="center" class="esd-text" style="padding-top: 5px">
<p>
0/4
</p>
</td>
<td align="center" esd-text="true" class="esd-text" style="padding-top: 5px">
<p>
0/3
</p>
</td>
<td align="center" esd-text="true" class="esd-text" style="padding-top: 5px">
<p>
0/2
</p>
</td>
<td align="center" esd-text="true" class="esd-text" style="padding-top: 5px">
<p>
0/1
</p>
</td>
<td align="center" esd-text="true" class="esd-text" style="padding-top: 5px">
<p>
0/1
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="display: none; mso-hide: all">
At the very end of the code, insert this piece:
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
To change the link and the main background image, just replace the links here with the ones you want.
To change element images and the link, all replacements should be done here (square for your website link and arrow for the image link). Keep in mind that you must replace all links for each element in this block.
The last thing left to do is to add styles to display only the version suitable for the client’s email. Copy these styles at the end of the style tag:
/* --- */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input.fallback_ctrl:checked~.container {
display: block !important;
}
input.fallback_ctrl:checked~#fallback {
display: none !important;
}
}
[owa] .container {
display: none !important;
}
[class~="x_container"] {
display: none !important;
}
[id~="x_fallback"] {
display: block !important;
}
@media screen and (max-width: 600px) {
body[data-outlook-cycle] #fallback {
display: block !important;
}
body[data-outlook-cycle] .container {
display: none !important;
}
}
This input is used to show or hide the fallback by using styles. It’s enclosed in comments <!--[if !mso]><!--> … <!--<![endif]--> to ensure that it’s hidden in the client’s Outlook Desktop.
Also worth noting is the <span id=“fallback” class=“fallback”></span> section, which contains all our fallback layout. It should have a simple, tabular layout suitable for Outlook. In our example, this is a table with links to the web version. You can create your own layout but just make sure it’s understandable for Outlook.
While these styles don’t have clear rules for each email client, there is a set of hacks that can be used to control the display:
- styles that start with [owa] are used for Outlook;
- the [class~="x_container"] styles are needed for Outlook in case [owa] does not work;
- body[data-outlook-cycle] styles are needed for Outlook on iOS and Android mobile devices; and
- mso-hide:all; is used for Outlook.com.
The full code
Here is the full code of the game, including the kinetic HTML version and the fallback version:
<style>
.find-items-html .game-bg { position: relative; } .find-items-html .game-bg label { display: block; position: absolute; width: 25px; height: 25px; background-repeat: no-repeat; background-position: center center; background-size: contain; } .find-items-html .object-1, .find-items-html .object-2, .find-items-html .object-3, .find-items-html .object-4 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img01.png); } .find-items-html .object-1 { top: 16%; left: 0; transform: rotate(62deg); } .find-items-html .object-2 { top: auto; left: auto; bottom: 22%; right: 3%; } .find-items-html .object-3 { top: 56%; left: 45%; } .find-items-html .object-4 { top: 75%; left: 0; transform: rotate(115deg); } .find-items-html .object-5, .find-items-html .object-6, .find-items-html .object-7, .find-items-html .object-8 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img02.png); } .find-items-html .object-5 { top: 84%; left: 35%; } .find-items-html .object-6 { top: 29%; right: 2%; left: auto; transform: scaleX(-1); } .find-items-html .object-7 { top: 59%; left: 67%; transform: scaleX(-1); } .find-items-html .object-8 { top: 11%; left: 22%; } .find-items-html .object-9, .find-items-html .object-10, .find-items-html .object-11 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img03.png); } .find-items-html .object-9 { top: 56%; left: 5%; } .find-items-html .object-10 { top: auto; left: 59%; bottom: 18%; transform: rotate(116deg); } .find-items-html .object-11 { top: auto; left: 68%; bottom: 9%; } .find-items-html .object-12, .find-items-html .object-13 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img04.png); } .find-items-html .object-12 { top: 6%; left: 81%; transform: rotate(74deg); } .find-items-html .object-13 { top: 68%; left: 23%; } .find-items-html .object-14 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img05.png); top: 83%; left: 55%; } .find-items-html .object-15 { background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img06.png); top: 75%; left: 20%; } .find-items-html .example { display: flex; justify-content: center; align-items: center; text-align: center; } .find-items-html .example div { margin: 15px 5px 0; } .find-items-html .example-img { display: block; width: 50px; height: 50px; border: 1px solid #333; border-radius: 50%; padding: 5px; box-sizing: border-box; } .find-items-html .example-img img { width:35px;height:auto;} .find-items-html .example-text { display: block; padding-top: 5px; } .find-items-html .result { display: none; text-align: center; padding: 15px 0 0; } .find-items-html .example-text b { display: none; } .find-items-html .example-text .example-1-0, .find-items-html .example-text .example-2-0, .find-items-html .example-text .example-3-0, .find-items-html .example-text .example-4-0, .find-items-html .example-text .example-5-0, .find-items-html .example-text .example-6-0 { display: inline-block; } @media only screen and (max-width: 600px) { .find-items-html .example { flex-wrap: wrap; } .find-items-html .game-bg label { width: 20px; height: 20px; } } #input-1:checked~* .object-1, #input-2:checked~* .object-2, #input-3:checked~* .object-3, #input-4:checked~* .object-4, #input-5:checked~* .object-5, #input-6:checked~* .object-6, #input-7:checked~* .object-7, #input-8:checked~* .object-8, #input-9:checked~* .object-9, #input-10:checked~* .object-10, #input-11:checked~* .object-11, #input-12:checked~* .object-12, #input-13:checked~* .object-13, #input-14:checked~* .object-14, #input-15:checked~* .object-15 { display: none; } .groupe-1:checked~* .example-text .example-1-0, .groupe-2:checked~* .example-text .example-2-0, .groupe-3:checked~* .example-text .example-3-0, .groupe-4:checked~* .example-text .example-4-0, .groupe-5:checked~* .example-text .example-5-0, .groupe-6:checked~* .example-text .example-6-0 { display: none !important; } .groupe-1:checked~* .example-text .example-1-1, .groupe-2:checked~* .example-text .example-2-1, .groupe-3:checked~* .example-text .example-3-1, .groupe-4:checked~* .example-text .example-4-1, .groupe-5:checked~* .example-text .example-5-1, .groupe-6:checked~* .example-text .example-6-1 { display: inline-block; } .groupe-1:checked~.groupe-1:checked~* .example-text .example-1-1, .groupe-2:checked~.groupe-2:checked~* .example-text .example-2-1, .groupe-3:checked~.groupe-3:checked~* .example-text .example-3-1, .groupe-4:checked~.groupe-4:checked~* .example-text .example-4-1 { display: none !important; } .groupe-1:checked~.groupe-1:checked~* .example-text .example-1-2, .groupe-2:checked~.groupe-2:checked~* .example-text .example-2-2, .groupe-3:checked~.groupe-3:checked~* .example-text .example-3-2, .groupe-4:checked~.groupe-4:checked~* .example-text .example-4-2 { display: inline-block; } .groupe-1:checked~.groupe-1:checked~.groupe-1:checked~* .example-text .example-1-2, .groupe-2:checked~.groupe-2:checked~.groupe-2:checked~* .example-text .example-2-2, .groupe-3:checked~.groupe-3:checked~.groupe-3:checked~* .example-text .example-3-2 { display: none !important; } .groupe-1:checked~.groupe-1:checked~.groupe-1:checked~* .example-text .example-1-3, .groupe-2:checked~.groupe-2:checked~.groupe-2:checked~* .example-text .example-2-3, .groupe-3:checked~.groupe-3:checked~.groupe-3:checked~* .example-text .example-3-3 { display: inline-block; } .groupe-1:checked~.groupe-1:checked~.groupe-1:checked~.groupe-1:checked~* .example-text .example-1-3, .groupe-2:checked~.groupe-2:checked~.groupe-2:checked~.groupe-2:checked~* .example-text .example-2-3 { display: none !important; } .groupe-1:checked~.groupe-1:checked~.groupe-1:checked~.groupe-1:checked~* .example-text .example-1-4, .groupe-2:checked~.groupe-2:checked~.groupe-2:checked~.groupe-2:checked~* .example-text .example-2-4 { display: inline-block; } .groupe-1:checked~.groupe-1:checked~.groupe-1:checked~.groupe-1:checked~* .example-1, .groupe-2:checked~.groupe-2:checked~.groupe-2:checked~.groupe-2:checked~* .example-2, .groupe-3:checked~.groupe-3:checked~.groupe-3:checked~* .example-3, .groupe-4:checked~.groupe-4:checked~* .example-4, .groupe-5:checked~* .example-5, .groupe-6:checked~* .example-6 { opacity: 0.5; } #input-1:checked~#input-2:checked~#input-3:checked~#input-4:checked~#input-5:checked~#input-6:checked~#input-7:checked~#input-8:checked~#input-9:checked~#input-10:checked~#input-11:checked~#input-12:checked~#input-13:checked~#input-14:checked~#input-15:checked~.game-container { display: none; } #input-1:checked~#input-2:checked~#input-3:checked~#input-4:checked~#input-5:checked~#input-6:checked~#input-7:checked~#input-8:checked~#input-9:checked~#input-10:checked~#input-11:checked~#input-12:checked~#input-13:checked~#input-14:checked~#input-15:checked~.result { display: block; } /* --- */ @media screen and (-webkit-min-device-pixel-ratio: 0) { input.fallback_ctrl:checked~.container { display: block !important; } input.fallback_ctrl:checked~#fallback { display: none !important; } } [owa] .container { display: none !important; } [class~="x_container"] { display: none !important; } [id~="x_fallback"] { display: block !important; } @media screen and (max-width: 600px) { body[data-outlook-cycle] #fallback { display: block !important; } body[data-outlook-cycle] .container { display: none !important; } }
</style>
<!--[if !mso]><!-- -->
<input checked id="fallback_ctrl" type="checkbox" class="fallback_ctrl" style="mso-hide:all;display:none !important">
<!--<![endif]-->
<!-- FALLBACK -->
<span id="fallback" class="fallback">
<table width="100%">
<tbody>
<tr align="center">
<td>
<a target="_blank" href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml"><img height="387" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/bg4.jpg" width="560" alt="" class="adapt-img"></a>
</td>
</tr>
<tr>
<td style="padding-top:20px">
<table align="center" width="60%">
<tbody>
<tr>
<td align="center">
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank" style="text-decoration:none;color:#333"><img height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img01.png" width="40" alt=""></a>
</td>
<td align="center">
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank" style="text-decoration:none;color:#333"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img02.png" width="40" alt="" height="40"></a>
</td>
<td align="center">
<a target="_blank" href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" style="color:#333;text-decoration:none"><img height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img03.png" width="40" alt=""></a>
</td>
<td align="center">
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank" style="text-decoration:none;color:#333"><img alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img04.png" width="40"></a>
</td>
<td align="center">
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank" style="color:#333;text-decoration:none"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img05.png" width="40" alt="" height="40"></a>
</td>
<td align="center">
<a href="https://viewstripo.email/a3206557-b2b0-4f02-ad46-e3982117814a1759239870424?type=amphtml" target="_blank" style="text-decoration:none;color:#333"><img width="40" alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img06.png"></a>
</td>
</tr>
<tr>
<td align="center" esd-text="true" class="esd-text" style="padding-top:5px">
<p>
0/4
</p>
</td>
<td align="center" esd-text="true" class="esd-text" style="padding-top:5px">
<p>
0/4
</p>
</td>
<td align="center" esd-text="true" class="esd-text" style="padding-top:5px">
<p>
0/3
</p>
</td>
<td align="center" esd-text="true" class="esd-text" style="padding-top:5px">
<p>
0/2
</p>
</td>
<td align="center" esd-text="true" class="esd-text" style="padding-top:5px">
<p>
0/1
</p>
</td>
<td esd-text="true" align="center" class="esd-text" style="padding-top:5px">
<p>
0/1
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="display:none;mso-hide:all">
<div class="find-items-html">
<input id="input-1" name="objects" type="checkbox" class="groupe-1" style="display:none">
<input name="objects" type="checkbox" id="input-2" class="groupe-1" style="display:none">
<input id="input-3" name="objects" type="checkbox" class="groupe-1" style="display:none">
<input id="input-4" name="objects" type="checkbox" class="groupe-1" style="display:none">
<input id="input-5" name="objects" type="checkbox" class="groupe-2" style="display:none">
<input id="input-6" name="objects" type="checkbox" class="groupe-2" style="display:none">
<input id="input-7" name="objects" type="checkbox" class="groupe-2" style="display:none">
<input id="input-8" name="objects" type="checkbox" class="groupe-2" style="display:none">
<input id="input-9" name="objects" type="checkbox" class="groupe-3" style="display:none">
<input id="input-10" name="objects" type="checkbox" class="groupe-3" style="display:none">
<input type="checkbox" id="input-11" name="objects" class="groupe-3" style="display:none">
<input name="objects" type="checkbox" id="input-12" class="groupe-4" style="display:none">
<input id="input-13" name="objects" type="checkbox" class="groupe-4" style="display:none">
<input name="objects" type="checkbox" id="input-14" class="groupe-5" style="display:none">
<input id="input-15" name="objects" type="checkbox" class="groupe-6" style="display:none">
<div class="game-container">
<div class="game-bg">
<img width="560" alt="" height="387" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/bg4.jpg" class="adapt-img">
<label for="input-1" class="object-1"></label>
<label for="input-2" class="object-2"></label>
<label for="input-3" class="object-3"></label>
<label for="input-4" class="object-4"></label>
<label for="input-5" class="object-5"></label>
<label for="input-6" class="object-6"></label>
<label for="input-7" class="object-7"></label>
<label for="input-8" class="object-8"></label>
<label for="input-9" class="object-9"></label>
<label for="input-10" class="object-10"></label>
<label for="input-11" class="object-11"></label>
<label for="input-12" class="object-12"></label>
<label for="input-13" class="object-13"></label>
<label for="input-14" class="object-14"></label>
<label for="input-15" class="object-15"></label>
</div>
<div class="example">
<div class="example-1">
<span esd-text="true" class="example-img esd-text">
<img height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img01.png" width="40" alt="">
</span>
<p esd-text="true" class="example-text esd-text">
<b class="example-1-0">
0
</b>
<b class="example-1-1">
1
</b>
<b class="example-1-2">
2
</b>
<b class="example-1-3">
3
</b>
<b class="example-1-4">
4
</b> /4
</p>
</div>
<div class="example-2">
<span esd-text="true" class="example-img esd-text">
<img src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img02.png" width="40" alt="" height="40">
</span>
<p esd-text="true" class="example-text esd-text">
<b class="example-2-0">
0
</b>
<b class="example-2-1">
1
</b>
<b class="example-2-2">
2
</b>
<b class="example-2-3">
3
</b>
<b class="example-2-4">
4
</b> /4
</p>
</div>
<div class="example-3">
<span esd-text="true" class="example-img esd-text">
<img alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img03.png" width="40">
</span>
<p esd-text="true" class="example-text esd-text">
<b class="example-3-0">
0
</b>
<b class="example-3-1">
1
</b>
<b class="example-3-2">
2
</b>
<b class="example-3-3">
3
</b> /3
</p>
</div>
<div class="example-4">
<span esd-text="true" class="example-img esd-text">
<img alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img04.png" width="40">
</span>
<p esd-text="true" class="example-text esd-text">
<b class="example-4-0">
0
</b>
<b class="example-4-1">
1
</b>
<b class="example-4-2">
2
</b> /2
</p>
</div>
<div class="example-5">
<span esd-text="true" class="example-img esd-text">
<img height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img05.png" width="40" alt="">
</span>
<p esd-text="true" class="example-text esd-text">
<b class="example-5-0">
0
</b>
<b class="example-5-1">
1
</b> /1
</p>
</div>
<div class="example-6">
<span esd-text="true" class="example-img esd-text">
<img alt="" height="40" src="https://zlnfb.stripocdn.email/content/guids/CABINET_aff90b85c8a8e4cf0f08b48920dc4ebf7b7c5e148d4d57c07d34d3dbc8e8f57e/images/img06.png" width="40">
</span>
<p esd-text="true" class="example-text esd-text">
<b class="example-6-0">
0
</b>
<b class="example-6-1">
1
</b> /1
</p>
</div>
</div>
</div>
<div esd-text="true" class="result esd-text">
<h2 style="padding-bottom:15px">
Congratulations!
</h2>
<p>
You've earned yourself a sparkling reward! Get 15%OFF with the code GAME.
</p>
</div>
</div>
</div>
<!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
If you would like to save time, you can use this complete version, where all the elements are already combined. You can simply adapt it by adding your own content, images, and styles.
Wrapping up
Although the game may at first glance seem complex to create, under the hood, it has fairly simple and logical code that won't take much time to create. Furthermore, the potential for modification and adaptation for various events is truly enormous. We hope this guide has helped you understand how the game works and will enable you to add interactive mechanics to your emails.
Create exceptional emails with Stripo