Logic puzzles are another way to spice up your emails by making them more engaging and memorable. This game is sure to be a hit with those who like things organized and clear. It’s time to show you how to create one.
How this game works
First, let’s look at how your recipients will play this game. The game requires subscribers to select four emojis from a single group (e.g., clothing, animals, etc.). After selecting four items, a “Check” button appears. If the selection is correct, the selected items will be highlighted in green. If the selection is incorrect, nothing happens.
After all the groups have been found, a screen will appear with a notification message.
And that’s pretty much it! You can use this game to make your emails more unique by providing some of the following features:
- using a riddle to promote your new products, with the final invitation to buy the new product appearing once the game is finished;
- granting promo codes, gifts, and discounts in a fun way;
- guessing movies, books, or product features to win prizes;
- building “style capsules.” For example, customers could arrange sneakers, a purse, jeans, and a sweater; or a dress, heels, and lipstick (but not a dress with jeans!). Those who get it right would win a discount.
It’s all up to your imagination.
In this article, we will show you in detail how to create a full-fledged game that is compatible with major email clients, so that all of your subscribers will be able to interact with the game.
To reach the most clients, the following features should be considered:
- AMP version of the game;
- kinetic version, built with HTML5 and CSS3;
- fallback version for email clients that do not support interactivity.
Now, let’s get down to our game creation process.
AMP version
Our game creation starts with a one-column structure that you will need to place in your template and make visible only in AMP HTML.
After that, you can add an HTML block into this structure and paste the following code into this block:
<style amp-custom>
.find-groups-amp { position: relative; } .find-groups-amp .answers-block { display: flex; align-content: flex-start; justify-content: center; align-items: flex-start; flex-wrap: wrap; max-width: 300px; margin: 0 auto; } .find-groups-amp .order-1 { order: 1; } .find-groups-amp .order-2 { order: 2; } .find-groups-amp .order-3 { order: 3; } .find-groups-amp .order-4 { order: 4; } .find-groups-amp .field div, .find-groups-amp .emoji span { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 5px; background-color: #d9d9d9; font-size: 40px; text-align: center; cursor: pointer; } .find-groups-amp .field div { background-color: #92db82; } .find-groups-amp .field { display: flex; justify-content: center; padding: 0 0 5px 0; gap: 5px; } .find-groups-amp .emoji { margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 5px; padding: 0; flex-wrap: wrap; max-width: 300px; } .find-groups-amp .message { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; padding: 20px; z-index: 99; transition-delay: 0.5s; background: #efefef; border-radius: 5px; } .find-groups-amp .curtain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .find-groups-amp .btn { border-radius: 5px; padding: 10px 20px; font-size: 16px; border: 0; margin: 10px 0 0; cursor: pointer; background-color: #f0f0f0; } .find-groups-amp .green { background-color: #31cb4b; color: #ffffff; } .find-groups-amp .gray { background-color: gray; color: #ffffff; } #emoji [option][selected] { outline: 0; } #emoji [option][selected] span { background-color: gray; } @media only screen and (max-width: 600px) { .find-groups-amp .emoji { width: 100%; } .find-groups-amp .field div, .find-groups-amp .emoji span { font-size: 30px; } }
</style>
<div class="find-groups-amp">
<form>
<div style="position:relative">
<div class="answers-block">
<div class="field field-1">
<div>
<span>
👗
</span>
</div>
<div>
<span>
👖
</span>
</div>
<div>
<span>
👙
</span>
</div>
<div>
<span>
👠
</span>
</div>
</div>
<div class="field field-2">
<div>
<span>
🦊
</span>
</div>
<div>
<span>
🐱
</span>
</div>
<div>
<span>
🐭
</span>
</div>
<div>
<span>
🐷
</span>
</div>
</div>
<div class="field field-3">
<div>
<span>
🌹
</span>
</div>
<div>
<span>
🌻
</span>
</div>
<div>
<span>
🌺
</span>
</div>
<div>
<span>
🌼
</span>
</div>
</div>
<div class="field field-4">
<div>
<span>
❄️
</span>
</div>
<div>
<span>
🌈
</span>
</div>
<div>
<span>
☀️
</span>
</div>
<div>
<span>
⛅️
</span>
</div>
</div>
</div>
<amp-selector multiple on="select: AMP.setState({ allSelectedOptions: event.selectedOptions })" id="emoji" layout="container" class="emoji">
<div option="1">
<span>
👗
</span>
</div>
<div option="1">
<span>
👠
</span>
</div>
<div option="4">
<span>
⛅️
</span>
</div>
<div option="2">
<span>
🐭
</span>
</div>
<div option="1">
<span>
👖
</span>
</div>
<div option="2">
<span>
🐷
</span>
</div>
<div option="4">
<span>
❄️
</span>
</div>
<div option="2">
<span>
🦊
</span>
</div>
<div option="3">
<span>
🌺
</span>
</div>
<div option="2">
<span>
🐱
</span>
</div>
<div option="3">
<span>
🌹
</span>
</div>
<div option="3">
<span>
🌻
</span>
</div>
<div option="1">
<span>
👙
</span>
</div>
<div option="3">
<span>
🌼
</span>
</div>
<div option="4">
<span>
🌈
</span>
</div>
<div option="4">
<span>
☀️
</span>
</div>
</amp-selector>
<div hidden class="curtain"></div>
</div>
<p style="text-align:center">
<button type="button" class="btn">
Check
</button>
<button type="button" class="btn">
Check
</button>
<button type="button" class="btn">
Check
</button>
<button type="button" class="btn">
Check
</button>
<button type="button" class="btn">
Check
</button>
</p>
</form>
</div>
The game would then look like this: four lines of emojis with a green background (correct answers), other emojis on a gray background, and five buttons. Don’t worry, we’ll show you how to hide the green emojis and extra buttons later in the guide, and they’ll be only displayed after the recipient correctly assembles one of the groups.
In addition, each group has its own button in the code, and the fifth button represents the case in which the wrong emojis are selected.
First, let’s look at the gray emojis. These were created using an amp-selector and are already clickable.
At its core, an amp-selector is a set of elements from which the recipient can select one or more options (it works like an input checkbox or radio controls).
The amp-selector has several important elements worth mentioning:
- multiple is the attribute that allows multiple selections (by default, the amp-selector component only allows one element to be selected at a time);
- on=“select: AMP.setState({ })” is an event triggered when an element is selected. It allows us to determine how many and which elements are selected;
- allSelectedOptions: event.selectedOptions stores the values from the “option” attributes of all selected elements in the allSelectedOptions variable;
- option=“1” indicates that this option can be selected, while the value 1, 2, 3, and 4 indicates the group to which the emoji belongs.
All selected elements are supported by the highlighted styles that are already in the code and look like this:
Currently, the game allows for multiple emoji selections, but we only need four. We can’t limit the number of selectable elements. Therefore, once four emojis are selected, we simply need to cover the game board with a transparent block so that no further clicks are possible. At the same time, we need a “Check” button to appear.
To do this, we’ll use the class=“curtain” block. It’s currently hidden, so we need to add conditions for it to be visible. To do so, locate the following line:
<div hidden [hidden]="allSelectedOptions.length!=4" class="curtain"></div>
And replace it with this:
This line checks the length of the allSelectedOptions array. Until it is equal to 4, the block remains hidden, but as soon as there are 4 elements, it will be displayed and will not allow the player to select additional emojis.
Next, we need to make the “Check” buttons work. To do this, you need to find the buttons with the code below:
<button [hidden]="allSelectedOptions.join('')!='1111'" hidden on="tap:emoji.clear, AMP.setState({answer_1:1, allSelectedOptions:null, order: +order+1, order_1: +order+1})" type="button" class="btn">
Check
</button>
<button [hidden]="allSelectedOptions.join('')!='2222'" hidden on="tap:emoji.clear, AMP.setState({answer_2:1, allSelectedOptions:null, order: +order+1, order_2: +order+1})" type="button" class="btn">
Check
</button>
<button [hidden]="allSelectedOptions.join('')!='3333'" hidden on="tap:emoji.clear, AMP.setState({answer_3:1, allSelectedOptions:null, order: +order+1, order_3: +order+1})" type="button" class="btn">
Check
</button>
<button [hidden]="allSelectedOptions.join('')!='4444'" hidden on="tap:emoji.clear, AMP.setState({answer_4:1, allSelectedOptions:null, order: +order+1, order_4: +order+1})" type="button" class="btn">
Check
</button>
<button [hidden]="allSelectedOptions.length!=4 || allSelectedOptions.join('')=='1111' || allSelectedOptions.join('')=='2222' || allSelectedOptions.join('')=='3333' || allSelectedOptions.join('')=='4444'" hidden on="tap:emoji.clear, AMP.setState({allSelectedOptions:null})" type="button" class="btn">
Check
</button>
These need to be replaced. The button for the first group of emojis will look like this:
<button [hidden]="allSelectedOptions.join('')!='1111'" hidden on="tap:emojis.clear, AMP.setState({answer_1:1, allSelectedOptions:null, order: +order+1, order_1: +order+1})" type="button" class="btn">
Check
</button>
This code is worth reviewing, so you have the full picture of what part is responsible for each outcome:
- [hidden]=“allSelectedOptions.join(”)!=‘1111’” checks the value of the allSelectedOptions array. If it contains all 1s, this button is displayed. Let us explain how this works: Each emoji has an option attribute with a value of 1, 2, 3, or 4. This value is written here and indicates the group to which the emoji belongs. Therefore, when all emojis from the same group are selected, this button will be displayed;
- on=“tap:” is the click event handler;
- emoji.clear is a method that clears selected elements in the amp-selector; emoji is the amp-selector tag’s ID;
- answer_1 is needed so we know that all the emojis from the first group have been collected. Each button has a variable with its own number: answer_2, answer_3, etc.;
- allSelectedOptions:null clears the array with the values of the selected elements;
- order increments the value by 1 after each group has been collected;
- order_1 writes the current value of the order variable to display this group of emojis in the appropriate order: first if they were collected first, second if they were collected second, and so on. Next, the desired class is added to each result group.
The button for the second group looks like this:
<button [hidden]="allSelectedOptions.join('')!='2222'" hidden on="tap:emojis.clear, AMP.setState({answer_2:1, allSelectedOptions:null, order: +order+1, order_2: +order+1})" type="button" class="btn">
Check
</button>
The third and fourth buttons operate according to the same logic.
The fifth button, which appears when an invalid emoji is selected, looks like this:
<button [hidden]="allSelectedOptions.length!=4 || allSelectedOptions.join('')=='1111' || allSelectedOptions.join('')=='2222' || allSelectedOptions.join('')=='3333' || allSelectedOptions.join('')=='4444'" hidden on="tap:emojis.clear, AMP.setState({allSelectedOptions:null})" type="button" class="btn">
Check
</button>
The following features are worth reviewing here:
- [hidden]=“ is necessary to list all the cases for which the button should be hidden: (allSelectedOptions.length!=4 until 4 emojis are selected, or allSelectedOptions.join(”)==‘1111’ if all emoji from the first group are selected, or allSelectedOptions.join(”)==‘2222’ if all emoji from the second group are selected, etc.). This button is only displayed if four emojis from different groups are selected;
- on=“tap:” is the click event handler;
- emoji.clear is the method that clears selected elements in the amp-selector;
- allSelectedOptions:null is necessary to clear the array containing the values of the selected elements.
Next, we need to make sure the selected emojis are hidden after the recipient identifies the correct group. To do this, we’ll add the [hidden]=“answer_1 == 1” attribute to all emojis in the amp-selector tag, but instead of answer_1, we’ll substitute answer_2, answer_3, or answer_4, depending on the group to which the emoji belongs. These numbers will be the same as the option attribute.
You can then replace the entire amp-selector block, starting from here:
And ending here, with the code below:
<amp-selector id="emoji" layout="container" multiple on="select: AMP.setState({ allSelectedOptions: event.selectedOptions })" class="emoji">
<div option="1" [hidden]="answer_1 == 1">
<span>
👗
</span>
</div>
<div [hidden]="answer_1 == 1" option="1">
<span>
👠
</span>
</div>
<div [hidden]="answer_4 == 1" option="4">
<span>
⛅️
</span>
</div>
<div [hidden]="answer_2 == 1" option="2">
<span>
🐭
</span>
</div>
<div [hidden]="answer_1 == 1" option="1">
<span>
👖
</span>
</div>
<div [hidden]="answer_2 == 1" option="2">
<span>
🐷
</span>
</div>
<div [hidden]="answer_4 == 1" option="4">
<span>
❄️
</span>
</div>
<div [hidden]="answer_2 == 1" option="2">
<span>
🦊
</span>
</div>
<div [hidden]="answer_3 == 1" option="3">
<span>
🌺
</span>
</div>
<div option="2" [hidden]="answer_2 == 1">
<span>
🐱
</span>
</div>
<div option="3" [hidden]="answer_3 == 1">
<span>
🌹
</span>
</div>
<div option="3" [hidden]="answer_3 == 1">
<span>
🌻
</span>
</div>
<div [hidden]="answer_1 == 1" option="1">
<span>
👙
</span>
</div>
<div option="3" [hidden]="answer_3 == 1">
<span>
🌼
</span>
</div>
<div [hidden]="answer_4 == 1" option="4">
<span>
🌈
</span>
</div>
<div [hidden]="answer_4 == 1" option="4">
<span>
☀️
</span>
</div>
</amp-selector>
Next, you need to hide the correct answers. To do this, replace the class=“answers-block” block that starts here:
And ends here with the code below:
<div class="answers-block">
<div hidden [class]="'field field-1 order-'+order_1" [hidden]="answer_1 != 1" class="field field-1">
<div>
<span>
👗
</span>
</div>
<div>
<span>
👖
</span>
</div>
<div>
<span>
👙
</span>
</div>
<div>
<span>
👠
</span>
</div>
</div>
<div [hidden]="answer_2 != 1" hidden [class]="'field field-2 order-'+order_2" class="field field-2">
<div>
<span>
🦊
</span>
</div>
<div>
<span>
🐱
</span>
</div>
<div>
<span>
🐭
</span>
</div>
<div>
<span>
🐷
</span>
</div>
</div>
<div [hidden]="answer_3 != 1" hidden [class]="'field field-3 order-'+order_3" class="field field-3">
<div>
<span>
🌹
</span>
</div>
<div>
<span>
🌻
</span>
</div>
<div>
<span>
🌺
</span>
</div>
<div>
<span>
🌼
</span>
</div>
</div>
<div [class]="'field field-4 order-'+order_4" [hidden]="answer_4 != 1" hidden class="field field-4">
<div>
<span>
❄️
</span>
</div>
<div>
<span>
🌈
</span>
</div>
<div>
<span>
☀️
</span>
</div>
<div>
<span>
⛅️
</span>
</div>
</div>
</div>
- the first block with class=“field field-1” in the code has the following attributes: hidden [hidden]=“answer_1 != 1” [class]=“‘field field-1 order-’+order_1”;
- the second block with class=“field field-2” contains the following: hidden [hidden]=“answer_2 != 1” [class]=“‘field field-2 order-’+order_2” and so on.
The explanation for this is quite simple:
- hidden is an attribute that hides an element;
- [hidden]=“answer_1 != 1” means that until the variable answer_1 is equal to 1, this element will be hidden. Each group has its own variable: answer_1, answer_2, etc.;
- [class]=“‘field field-1 order-’+order_1” appends the value of the variable order_1 to the class to create classes order-1, order-2, etc., and displays the correct answers in the order they were collected by the recipient (each group has its own variable: order_1, order_2, etc.).
The code already contains styles responsible for the display order:
The last thing that needs to be added is a final game message once all the groups are found. Paste the code below before the </form> tag:
<div [hidden]="!answer_1 || !answer_2 || !answer_3 || !answer_4" hidden class="correct-message message">
<div>
<h4 style="padding-bottom:5px;font-size:18px">
You've scored some amazing discounts!
</h4>
<h4 style="padding-bottom:15px;font-size:18px">
<b>15% OFF</b> your next purchase.
</h4>
<h4 style="padding-bottom:15px;font-size:16px">
Use the promo code <b>PRIZE3</b> on our website.
</h4>
</div>
</div>
In this code, [hidden]=“!answer_1 || !answer_2 || !answer_3 || !answer_4” checks the value of all the variables that are responsible for the collected groups, and until they all have a value, the block with the result will be hidden.
The AMP version is set and done. Here’s the full code below so that you can check whether you have done everything correctly.
<style amp-custom>
.find-groups-amp { position: relative; } .find-groups-amp .answers-block { display: flex; align-content: flex-start; justify-content: center; align-items: flex-start; flex-wrap: wrap; max-width: 300px; margin: 0 auto; } .find-groups-amp .order-1 { order: 1; } .find-groups-amp .order-2 { order: 2; } .find-groups-amp .order-3 { order: 3; } .find-groups-amp .order-4 { order: 4; } .find-groups-amp .field div, .find-groups-amp .emoji span { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 5px; background-color: #d9d9d9; font-size: 40px; text-align: center; cursor: pointer; } .find-groups-amp .field div { background-color: #92db82; } .find-groups-amp .field { display: flex; justify-content: center; padding: 0 0 5px 0; gap: 5px; } .find-groups-amp .emoji { margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 5px; padding: 0; flex-wrap: wrap; max-width: 300px; } .find-groups-amp .message { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; padding: 20px; z-index: 99; transition-delay: 0.5s; background: #efefef; border-radius: 5px; } .find-groups-amp .curtain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .find-groups-amp .btn { border-radius: 5px; padding: 10px 20px; font-size: 16px; border: 0; margin: 10px 0 0; cursor: pointer; background-color: #f0f0f0; } .find-groups-amp .green { background-color: #31cb4b; color: #ffffff; } .find-groups-amp .gray { background-color: gray; color: #ffffff; } #emoji [option][selected] { outline: 0; } #emoji [option][selected] span { background-color: gray; } @media only screen and (max-width: 600px) { .find-groups-amp .emoji { width: 100%; } .find-groups-amp .field div, .find-groups-amp .emoji span { font-size: 30px; } }
</style>
<div class="find-groups-amp">
<form esd-text="true" class="esd-text">
<div style="position:relative">
<div class="answers-block">
<div [class]="'field field-1 order-'+order_1" [hidden]="answer_1 != 1" hidden class="field field-1">
<div>
<span>
👗
</span>
</div>
<div>
<span>
👖
</span>
</div>
<div>
<span>
👙
</span>
</div>
<div>
<span>
👠
</span>
</div>
</div>
<div [class]="'field field-2 order-'+order_2" [hidden]="answer_2 != 1" hidden class="field field-2">
<div>
<span>
🦊
</span>
</div>
<div>
<span>
🐱
</span>
</div>
<div>
<span>
🐭
</span>
</div>
<div>
<span>
🐷
</span>
</div>
</div>
<div [class]="'field field-3 order-'+order_3" [hidden]="answer_3 != 1" hidden class="field field-3">
<div>
<span>
🌹
</span>
</div>
<div>
<span>
🌻
</span>
</div>
<div>
<span>
🌺
</span>
</div>
<div>
<span>
🌼
</span>
</div>
</div>
<div [class]="'field field-4 order-'+order_4" [hidden]="answer_4 != 1" hidden class="field field-4">
<div>
<span>
❄️
</span>
</div>
<div>
<span>
🌈
</span>
</div>
<div>
<span>
☀️
</span>
</div>
<div>
<span>
⛅️
</span>
</div>
</div>
</div>
<amp-selector layout="container" multiple on="select: AMP.setState({ allSelectedOptions: event.selectedOptions })" id="emoji" class="emoji">
<div option="1" [hidden]="answer_1 == 1">
<span>
👗
</span>
</div>
<div option="1" [hidden]="answer_1 == 1">
<span>
👠
</span>
</div>
<div option="4" [hidden]="answer_4 == 1">
<span>
⛅️
</span>
</div>
<div option="2" [hidden]="answer_2 == 1">
<span>
🐭
</span>
</div>
<div option="1" [hidden]="answer_1 == 1">
<span>
👖
</span>
</div>
<div option="2" [hidden]="answer_2 == 1">
<span>
🐷
</span>
</div>
<div option="4" [hidden]="answer_4 == 1">
<span>
❄️
</span>
</div>
<div option="2" [hidden]="answer_2 == 1">
<span>
🦊
</span>
</div>
<div option="3" [hidden]="answer_3 == 1">
<span>
🌺
</span>
</div>
<div option="2" [hidden]="answer_2 == 1">
<span>
🐱
</span>
</div>
<div option="3" [hidden]="answer_3 == 1">
<span>
🌹
</span>
</div>
<div option="3" [hidden]="answer_3 == 1">
<span>
🌻
</span>
</div>
<div option="1" [hidden]="answer_1 == 1">
<span>
👙
</span>
</div>
<div option="3" [hidden]="answer_3 == 1">
<span>
🌼
</span>
</div>
<div option="4" [hidden]="answer_4 == 1">
<span>
🌈
</span>
</div>
<div option="4" [hidden]="answer_4 == 1">
<span>
☀️
</span>
</div>
</amp-selector>
<div hidden [hidden]="allSelectedOptions.length!=4" class="curtain"></div>
</div>
<p style="text-align:center">
<button type="button" [hidden]="allSelectedOptions.join('')!='1111'" hidden on="tap:emoji.clear, AMP.setState({answer_1:1, allSelectedOptions:null, order: +order+1, order_1: +order+1})" class="btn">
Check
</button>
<button type="button" [hidden]="allSelectedOptions.join('')!='2222'" hidden on="tap:emoji.clear, AMP.setState({answer_2:1, allSelectedOptions:null, order: +order+1, order_2: +order+1})" class="btn">
Check
</button>
<button type="button" [hidden]="allSelectedOptions.join('')!='3333'" hidden on="tap:emoji.clear, AMP.setState({answer_3:1, allSelectedOptions:null, order: +order+1, order_3: +order+1})" class="btn">
Check
</button>
<button type="button" [hidden]="allSelectedOptions.join('')!='4444'" hidden on="tap:emoji.clear, AMP.setState({answer_4:1, allSelectedOptions:null, order: +order+1, order_4: +order+1})" class="btn">
Check
</button>
<button type="button" [hidden]="allSelectedOptions.length!=4 || allSelectedOptions.join('')=='1111' || allSelectedOptions.join('')=='2222' || allSelectedOptions.join('')=='3333' || allSelectedOptions.join('')=='4444'" hidden on="tap:emoji.clear, AMP.setState({allSelectedOptions:null})" class="btn">
Check
</button>
</p>
<div [hidden]="!answer_1 || !answer_2 || !answer_3 || !answer_4" hidden class="correct-message message">
<div>
<h4 style="padding-bottom: 5px; font-size: 18px">
You've scored some amazing discounts!
</h4>
<h4 style="padding-bottom: 15px; font-size: 18px">
<b>15% OFF</b> your next purchase.
</h4>
<h4 style="padding-bottom: 15px; font-size: 16px">
Use the promo code <b>PRIZE3</b> on our website.
</h4>
</div>
</div>
</form>
</div>
Kinetic version built with HTML5 and CSS3
It’s time to create a kinetic version, which can also be called an interactive HTML version, built with HTML5 and CSS3. We’ll start with another empty one-column structure that we will place below our AMP version. You can begin by selecting it and picking an “Include in HTML only” option.
After that, insert an HTML block into this structure and paste this code:
<style>
@media only screen and (max-width: 600px) { .find-groups-html .emojis { width: 100%; } .find-groups-html .field div, .find-groups-html .emojis span { font-size: 30px; } } .find-groups-html { position: relative; } .find-groups-html .answers-block { display: flex; align-content: flex-start; justify-content: center; align-items: flex-start; flex-wrap: wrap; max-width: 300px; margin: 0 auto; } .find-groups-html .field div, .find-groups-html .emojis span { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 5px; background-color: #d9d9d9; font-size: 40px; text-align: center; cursor: pointer; } .find-groups-html .field div { background-color: #92db82; } .find-groups-html .field { display: none; justify-content: center; padding: 0 0 5px 0; gap: 5px; } .find-groups-html .emojis { margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 5px; padding: 0; flex-wrap: wrap; max-width: 300px; } .find-groups-html .message { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; padding: 20px; z-index: 99; transition-delay: 0.5s; background: #efefef; border-radius: 5px; } .find-groups-html .curtain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .find-groups-html .btn { border-radius: 5px; padding: 10px 20px; font-size: 16px; border: 0; margin: 10px 0 0; cursor: pointer; display: none; background-color: #f0f0f0; } .find-groups-html .green { background-color: #31cb4b; color: #ffffff; } .find-groups-html .gray { background-color: gray; color: #ffffff; } #input_answer_1:checked~* .field-1, #input_answer_2:checked~* .field-2, #input_answer_3:checked~* .field-3, #input_answer_4:checked~* .field-4 { display: flex !important; } #input_answer_1:checked~* .check-1, #input_answer_2:checked~* .check-2, #input_answer_3:checked~* .check-3, #input_answer_4:checked~* .check-4 { display: none !important; } #input_answer_1:checked~* .answer_1, #input_answer_2:checked~* .answer_2, #input_answer_3:checked~* .answer_3, #input_answer_4:checked~* .answer_4 { display: none !important; } #input_1_1:checked~* .label_1_1 span, #input_1_2:checked~* .label_1_2 span, #input_1_3:checked~* .label_1_3 span, #input_1_4:checked~* .label_1_4 span, #input_2_1:checked~* .label_2_1 span, #input_2_2:checked~* .label_2_2 span, #input_2_3:checked~* .label_2_3 span, #input_2_4:checked~* .label_2_4 span, #input_3_1:checked~* .label_3_1 span, #input_3_2:checked~* .label_3_2 span, #input_3_3:checked~* .label_3_3 span, #input_3_4:checked~* .label_3_4 span, #input_4_1:checked~* .label_4_1 span, #input_4_2:checked~* .label_4_2 span, #input_4_3:checked~* .label_4_3 span, #input_4_4:checked~* .label_4_4 span { background-color: gray !important; } #input_answer_1:not(:checked)~#input_answer_2:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_2:checked~* .check-0, #input_answer_1:not(:checked)~#input_answer_3:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_3:checked~* .check-0, #input_answer_1:not(:checked)~#input_answer_4:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .check-0, #input_answer_2:not(:checked)~#input_answer_3:not(:checked)~* .input_2:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_3:checked~* .check-0, #input_answer_2:not(:checked)~#input_answer_4:not(:checked)~* .input_2:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .check-0, #input_answer_3:not(:checked)~#input_answer_4:not(:checked)~* .input_3:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .check-0 { display: inline-block !important; } .input_1:checked~.input_1:checked~.input_1:checked~.input_1:checked~* .check-1, .input_2:checked~.input_2:checked~.input_2:checked~.input_2:checked~* .check-2, .input_3:checked~.input_3:checked~.input_3:checked~.input_3:checked~* .check-3, .input_4:checked~.input_4:checked~.input_4:checked~.input_4:checked~* .check-4 { display: inline-block !important; } .input_1:checked~.input_1:checked~.input_1:checked~.input_1:checked~* .curtain-1, .input_2:checked~.input_2:checked~.input_2:checked~.input_2:checked~* .curtain-2, .input_3:checked~.input_3:checked~.input_3:checked~.input_3:checked~* .curtain-3, .input_4:checked~.input_4:checked~.input_4:checked~.input_4:checked~* .curtain-4 { display: block !important; } #input_answer_1:not(:checked)~#input_answer_2:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_2:checked~* .curtain-0, #input_answer_1:not(:checked)~#input_answer_3:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_3:checked~* .curtain-0, #input_answer_1:not(:checked)~#input_answer_4:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .curtain-0, #input_answer_2:not(:checked)~#input_answer_3:not(:checked)~* .input_2:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_3:checked~* .curtain-0, #input_answer_2:not(:checked)~#input_answer_4:not(:checked)~* .input_2:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .curtain-0, #input_answer_3:not(:checked)~#input_answer_4:not(:checked)~* .input_3:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .curtain-0 { display: block !important; } #input_answer_1:checked~* .curtain-1, #input_answer_2:checked~* .curtain-2, #input_answer_3:checked~* .curtain-3, #input_answer_4:checked~* .curtain-4 { display: none !important; } #input_answer_1:checked~*#input_answer_2:checked~*#input_answer_3:checked~*#input_answer_4:checked~* .correct-message { display: flex !important; }
</style>
<div class="find-groups-html">
<input id="input_answer_1" name="answer" type="checkbox" style="display:none">
<input id="input_answer_2" name="answer" type="checkbox" style="display:none">
<input id="input_answer_3" name="answer" type="checkbox" style="display:none">
<input id="input_answer_4" name="answer" type="checkbox" style="display:none">
<form>
<input id="input_1_1" name="emoji" type="checkbox" class="input_1" style="display:none">
<input id="input_1_2" name="emoji" type="checkbox" class="input_1" style="display:none">
<input id="input_1_3" name="emoji" type="checkbox" class="input_1" style="display:none">
<input id="input_1_4" name="emoji" type="checkbox" class="input_1" style="display:none">
<input id="input_2_1" name="emoji" type="checkbox" class="input_2" style="display:none">
<input id="input_2_2" name="emoji" type="checkbox" class="input_2" style="display:none">
<input id="input_2_3" name="emoji" type="checkbox" class="input_2" style="display:none">
<input id="input_2_4" name="emoji" type="checkbox" class="input_2" style="display:none">
<input id="input_3_1" name="emoji" type="checkbox" class="input_3" style="display:none">
<input id="input_3_2" name="emoji" type="checkbox" class="input_3" style="display:none">
<input id="input_3_3" name="emoji" type="checkbox" class="input_3" style="display:none">
<input id="input_3_4" name="emoji" type="checkbox" class="input_3" style="display:none">
<input id="input_4_1" name="emoji" type="checkbox" class="input_4" style="display:none">
<input id="input_4_2" name="emoji" type="checkbox" class="input_4" style="display:none">
<input id="input_4_3" name="emoji" type="checkbox" class="input_4" style="display:none">
<input id="input_4_4" name="emoji" type="checkbox" class="input_4" style="display:none">
<div style="position:relative">
<div class="answers-block">
<div class="field field-1">
<div>
<span>
👗
</span>
</div>
<div>
<span>
👖
</span>
</div>
<div>
<span>
👙
</span>
</div>
<div>
<span>
👠
</span>
</div>
</div>
<div class="field field-2">
<div>
<span>
🦊
</span>
</div>
<div>
<span>
🐱
</span>
</div>
<div>
<span>
🐭
</span>
</div>
<div>
<span>
🐷
</span>
</div>
</div>
<div class="field field-3">
<div>
<span>
🌹
</span>
</div>
<div>
<span>
🌻
</span>
</div>
<div>
<span>
🌺
</span>
</div>
<div>
<span>
🌼
</span>
</div>
</div>
<div class="field field-4">
<div>
<span>
❄️
</span>
</div>
<div>
<span>
🌈
</span>
</div>
<div>
<span>
☀️
</span>
</div>
<div>
<span>
⛅️
</span>
</div>
</div>
</div>
<div class="emojis">
<label for="input_1_1" class="answer_1 label_1_1">
<span>
👗
</span>
</label>
<label for="input_1_2" class="answer_1 label_1_2">
<span>
👠
</span>
</label>
<label for="input_4_1" class="answer_4 label_4_1">
<span>
⛅️
</span>
</label>
<label for="input_2_1" class="answer_2 label_2_1">
<span>
🐭
</span>
</label>
<label for="input_1_3" class="answer_1 label_1_3">
<span>
👖
</span>
</label>
<label for="input_2_2" class="answer_2 label_2_2">
<span>
🐷
</span>
</label>
<label for="input_4_2" class="answer_4 label_4_2">
<span>
❄️
</span>
</label>
<label for="input_2_3" class="answer_2 label_2_3">
<span>
🦊
</span>
</label>
<label for="input_3_1" class="answer_3 label_3_1">
<span>
🌺
</span>
</label>
<label for="input_2_4" class="answer_2 label_2_4">
<span>
🐱
</span>
</label>
<label for="input_3_2" class="answer_3 label_3_2">
<span>
🌹
</span>
</label>
<label for="input_3_3" class="answer_3 label_3_3">
<span>
🌻
</span>
</label>
<label for="input_1_4" class="answer_1 label_1_4">
<span>
👙
</span>
</label>
<label for="input_3_4" class="answer_3 label_3_4">
<span>
🌼
</span>
</label>
<label for="input_4_3" class="answer_4 label_4_3">
<span>
🌈
</span>
</label>
<label for="input_4_4" class="answer_4 label_4_4">
<span>
☀️
</span>
</label>
</div>
<div class="curtain curtain-0"></div>
<div class="curtain curtain-1"></div>
<div class="curtain curtain-2"></div>
<div class="curtain curtain-3"></div>
<div class="curtain curtain-4"></div>
</div>
<p style="text-align:center">
<label for="input_answer_1" class="btn check-1">
Check
</label>
<label for="input_answer_2" class="btn check-2">
Check
</label>
<label for="input_answer_3" class="btn check-3">
Check
</label>
<label for="input_answer_4" class="btn check-4">
Check
</label>
<button type="reset" class="btn check-0">
Check
</button>
</p>
<div class="correct-message message">
<div>
<h4 style="padding-bottom:5px;font-size:18px">
You've scored some amazing discounts!
</h4>
<h4 style="padding-bottom:15px;font-size:18px">
<b>15% OFF</b> your next purchase.
</h4>
<h4 style="font-size:16px;padding-bottom:15px">
Use the promo code <b>PRIZE3</b> on our website.
</h4>
</div>
</div>
</form>
</div>
The kinetic version has a similar structure, but all interactivity is achieved using input tags and their associated labels.
In this case, we wrapped the entire game layout in a <form></form> tag. This was done for the fifth “Check” button. In this version, we replaced it with a button type=“reset” since this type of button allows you to clear all the fields contained within the form tag and thus easily clear the form if invalid emojis are picked.
In addition, we replaced the amp-selector tag with a <div class=“emojis”> tag and wrapped all the emojis within it in a label with the for=“input_1_1” attribute, which binds each label to its input.
We inserted all emoji-related inputs after the <form> tag. We then moved the inputs responsible for the collected group that were before the <form> tag to outside the tag to prevent them from being cleared.
Note that while each input has not only one ID that links it to a specific emoji, there are also classes for the corresponding group (input_1, input_2, etc.).
We also replaced the first four buttons with label tags linked to the inputs and the fifth button with a button type=“reset”:
We’ve also increased the number of blocks that will overlap emojis to prevent players from selecting too many. There is now one block for each button:
Styles
Now, let’s talk about styles that are already in our code. Here are the styles for each of the selected emojis:
The next image shows the styles responsible for displaying the correct answers (on a green background) when a group is assembled:
This is what the styles that hide the selected emojis look like:
It’s now worth reviewing the styles responsible for displaying buttons, as well as the block that prevents you from selecting more emojis than you need.
The first part is simple, as the styles display the appropriate button or block once all emojis from each group have been selected:
Next come more complex styles. These styles describe emojis that can be selected in various combinations, but not in the same group, so that the reset button and the corresponding block can be displayed:
Finally, these are the last important styles that are responsible for displaying the final message:
Fallback version
We have come to the last part of the guide, which is the fallback version. Fallback is required for email clients that don’t support HTML5 and CSS3, or AMP. This version will have a layout similar to our interactive version but without the interactivity. Clicking on any element will lead to the web version of the email.
In this example, the fallback version will simply contain an image of the game and a link to the web version of the email:
In this case, we continue to work in the interactive HTML block that we already have. First, insert the following code between the </style> tag and <div class=“find-groups-html”>:
<input id="fallback_ctrl" type="checkbox" checked class="fallback_ctrl" style="display:none !important;mso-hide:all">
<!-- FALLBACK -->
<span id="fallback" class="fallback">
<table cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td align="center">
<a target="_blank" href="https://viewstripo.email/54fd5b83-1519-4ca8-a036-5fd7ea2cee581755688090729?type=amphtml"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_4947713912964023df3651dafcd5e0fe35bfe175c57aa42aa1120b9579c581a5/images/fallback.jpg" width="255" alt="" class="adapt-img"></a>
</td>
</tr>
</tbody>
</table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="display:none;mso-hide:all">
In addition, at the very end of the code, you need to paste the following piece:
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
The links to the web version of the email and image can be replaced here:
The last thing to do is add styles to show only the version appropriate for the email client. Add this code to the style tag at the very end:
/* --- */
@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 code has an especially important piece in our fallback version:
<!--[if !mso]><!--><input type=“checkbox” id=“fallback_ctrl” class=“fallback_ctrl” style=“display:none !important;mso-hide:all;” checked>
<!--<![endif]-->
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 Outlook Desktop client.
Also worth noting is the <span id=“fallback” class=“fallback”></span> block, which contains all of 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;
- mso-hide:all; is used for Outlook.com.
The full code
Here is the full code of the game, including the kinetic HTML part and the fallback version:
<style>
@media only screen and (max-width: 600px) { .find-groups-html .emojis { width: 100%; } .find-groups-html .field div, .find-groups-html .emojis span { font-size: 30px; } } .find-groups-html { position: relative; } .find-groups-html .answers-block { display: flex; align-content: flex-start; justify-content: center; align-items: flex-start; flex-wrap: wrap; max-width: 300px; margin: 0 auto; } .find-groups-html .field div, .find-groups-html .emojis span { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 5px; background-color: #d9d9d9; font-size: 40px; text-align: center; cursor: pointer; } .find-groups-html .field div { background-color: #92db82; } .find-groups-html .field { display: none; justify-content: center; padding: 0 0 5px 0; gap: 5px; } .find-groups-html .emojis { margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 5px; padding: 0; flex-wrap: wrap; max-width: 300px; } .find-groups-html .message { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; padding: 20px; z-index: 99; transition-delay: 0.5s; background: #efefef; border-radius: 5px; } .find-groups-html .curtain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .find-groups-html .btn { border-radius: 5px; padding: 10px 20px; font-size: 16px; border: 0; margin: 10px 0 0; cursor: pointer; display: none; background-color: #f0f0f0; } .find-groups-html .green { background-color: #31cb4b; color: #ffffff; } .find-groups-html .gray { background-color: gray; color: #ffffff; } #input_answer_1:checked~* .field-1, #input_answer_2:checked~* .field-2, #input_answer_3:checked~* .field-3, #input_answer_4:checked~* .field-4 { display: flex !important; } #input_answer_1:checked~* .check-1, #input_answer_2:checked~* .check-2, #input_answer_3:checked~* .check-3, #input_answer_4:checked~* .check-4 { display: none !important; } #input_answer_1:checked~* .answer_1, #input_answer_2:checked~* .answer_2, #input_answer_3:checked~* .answer_3, #input_answer_4:checked~* .answer_4 { display: none !important; } #input_1_1:checked~* .label_1_1 span, #input_1_2:checked~* .label_1_2 span, #input_1_3:checked~* .label_1_3 span, #input_1_4:checked~* .label_1_4 span, #input_2_1:checked~* .label_2_1 span, #input_2_2:checked~* .label_2_2 span, #input_2_3:checked~* .label_2_3 span, #input_2_4:checked~* .label_2_4 span, #input_3_1:checked~* .label_3_1 span, #input_3_2:checked~* .label_3_2 span, #input_3_3:checked~* .label_3_3 span, #input_3_4:checked~* .label_3_4 span, #input_4_1:checked~* .label_4_1 span, #input_4_2:checked~* .label_4_2 span, #input_4_3:checked~* .label_4_3 span, #input_4_4:checked~* .label_4_4 span { background-color: gray !important; } #input_answer_1:not(:checked)~#input_answer_2:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_2:checked~* .check-0, #input_answer_1:not(:checked)~#input_answer_3:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_3:checked~* .check-0, #input_answer_1:not(:checked)~#input_answer_4:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .check-0, #input_answer_2:not(:checked)~#input_answer_3:not(:checked)~* .input_2:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_3:checked~* .check-0, #input_answer_2:not(:checked)~#input_answer_4:not(:checked)~* .input_2:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .check-0, #input_answer_3:not(:checked)~#input_answer_4:not(:checked)~* .input_3:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .check-0 { display: inline-block !important; } .input_1:checked~.input_1:checked~.input_1:checked~.input_1:checked~* .check-1, .input_2:checked~.input_2:checked~.input_2:checked~.input_2:checked~* .check-2, .input_3:checked~.input_3:checked~.input_3:checked~.input_3:checked~* .check-3, .input_4:checked~.input_4:checked~.input_4:checked~.input_4:checked~* .check-4 { display: inline-block !important; } .input_1:checked~.input_1:checked~.input_1:checked~.input_1:checked~* .curtain-1, .input_2:checked~.input_2:checked~.input_2:checked~.input_2:checked~* .curtain-2, .input_3:checked~.input_3:checked~.input_3:checked~.input_3:checked~* .curtain-3, .input_4:checked~.input_4:checked~.input_4:checked~.input_4:checked~* .curtain-4 { display: block !important; } #input_answer_1:not(:checked)~#input_answer_2:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_2:checked~* .curtain-0, #input_answer_1:not(:checked)~#input_answer_3:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_3:checked~* .curtain-0, #input_answer_1:not(:checked)~#input_answer_4:not(:checked)~* .input_1:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .curtain-0, #input_answer_2:not(:checked)~#input_answer_3:not(:checked)~* .input_2:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_3:checked~* .curtain-0, #input_answer_2:not(:checked)~#input_answer_4:not(:checked)~* .input_2:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .curtain-0, #input_answer_3:not(:checked)~#input_answer_4:not(:checked)~* .input_3:checked~input[type="checkbox"]:checked~input[type="checkbox"]:checked~.input_4:checked~* .curtain-0 { display: block !important; } #input_answer_1:checked~* .curtain-1, #input_answer_2:checked~* .curtain-2, #input_answer_3:checked~* .curtain-3, #input_answer_4:checked~* .curtain-4 { display: none !important; } #input_answer_1:checked~*#input_answer_2:checked~*#input_answer_3:checked~*#input_answer_4:checked~* .correct-message { display: flex !important; } /* --- */ @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>
<input id="fallback_ctrl" type="checkbox" checked class="fallback_ctrl" style="display:none !important;mso-hide:all">
<!-- FALLBACK -->
<span id="fallback" class="fallback">
<table cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td align="center">
<a target="_blank" href="https://viewstripo.email/54fd5b83-1519-4ca8-a036-5fd7ea2cee581755688090729?type=amphtml"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_4947713912964023df3651dafcd5e0fe35bfe175c57aa42aa1120b9579c581a5/images/fallback.jpg" width="255" alt="" class="adapt-img"></a>
</td>
</tr>
</tbody>
</table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="display:none;mso-hide:all">
<div esd-text="true" class="esd-text find-groups-html">
<input type="checkbox" id="input_answer_1" name="answer" style="display:none">
<input id="input_answer_2" name="answer" type="checkbox" style="display:none">
<input name="answer" type="checkbox" id="input_answer_3" style="display:none">
<input name="answer" type="checkbox" id="input_answer_4" style="display:none">
<form>
<input type="checkbox" id="input_1_1" name="emoji" class="input_1" style="display:none">
<input id="input_1_2" name="emoji" type="checkbox" class="input_1" style="display:none">
<input id="input_1_3" name="emoji" type="checkbox" class="input_1" style="display:none">
<input id="input_1_4" name="emoji" type="checkbox" class="input_1" style="display:none">
<input name="emoji" type="checkbox" id="input_2_1" class="input_2" style="display:none">
<input type="checkbox" id="input_2_2" name="emoji" class="input_2" style="display:none">
<input id="input_2_3" name="emoji" type="checkbox" class="input_2" style="display:none">
<input id="input_2_4" name="emoji" type="checkbox" class="input_2" style="display:none">
<input id="input_3_1" name="emoji" type="checkbox" class="input_3" style="display:none">
<input id="input_3_2" name="emoji" type="checkbox" class="input_3" style="display:none">
<input id="input_3_3" name="emoji" type="checkbox" class="input_3" style="display:none">
<input id="input_3_4" name="emoji" type="checkbox" class="input_3" style="display:none">
<input type="checkbox" id="input_4_1" name="emoji" class="input_4" style="display:none">
<input type="checkbox" id="input_4_2" name="emoji" class="input_4" style="display:none">
<input id="input_4_3" name="emoji" type="checkbox" class="input_4" style="display:none">
<input id="input_4_4" name="emoji" type="checkbox" class="input_4" style="display:none">
<div style="position:relative">
<div class="answers-block">
<div class="field field-1">
<div esd-text="true" class="esd-text">
<span>
👗
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
👖
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
👙
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
👠
</span>
</div>
</div>
<div class="field field-2">
<div esd-text="true" class="esd-text">
<span>
🦊
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
🐱
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
🐭
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
🐷
</span>
</div>
</div>
<div class="field field-3">
<div esd-text="true" class="esd-text">
<span>
🌹
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
🌻
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
🌺
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
🌼
</span>
</div>
</div>
<div class="field field-4">
<div esd-text="true" class="esd-text">
<span>
❄️
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
🌈
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
☀️
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
⛅️
</span>
</div>
</div>
</div>
<div class="emojis">
<label for="input_1_1" class="answer_1 label_1_1">
<span>
👗
</span>
</label>
<label for="input_1_2" class="answer_1 label_1_2">
<span>
👠
</span>
</label>
<label for="input_4_1" class="answer_4 label_4_1">
<span>
⛅️
</span>
</label>
<label for="input_2_1" class="answer_2 label_2_1">
<span>
🐭
</span>
</label>
<label for="input_1_3" class="answer_1 label_1_3">
<span>
👖
</span>
</label>
<label for="input_2_2" class="answer_2 label_2_2">
<span>
🐷
</span>
</label>
<label for="input_4_2" class="answer_4 label_4_2">
<span>
❄️
</span>
</label>
<label for="input_2_3" class="answer_2 label_2_3">
<span>
🦊
</span>
</label>
<label for="input_3_1" class="answer_3 label_3_1">
<span>
🌺
</span>
</label>
<label for="input_2_4" class="answer_2 label_2_4">
<span>
🐱
</span>
</label>
<label for="input_3_2" class="answer_3 label_3_2">
<span>
🌹
</span>
</label>
<label for="input_3_3" class="answer_3 label_3_3">
<span>
🌻
</span>
</label>
<label for="input_1_4" class="answer_1 label_1_4">
<span>
👙
</span>
</label>
<label for="input_3_4" class="answer_3 label_3_4">
<span>
🌼
</span>
</label>
<label for="input_4_3" class="answer_4 label_4_3">
<span>
🌈
</span>
</label>
<label for="input_4_4" class="answer_4 label_4_4">
<span>
☀️
</span>
</label>
</div>
<div class="curtain curtain-0"></div>
<div class="curtain curtain-1"></div>
<div class="curtain curtain-2"></div>
<div class="curtain curtain-3"></div>
<div class="curtain curtain-4"></div>
</div>
<p style="text-align:center">
<button type="reset" class="btn check-0">
Check
</button>
<label for="input_answer_1" class="btn check-1">
Check
</label>
<label for="input_answer_2" class="btn check-2">
Check
</label>
<label for="input_answer_3" class="btn check-3">
Check
</label>
<label for="input_answer_4" class="btn check-4">
Check
</label>
</p>
<div class="correct-message message">
<div esd-text="true" class="esd-text">
<h4 style="padding-bottom:5px;font-size:18px">
You've scored some amazing discounts!
</h4>
<h4 style="padding-bottom:15px;font-size:18px">
<b>15% OFF</b> your next purchase.
</h4>
<h4 style="padding-bottom:15px;font-size:16px">
Use the promo code <b>PRIZE3</b> on our website.
</h4>
</div>
</div>
</form>
</div>
</div>
<!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
Wrapping up
Here you have it, a full-fledged game that is easy to create for leveling up your email engagement rate. Now you can create your own game, customize it however you like, and dedicate it to various occasions to make your emails unique and fun. Your imagination is the only limit.
Create exceptional emails with Stripo
0 comments