In this article, we’ll show you how to create an interactive email game called Guess the emoji. We’ll walk you through the whole process, as well as give you all the needed code samples so you can create your own interactive content piece.
How about playing some simple riddles? We say a word, and you have to match the images with the correct meaning. Sound familiar, right? It's time to bring this game to life in your emails. Our detailed guide will help you. We're happy to introduce you to the Guess emoji game.
How this game works
As always, it's worth first understanding the game mechanics in general. In the game, the recipient must select an emoji that matches a hidden word. If the selection is correct, the emoji will appear in the field below the word; if incorrect, an error is displayed. The recipient has three possible errors, and after exhausting all the errors, they will see a message asking them to try again or skip the stage.
Meanwhile, after the correct answer, the game moves on to the next riddle. There are three stages of riddles in the game, and after solving them, the recipient will see a message indicating successful completion.
When creating these riddles, your imagination is the only limit, and you can use this game in many ways, like:
- gift your audience discounts and promo codes for successful game completion;
- design seasonal promotions for your products, where each riddle is tied to your services or products and must be solved with related emojis;
- and more.
In this article, we will show you in detail how to create a full-fledged game that is compatible with major email clients, so all subscribers of yours will be able to interact with the game and include the following:
- AMP version of the game;
- kinetic version, built with HTML5 and CSS3;
- fallback version for email clients that do not support interactivity.
Without further ado, let’s create our interactive game.
AMP version
We start creating our game with an empty one-column structure in the template. Insert it, then select it and specify that it be included only in AMP HTML.
Once it’s done, add an HTML block to this structure, in which we’ll place our game.
After that, paste this code into this HTML block:
<style amp-custom>
.guess-emoji-amp { position: relative; } .guess-emoji-amp .word { display: flex; justify-content: center; align-items: center; width: 300px; height: 200px; margin: 0 auto; border-radius: 5px; overflow: hidden; background-color: #d9d9d9; } .guess-emoji-amp .field div { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 5px; background-color: #d9d9d9; font-size: 40px; text-align: center; } .guess-emoji-amp .field { display: flex; justify-content: center; padding: 20px; gap: 10px; } .guess-emoji-amp .emoji { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; width: 75%; margin: 0 auto 20px; } .guess-emoji-amp .emoji div { width: 50px; height: 50px; } .guess-emoji-amp .emoji span { cursor: pointer; font-size: 40px; } .guess-emoji-amp .errors { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 auto; padding-bottom: 20px; } .guess-emoji-amp .errors span { font-family: Arial, sans-serif; font-weight: bold; color: gray; font-size: 30px; } .guess-emoji-amp .errors .active { color: red; } .guess-emoji-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; } .guess-emoji-amp .btn { border-radius: 5px; padding: 10px 20px; font-size: 16px; border: 0; margin: 5px 0; cursor: pointer; } .guess-emoji-amp .green { background-color: #31cb4b; color: #ffffff; } .guess-emoji-amp .gray { background-color: gray; color: #ffffff; } @media only screen and (max-width: 600px) { .guess-emoji-amp .emoji { width: 100%; } .guess-emoji-amp .word { width: 100%; } .guess-emoji-amp .field div, .guess-emoji-amp .emoji span { font-size: 30px; } }
</style>
<div class="guess-emoji-amp">
<div class="screen-1">
<div class="word">
<h2 style="text-align:center">
Electric car
</h2>
</div>
<div class="field">
<div></div>
<div></div>
</div>
<div class="errors">
<div>
<span>
X
</span>
</div>
<div>
<span>
X
</span>
</div>
<div>
<span>
X
</span>
</div>
</div>
<div class="emoji">
<div>
<span>
🚗
</span>
</div>
<div>
<span>
🐋
</span>
</div>
<div>
<span>
💧
</span>
</div>
<div>
<span>
🧀
</span>
</div>
<div>
<span>
🎸
</span>
</div>
<div>
<span>
👽
</span>
</div>
<div>
<span>
👠
</span>
</div>
<div>
<span>
🔋
</span>
</div>
<div>
<span>
🌂
</span>
</div>
<div>
<span>
💃
</span>
</div>
<div>
<span>
🐭
</span>
</div>
<div >
<span>
☘️
</span>
</div>
</div>
</div>
</div>
So it will look like this.
At this point, we've prepared the base for our game, which consists of a block with a word to guess, a field for the answer (here, the answer consists of 2 emoji), images for 3 mistakes, and a set of emoji.
However, our game isn't currently playable, so we need to make some additions to the code.
The game should immediately identify the correct emoji when clicked. Also, to simplify the task, we need to hide the selected emoji after the click.
All this will require several new variables, namely:
- error_1 is responsible for the number of errors;
- correct_1_1 and correct_1_2 are needed for this example, since we have two correct emojis, and a variable is needed for each to know when they are selected;
- answer_1_1, answer_1_2, answer_1_3, etc., are needed for each emoji to hide it using the [hidden] attribute.
The first digit 1 in these variables indicates that they are used in the first riddle in the first step. In the next step, the variables will be error_2, correct_2_1, answer_2_1, and so on.
Thus, the code for the correct emoji will look like this, only the second digit of the answer and the correct variables will change:
Meanwhile, all other incorrect answers will look like this; only the second digit of the answer variable will change:
Let's quickly go over the code and variables so you understand what they do:
- on="tap:" is the "click" event handler;
- AMP.setState({ })" is a special AMP syntax for creating variables. When clicking on "Start," we set the active variable to true, and when clicking on "Stop," we set it to false;
- answer_1_1: is the answer variable, and in our example, we set the answer_1_1 variable to 1. Such variables are required for each emoji. The first digit "1" in the name indicates the first step of the game, and the second indicates the emoji number;
- correct_1_2: is the correct answer variable, and in our example, we set the correct_1_2 variable to 1. We add such variables to all correct emoji, changing only the second digit;
- error_1: +error_1+1 is the incorrect answer variable, and to make it work, we set the error_1 variable to its previous value plus 1, meaning we increase the value by 1 with each click;
- role="button" is the attribute we use to indicate that the element will be used as a button. In AMP, it is required along with on="tap:" if the tag we're adding to isn't a button;
- tabindex="1" is the focus order when navigating between elements using the Tab key. It's also a required attribute when using on="tap:" if the tag we're adding it to isn't a button;
- [hidden]="answer_1_1 == 1" is necessary so that when the answer_1_1 variable equals 1, the element will be hidden.
To free you from the hassle of coding this manually, paste this code, replacing the code from here:
To here:
<div class="emoji">
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_1_1 == 1" on="tap:AMP.setState({ answer_1_1: 1, correct_1_2: 1 })" role="button">
🚗
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_1_2 == 1" on="tap:AMP.setState({ answer_1_2: 1, error_1: +error_1+1 })" role="button" tabindex="1">
🐋
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_1_3 == 1" on="tap:AMP.setState({ answer_1_3: 1, error_1: +error_1+1 })">
💧
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_1_4 == 1" on="tap:AMP.setState({ answer_1_4: 1, error_1: +error_1+1 })">
🧀
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_1_5 == 1" on="tap:AMP.setState({ answer_1_5: 1, error_1: +error_1+1 })">
🎸
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_1_6 == 1" on="tap:AMP.setState({ answer_1_6: 1, error_1: +error_1+1 })" role="button" tabindex="1">
👽
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_1_7 == 1" on="tap:AMP.setState({ answer_1_7: 1,error_1: +error_1+1 })" role="button">
👠
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_1_8: 1, correct_1_1: 1 })" role="button" tabindex="1" [hidden]="answer_1_8 == 1">
🔋
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_1_9 == 1" on="tap:AMP.setState({ answer_1_9: 1, error_1: +error_1+1 })" role="button" tabindex="1">
🌂
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_1_10: 1, error_1: +error_1+1 })" role="button" tabindex="1" [hidden]="answer_1_10 == 1">
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_1_11: 1, error_1: +error_1+1 })" role="button" tabindex="1" [hidden]="answer_1_11 == 1">
🐭
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_1_12 == 1" on="tap:AMP.setState({ answer_1_12: 1, error_1: +error_1+1 })" role="button">
☘️
</span>
</div>
</div>
Now that we understand where the recipient clicked, we can display the correct answer in the corresponding field and the number of errors.
Onto the next thing to change. Replace the class="field" block that looks like this with the following code:
<div class="field">
<div>
<span hidden [hidden]="correct_1_1 != 1">
🔋
</span>
</div>
<div>
<span hidden [hidden]="correct_1_2 != 1">
🚗
</span>
</div>
</div>
So now it will look like this:
Essentially, we've added a span tag with the correct emoji. By default, they're hidden using the hidden attribute and will remain hidden until the recipient clicks the correct answer and the correct_1_1 or correct_1_2 variable, respectively, equals 1.
Next, we need to add code to detect incorrect answers. To do this, replace the block with class="errors", which currently looks like this, with the following code:
<div class="errors">
<div esd-text="true" class="esd-text">
<span [class]="error_1 >= 1 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_1 >= 2 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_1 >= 3 ? 'active': ''">
X
</span>
</div>
</div>
To look like this:
In this piece of code, [class]="error_1 >= 1 ? 'active': ' ' " is a special attribute that describes the conditions for displaying a class. In this example, we check the value of error_1. If it is greater than or equal to 1, the active class will be added; otherwise, no class will be added.
The styles that came with the original piece of code already specified a red color for elements with the active class:
Now we need to add messages that display depending on whether the answer is correct or not. To do this, we insert the following code at the very bottom, before the two </div> tags.
<div [hidden]="correct_1_1 != 1 || correct_1_2 != 1" hidden class="correct-message message">
<div>
<div class="field">
<div>
<span>
🔋
</span>
</div>
<div>
<span>
🚗
</span>
</div>
</div>
<h3 style="padding-bottom:20px;text-align:center">
This is the correct answer!
</h3>
<p>
<button class="btn green">
Next
</button>
</p>
</div>
</div>
<div [hidden]="error_1 < 3" hidden class="wrong-message message">
<div>
<h3 style="padding-bottom:20px;text-align:center">
The answer is incorrect.
</h3>
<p>
<button class="btn green">
Try again
</button>
</p>
<p>
<button class="btn gray">
Skip
</button>
</p>
</div>
</div>
This code already defines the display conditions for these two blocks. The block with the congratulations is hidden until the recipient selects two correct emojis. To achieve this, the following attributes were added to the div tag with the class correct-message:
Meanwhile, the error message block is hidden until the recipient selects three incorrect emojis. To achieve this, the following attributes were added to the div tag with the "wrong-message" class:
In the first block with a congratulatory message (correct-message), we have a Next button for moving on to the next riddle. In the second block with an error (wrong-message), there are Try Again and Skip buttons. Try Again allows you to solve the same riddle again, and Skip allows you to move on to the next step, like the Next button.
The first step of our game is complete. Now we need to add two more steps with more puzzles and make the buttons work.
To restart the same puzzle using the Try Again button, all variables must be reset. To do this, replace the Try Again button code with the following:
<p>
<button on="tap:AMP.setState({ correct_1_1: 0, correct_1_2: 0, error_1: 0, answer_1_1: 0, answer_1_2: 0, answer_1_3: 0, answer_1_4: 0, answer_1_5: 0, answer_1_6: 0, answer_1_7: 0, answer_1_8: 0, answer_1_9: 0, answer_1_10: 0, answer_1_11: 0, answer_1_12: 0 })" class="btn green">
Try again
</button>
</p>
It should look like this:
The Next and Skip buttons perform the same function: they move to the next step. To display the next riddle, we need to add a variable called word, which will store the number of words the recipient guesses.
Replace the Next button code with this code so it looks like this:
<p>
<button on="tap:AMP.setState({ word: 1 })" class="btn green">
Next
</button>
</p>
And then replace the Skip button code with this code so it looks like this:
<p>
<button on="tap:AMP.setState({ word: 1 })" class="btn gray">
Skip
</button>
</p>
After this, the block with the screen-1 class (this is our first riddle) needs to have the following attribute added:
[hidden]="word > 0"
So it will look like this:
Now the game block will hide after clicking Next or Skip.
All that's left is to add the next puzzles, and in our example, there are only three in total. To do this, add the following code at the very bottom before the last </div> tag:
<!-- screen-2 -->
<div [hidden]="word != 1" hidden class="screen-2">
<div class="word" style="background-repeat:no-repeat;background-size:cover;background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_4c061b96fa043d959035e0b791dddcb7cab89ac84bba5a13dd4bc7da58a74c8e/images/gf14145f8d00d7b0b1f95b59f6b9db464b60e13218d1ccc07c77520a11d20ca79456ba1bc93859314a8ccad3a656ab081_640.jpeg)"></div>
<div class="field">
<div esd-text="true" class="esd-text">
<span [hidden]="correct_2_1 != 1" hidden>
🐈
</span>
</div>
<div esd-text="true" class="esd-text">
<span hidden [hidden]="correct_2_2 != 1">
💤
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_2_3 != 1" hidden>
🛏
</span>
</div>
</div>
<div class="errors">
<div esd-text="true" class="esd-text">
<span [class]="error_2 >= 1 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_2 >= 2 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_2 >= 3 ? 'active': ''">
X
</span>
</div>
</div>
<div class="emoji">
<div esd-text="true" class="esd-text">
<span [hidden]="answer_2_1 == 1" on="tap:AMP.setState({ answer_2_1: 1, error_2: +error_2+1 })" role="button" tabindex="1">
🐋
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_2_2 == 1" on="tap:AMP.setState({ answer_2_2: 1, correct_2_1: 1 })" role="button">
🐈
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_2_3: 1, error_2: +error_2+1 })" role="button" tabindex="1" [hidden]="answer_2_3 == 1">
💧
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_2_4 == 1" on="tap:AMP.setState({ answer_2_4: 1, error_2: +error_2+1 })" role="button" tabindex="1">
🧀
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_2_5 == 1" on="tap:AMP.setState({ answer_2_5: 1, correct_2_2: 1 })" role="button">
💤
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_2_6 == 1" on="tap:AMP.setState({ answer_2_6: 1, error_2: +error_2+1 })">
👽
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_2_7: 1, error_2: +error_2+1 })" role="button" tabindex="1" [hidden]="answer_2_7 == 1">
👠
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_2_8 == 1" on="tap:AMP.setState({ answer_2_8: 1, error_2: +error_2+1 })">
🎸
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_2_9 == 1" on="tap:AMP.setState({ answer_2_9: 1, error_2: +error_2+1 })">
🌂
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_2_10 == 1" on="tap:AMP.setState({ answer_2_10: 1, error_2: +error_2+1 })">
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_2_11 == 1" on="tap:AMP.setState({ answer_2_11: 1, correct_2_3: 1 })" role="button" tabindex="1">
🛏
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_2_12 == 1" on="tap:AMP.setState({ answer_2_12: 1, error_2: +error_2+1 })" role="button">
☘️
</span>
</div>
</div>
<div hidden [hidden]="correct_2_1 != 1 || correct_2_2 != 1 || correct_2_3 != 1" class="correct-message message">
<div esd-text="true" class="esd-text">
<div class="field">
<div esd-text="true" class="esd-text">
<span [hidden]="correct_2_1 != 1" hidden>
🐈
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_2_2 != 1" hidden>
💤
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_2_3 != 1" hidden>
🛏
</span>
</div>
</div>
<h3 style="padding-bottom:20px;text-align:center">
This is the correct answer!
</h3>
<p>
<button on="tap:AMP.setState({ word: 2 })" class="btn green">
Next
</button>
</p>
</div>
</div>
<div [hidden]="error_2 < 3" hidden class="wrong-message message">
<div esd-text="true" class="esd-text">
<h3 style="padding-bottom:20px;text-align:center">
The answer is incorrect.
</h3>
<p>
<button on="tap:AMP.setState({ correct_2_1: 0, correct_2_2: 0, correct_2_3: 0, error_2: 0, answer_2_1: 0, answer_2_2: 0, answer_2_3: 0, answer_2_4: 0, answer_2_5: 0, answer_2_6: 0, answer_2_7: 0, answer_2_8: 0, answer_2_9: 0, answer_2_10: 0, answer_2_11: 0, answer_2_12: 0 })" class="btn green">
Try again
</button>
</p>
<p>
<button on="tap:AMP.setState({ word: 2 })" class="btn gray">
Skip
</button>
</p>
</div>
</div>
</div>
<!-- screen-3 -->
<div hidden [hidden]="word != 2" class="screen-3">
<div esd-text="true" class="word esd-text">
<h2 style="text-align:center">
Dance to the music
</h2>
</div>
<div class="field">
<div esd-text="true" class="esd-text">
<span [hidden]="correct_3_1 != 1" hidden>
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_3_2 != 1" hidden>
🕺
</span>
</div>
<div esd-text="true" class="esd-text">
<span hidden [hidden]="correct_3_3 != 1">
🎵
</span>
</div>
</div>
<div class="errors">
<div esd-text="true" class="esd-text">
<span [class]="error_3 >= 1 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_3 >= 2 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_3 >= 3 ? 'active': ''">
X
</span>
</div>
</div>
<div class="emoji">
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_3_1 == 1" on="tap:AMP.setState({ answer_3_1: 1, correct_3_3: 1 })">
🎵
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_3_2 == 1" on="tap:AMP.setState({ answer_3_2: 1, error_3: +error_3+1 })" role="button" tabindex="1">
🐋
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_3_3: 1, correct_3_1: 1 })" role="button" tabindex="1" [hidden]="answer_3_3 == 1">
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_3_4 == 1" on="tap:AMP.setState({ answer_3_4: 1, error_3: +error_3+1 })">
💧
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_3_5: 1, error_3: +error_3+1 })" role="button" tabindex="1" [hidden]="answer_3_5 == 1">
🧀
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_3_6: 1, correct_3_2: 1 })" role="button" tabindex="1" [hidden]="answer_3_6 == 1">
🕺
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_3_7: 1, error_3: +error_3+1 })" role="button" tabindex="1" [hidden]="answer_3_7 == 1">
👽
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_3_8 == 1" on="tap:AMP.setState({ answer_3_8: 1, error_3: +error_3+1 })" role="button" tabindex="1">
👠
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_3_9 == 1" on="tap:AMP.setState({ answer_3_9: 1, error_3: +error_3+1 })">
🎸
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_3_10 == 1" on="tap:AMP.setState({ answer_3_10: 1, error_3: +error_3+1 })" role="button">
🌂
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_3_11 == 1" on="tap:AMP.setState({ answer_3_11: 1, error_3: +error_3+1 })">
🐈
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_3_12 == 1" on="tap:AMP.setState({ answer_3_12: 1, error_3: +error_3+1 })">
☘️
</span>
</div>
</div>
<div hidden [hidden]="correct_3_1 != 1 || correct_3_2 != 1 || correct_3_3 != 1" class="correct-message message">
<div esd-text="true" class="esd-text">
<div class="field">
<div esd-text="true" class="esd-text">
<span [hidden]="correct_3_1 != 1" hidden>
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_3_2 != 1" hidden>
🕺
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_3_3 != 1" hidden>
🎵
</span>
</div>
</div>
<h3 style="padding-bottom:20px;text-align:center">
Well done!
</h3>
<p>
As a reward, you receive 15% OFF to all our products. Your promo code is WINNER15 🙂
</p>
</div>
</div>
<div [hidden]="error_3 < 3" hidden class="wrong-message message">
<div esd-text="true" class="esd-text">
<h3 style="padding-bottom:20px;text-align:center">
The answer is incorrect.
</h3>
<p>
<button on="tap:AMP.setState({ correct_3_1: 0, correct_3_2: 0, correct_3_3: 0, error_3: 0, answer_3_1: 0, answer_3_2: 0, answer_3_3: 0, answer_3_4: 0, answer_3_5: 0, answer_3_6: 0, answer_3_7: 0, answer_3_8: 0, answer_3_9: 0, answer_3_10: 0, answer_3_11: 0, answer_3_12: 0 })" class="btn green">
Try again
</button>
</p>
</div>
</div>
</div>
And it's done. To make sure that you did everything right, we leave the final code sample, so you can check it with your own creation.
<style amp-custom>
.guess-emoji-amp { position: relative; } .guess-emoji-amp .word { display: flex; justify-content: center; align-items: center; width: 300px; height: 200px; margin: 0 auto; border-radius: 5px; overflow: hidden; background-color: #d9d9d9; } .guess-emoji-amp .field div { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 5px; background-color: #d9d9d9; font-size: 40px; text-align: center; } .guess-emoji-amp .field { display: flex; justify-content: center; padding: 20px; gap: 10px; } .guess-emoji-amp .emoji { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; width: 75%; margin: 0 auto 20px; } .guess-emoji-amp .emoji div { width: 50px; height: 50px; } .guess-emoji-amp .emoji span { cursor: pointer; font-size: 40px; } .guess-emoji-amp .errors { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 auto; padding-bottom: 20px; } .guess-emoji-amp .errors span { font-family: Arial, sans-serif; font-weight: bold; color: gray; font-size: 30px; } .guess-emoji-amp .errors .active { color: red; } .guess-emoji-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; } .guess-emoji-amp .btn { border-radius: 5px; padding: 10px 20px; font-size: 16px; border: 0; margin: 5px 0; cursor: pointer; } .guess-emoji-amp .green { background-color: #31cb4b; color: #ffffff; } .guess-emoji-amp .gray { background-color: gray; color: #ffffff; } @media only screen and (max-width: 600px) { .guess-emoji-amp .emoji { width: 100%; } .guess-emoji-amp .word { width: 100%; } .guess-emoji-amp .field div, .guess-emoji-amp .emoji span { font-size: 30px; } }
</style>
<div class="guess-emoji-amp">
<!-- screen-1 -->
<div [hidden]="word > 0" class="screen-1">
<div esd-text="true" class="word esd-text">
<h2 style="text-align:center">
Electric car
</h2>
</div>
<div class="field">
<div>
<span hidden [hidden]="correct_1_1 != 1">
🔋
</span>
</div>
<div>
<span hidden [hidden]="correct_1_2 != 1">
🚗
</span>
</div>
</div>
<div class="errors">
<div esd-text="true" class="esd-text">
<span [class]="error_1 >= 1 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_1 >= 2 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_1 >= 3 ? 'active': ''">
X
</span>
</div>
</div>
<div class="emoji">
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_1_1 == 1" on="tap:AMP.setState({ answer_1_1: 1, correct_1_2: 1 })" role="button">
🚗
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_1_2 == 1" on="tap:AMP.setState({ answer_1_2: 1, error_1: +error_1+1 })" role="button" tabindex="1">
🐋
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_1_3 == 1" on="tap:AMP.setState({ answer_1_3: 1, error_1: +error_1+1 })">
💧
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_1_4 == 1" on="tap:AMP.setState({ answer_1_4: 1, error_1: +error_1+1 })">
🧀
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_1_5 == 1" on="tap:AMP.setState({ answer_1_5: 1, error_1: +error_1+1 })">
🎸
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_1_6 == 1" on="tap:AMP.setState({ answer_1_6: 1, error_1: +error_1+1 })" role="button" tabindex="1">
👽
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_1_7 == 1" on="tap:AMP.setState({ answer_1_7: 1,error_1: +error_1+1 })" role="button">
👠
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_1_8: 1, correct_1_1: 1 })" role="button" tabindex="1" [hidden]="answer_1_8 == 1">
🔋
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_1_9 == 1" on="tap:AMP.setState({ answer_1_9: 1, error_1: +error_1+1 })" role="button" tabindex="1">
🌂
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_1_10: 1, error_1: +error_1+1 })" role="button" tabindex="1" [hidden]="answer_1_10 == 1">
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_1_11: 1, error_1: +error_1+1 })" role="button" tabindex="1" [hidden]="answer_1_11 == 1">
🐭
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_1_12 == 1" on="tap:AMP.setState({ answer_1_12: 1, error_1: +error_1+1 })" role="button">
☘️
</span>
</div>
</div>
<div [hidden]="correct_1_1 != 1 || correct_1_2 != 1" hidden class="correct-message message">
<div esd-text="true" class="esd-text">
<div class="field">
<div esd-text="true" class="esd-text">
<span>
🔋
</span>
</div>
<div esd-text="true" class="esd-text">
<span>
🚗
</span>
</div>
</div>
<h3 style="padding-bottom:20px;text-align:center">
This is the correct answer!
</h3>
<p>
<button on="tap:AMP.setState({ word: 1 })" class="btn green">
Next
</button>
</p>
</div>
</div>
<div [hidden]="error_1 < 3" hidden class="wrong-message message">
<div esd-text="true" class="esd-text">
<h3 style="padding-bottom:20px;text-align:center">
The answer is incorrect.
</h3>
<p>
<button on="tap:AMP.setState({ correct_1_1: 0, correct_1_2: 0, error_1: 0, answer_1_1: 0, answer_1_2: 0, answer_1_3: 0, answer_1_4: 0, answer_1_5: 0, answer_1_6: 0, answer_1_7: 0, answer_1_8: 0, answer_1_9: 0, answer_1_10: 0, answer_1_11: 0, answer_1_12: 0 })" class="btn green">
Try again
</button>
</p>
<p>
<button on="tap:AMP.setState({ word: 1 })" class="btn gray">
Skip
</button>
</p>
</div>
</div>
</div>
<!-- screen-2 -->
<div [hidden]="word != 1" hidden class="screen-2">
<div class="word" style="background-repeat:no-repeat;background-size:cover;background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_4c061b96fa043d959035e0b791dddcb7cab89ac84bba5a13dd4bc7da58a74c8e/images/gf14145f8d00d7b0b1f95b59f6b9db464b60e13218d1ccc07c77520a11d20ca79456ba1bc93859314a8ccad3a656ab081_640.jpeg)"></div>
<div class="field">
<div esd-text="true" class="esd-text">
<span [hidden]="correct_2_1 != 1" hidden>
🐈
</span>
</div>
<div esd-text="true" class="esd-text">
<span hidden [hidden]="correct_2_2 != 1">
💤
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_2_3 != 1" hidden>
🛏
</span>
</div>
</div>
<div class="errors">
<div esd-text="true" class="esd-text">
<span [class]="error_2 >= 1 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_2 >= 2 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_2 >= 3 ? 'active': ''">
X
</span>
</div>
</div>
<div class="emoji">
<div esd-text="true" class="esd-text">
<span [hidden]="answer_2_1 == 1" on="tap:AMP.setState({ answer_2_1: 1, error_2: +error_2+1 })" role="button" tabindex="1">
🐋
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_2_2 == 1" on="tap:AMP.setState({ answer_2_2: 1, correct_2_1: 1 })" role="button">
🐈
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_2_3: 1, error_2: +error_2+1 })" role="button" tabindex="1" [hidden]="answer_2_3 == 1">
💧
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_2_4 == 1" on="tap:AMP.setState({ answer_2_4: 1, error_2: +error_2+1 })" role="button" tabindex="1">
🧀
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_2_5 == 1" on="tap:AMP.setState({ answer_2_5: 1, correct_2_2: 1 })" role="button">
💤
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_2_6 == 1" on="tap:AMP.setState({ answer_2_6: 1, error_2: +error_2+1 })">
👽
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_2_7: 1, error_2: +error_2+1 })" role="button" tabindex="1" [hidden]="answer_2_7 == 1">
👠
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_2_8 == 1" on="tap:AMP.setState({ answer_2_8: 1, error_2: +error_2+1 })">
🎸
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_2_9 == 1" on="tap:AMP.setState({ answer_2_9: 1, error_2: +error_2+1 })">
🌂
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_2_10 == 1" on="tap:AMP.setState({ answer_2_10: 1, error_2: +error_2+1 })">
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_2_11 == 1" on="tap:AMP.setState({ answer_2_11: 1, correct_2_3: 1 })" role="button" tabindex="1">
🛏
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_2_12 == 1" on="tap:AMP.setState({ answer_2_12: 1, error_2: +error_2+1 })" role="button">
☘️
</span>
</div>
</div>
<div hidden [hidden]="correct_2_1 != 1 || correct_2_2 != 1 || correct_2_3 != 1" class="correct-message message">
<div esd-text="true" class="esd-text">
<div class="field">
<div esd-text="true" class="esd-text">
<span [hidden]="correct_2_1 != 1" hidden>
🐈
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_2_2 != 1" hidden>
💤
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_2_3 != 1" hidden>
🛏
</span>
</div>
</div>
<h3 style="padding-bottom:20px;text-align:center">
This is the correct answer!
</h3>
<p>
<button on="tap:AMP.setState({ word: 2 })" class="btn green">
Next
</button>
</p>
</div>
</div>
<div [hidden]="error_2 < 3" hidden class="wrong-message message">
<div esd-text="true" class="esd-text">
<h3 style="padding-bottom:20px;text-align:center">
The answer is incorrect.
</h3>
<p>
<button on="tap:AMP.setState({ correct_2_1: 0, correct_2_2: 0, correct_2_3: 0, error_2: 0, answer_2_1: 0, answer_2_2: 0, answer_2_3: 0, answer_2_4: 0, answer_2_5: 0, answer_2_6: 0, answer_2_7: 0, answer_2_8: 0, answer_2_9: 0, answer_2_10: 0, answer_2_11: 0, answer_2_12: 0 })" class="btn green">
Try again
</button>
</p>
<p>
<button on="tap:AMP.setState({ word: 2 })" class="btn gray">
Skip
</button>
</p>
</div>
</div>
</div>
<!-- screen-3 -->
<div hidden [hidden]="word != 2" class="screen-3">
<div esd-text="true" class="word esd-text">
<h2 style="text-align:center">
Dance to the music
</h2>
</div>
<div class="field">
<div esd-text="true" class="esd-text">
<span [hidden]="correct_3_1 != 1" hidden>
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_3_2 != 1" hidden>
🕺
</span>
</div>
<div esd-text="true" class="esd-text">
<span hidden [hidden]="correct_3_3 != 1">
🎵
</span>
</div>
</div>
<div class="errors">
<div esd-text="true" class="esd-text">
<span [class]="error_3 >= 1 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_3 >= 2 ? 'active': ''">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span [class]="error_3 >= 3 ? 'active': ''">
X
</span>
</div>
</div>
<div class="emoji">
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_3_1 == 1" on="tap:AMP.setState({ answer_3_1: 1, correct_3_3: 1 })">
🎵
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_3_2 == 1" on="tap:AMP.setState({ answer_3_2: 1, error_3: +error_3+1 })" role="button" tabindex="1">
🐋
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_3_3: 1, correct_3_1: 1 })" role="button" tabindex="1" [hidden]="answer_3_3 == 1">
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_3_4 == 1" on="tap:AMP.setState({ answer_3_4: 1, error_3: +error_3+1 })">
💧
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_3_5: 1, error_3: +error_3+1 })" role="button" tabindex="1" [hidden]="answer_3_5 == 1">
🧀
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_3_6: 1, correct_3_2: 1 })" role="button" tabindex="1" [hidden]="answer_3_6 == 1">
🕺
</span>
</div>
<div esd-text="true" class="esd-text">
<span on="tap:AMP.setState({ answer_3_7: 1, error_3: +error_3+1 })" role="button" tabindex="1" [hidden]="answer_3_7 == 1">
👽
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="answer_3_8 == 1" on="tap:AMP.setState({ answer_3_8: 1, error_3: +error_3+1 })" role="button" tabindex="1">
👠
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_3_9 == 1" on="tap:AMP.setState({ answer_3_9: 1, error_3: +error_3+1 })">
🎸
</span>
</div>
<div esd-text="true" class="esd-text">
<span tabindex="1" [hidden]="answer_3_10 == 1" on="tap:AMP.setState({ answer_3_10: 1, error_3: +error_3+1 })" role="button">
🌂
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_3_11 == 1" on="tap:AMP.setState({ answer_3_11: 1, error_3: +error_3+1 })">
🐈
</span>
</div>
<div esd-text="true" class="esd-text">
<span role="button" tabindex="1" [hidden]="answer_3_12 == 1" on="tap:AMP.setState({ answer_3_12: 1, error_3: +error_3+1 })">
☘️
</span>
</div>
</div>
<div hidden [hidden]="correct_3_1 != 1 || correct_3_2 != 1 || correct_3_3 != 1" class="correct-message message">
<div esd-text="true" class="esd-text">
<div class="field">
<div esd-text="true" class="esd-text">
<span [hidden]="correct_3_1 != 1" hidden>
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_3_2 != 1" hidden>
🕺
</span>
</div>
<div esd-text="true" class="esd-text">
<span [hidden]="correct_3_3 != 1" hidden>
🎵
</span>
</div>
</div>
<h3 style="padding-bottom:20px;text-align:center">
Well done!
</h3>
<p>
As a reward, you receive 15% OFF to all our products. Your promo code is WINNER15 🙂
</p>
</div>
</div>
<div [hidden]="error_3 < 3" hidden class="wrong-message message">
<div esd-text="true" class="esd-text">
<h3 style="padding-bottom:20px;text-align:center">
The answer is incorrect.
</h3>
<p>
<button on="tap:AMP.setState({ correct_3_1: 0, correct_3_2: 0, correct_3_3: 0, error_3: 0, answer_3_1: 0, answer_3_2: 0, answer_3_3: 0, answer_3_4: 0, answer_3_5: 0, answer_3_6: 0, answer_3_7: 0, answer_3_8: 0, answer_3_9: 0, answer_3_10: 0, answer_3_11: 0, answer_3_12: 0 })" class="btn green">
Try again
</button>
</p>
</div>
</div>
</div>
</div>
Kinetic version built with HTML5 and CSS3
The next step is to create a kinetic version, which can also be called an interactive HTML version, built with HTML5 & CSS3. As with the AMP version, we need to create a foundation for this version, so we’ll start with another empty one-column structure. Select it, and pick 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) { .guess-emoji-html .emoji { width: 100%!important; } .guess-emoji-html .word { width: 100%!important; } } .guess-emoji-html { position: relative; } .guess-emoji-html .word { display: flex; justify-content: center; align-items: center; width: 300px; height: 200px; margin: 0 auto; border-radius: 5px; overflow: hidden; background-color: #d9d9d9; } .guess-emoji-html .field div { width: 60px; height: 60px; border-radius: 5px; background-color: #d9d9d9; font-size: 40px; text-align: center; } .guess-emoji-html .field { display: flex; justify-content: center; padding: 20px; gap: 10px; } .guess-emoji-html .emoji { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; width: 75%; margin: 0 auto 20px; } .guess-emoji-html .emoji div { width: 50px; height: 50px; } .guess-emoji-html .emoji label { cursor: pointer; font-size: 40px; } .guess-emoji-html .errors { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 auto; padding-bottom: 20px; } .guess-emoji-html .errors span { font-family: Arial, sans-serif; font-weight: bold; color: gray; font-size: 30px; } .guess-emoji-html .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; } .guess-emoji-html .btn { display:inline-block; border-radius: 5px; padding: 10px 20px; font-size: 16px; border: 0; margin: 5px 0; cursor: pointer; } .guess-emoji-html .green { background-color: #31cb4b; color: #ffffff; } .guess-emoji-html .gray { background-color: gray; color: #ffffff; } .guess-emoji-html .correct, .guess-emoji-html .screen-2, .guess-emoji-html .screen-3, .guess-emoji-html .message { display:none; } #input_1_1:checked~* .answer_1_1, #input_1_2:checked~* .answer_1_2, #input_1_3:checked~* .answer_1_3, #input_1_4:checked~* .answer_1_4, #input_1_5:checked~* .answer_1_5, #input_1_6:checked~* .answer_1_6, #input_1_7:checked~* .answer_1_7, #input_1_8:checked~* .answer_1_8, #input_1_9:checked~* .answer_1_9, #input_1_10:checked~* .answer_1_10, #input_1_11:checked~* .answer_1_11, #input_1_12:checked~* .answer_1_12 { display:none; } #input_2_1:checked~* .answer_2_1, #input_2_2:checked~* .answer_2_2, #input_2_3:checked~* .answer_2_3, #input_2_4:checked~* .answer_2_4, #input_2_5:checked~* .answer_2_5, #input_2_6:checked~* .answer_2_6, #input_2_7:checked~* .answer_2_7, #input_2_8:checked~* .answer_2_8, #input_2_9:checked~* .answer_2_9, #input_2_10:checked~* .answer_2_10, #input_2_11:checked~* .answer_2_11, #input_2_12:checked~* .answer_2_12 { display:none; } #input_3_1:checked~* .answer_3_1, #input_3_2:checked~* .answer_3_2, #input_3_3:checked~* .answer_3_3, #input_3_4:checked~* .answer_3_4, #input_3_5:checked~* .answer_3_5, #input_3_6:checked~* .answer_3_6, #input_3_7:checked~* .answer_3_7, #input_3_8:checked~* .answer_3_8, #input_3_9:checked~* .answer_3_9, #input_3_10:checked~* .answer_3_10, #input_3_11:checked~* .answer_3_11, #input_3_12:checked~* .answer_3_12 { display:none; } .input_error_1:checked~* .error_1_1, .input_error_1:checked~.input_error_1:checked~* .error_1_2, .input_error_1:checked~.input_error_1:checked~.input_error_1:checked~* .error_1_3 { color: red; } .input_error_2:checked~* .error_2_1, .input_error_2:checked~.input_error_2:checked~* .error_2_2, .input_error_2:checked~.input_error_2:checked~.input_error_2:checked~* .error_2_3 { color: red; } .input_error_3:checked~* .error_3_1, .input_error_3:checked~.input_error_3:checked~* .error_3_2, .input_error_3:checked~.input_error_3:checked~.input_error_3:checked~* .error_3_3 { color: red; } .input_error_1:checked~.input_error_1:checked~.input_error_1:checked~.screen-1 .wrong-message, .input_correct_1_1:checked~.input_correct_1_2:checked~.screen-1 .correct-message { display: flex; } .input_error_2:checked~.input_error_2:checked~.input_error_2:checked~.screen-2 .wrong-message, .input_correct_2_1:checked~.input_correct_2_2:checked~.input_correct_2_3:checked~.screen-2 .correct-message { display: flex; } .input_error_3:checked~.input_error_3:checked~.input_error_3:checked~.screen-3 .wrong-message, .input_correct_3_1:checked~.input_correct_3_2:checked~.input_correct_3_3:checked~.screen-3 .correct-message { display: flex; } .input_correct_1_1:checked~* .correct_1_1, .input_correct_1_2:checked~* .correct_1_2, .input_correct_2_1:checked~* .correct_2_1, .input_correct_2_2:checked~* .correct_2_2, .input_correct_2_3:checked~* .correct_2_3, .input_correct_3_1:checked~* .correct_3_1, .input_correct_3_2:checked~* .correct_3_2, .input_correct_3_3:checked~* .correct_3_3 { display:block; } #input-screen-2:checked~* .screen-1, #input-screen-3:checked~* .screen-2 { display:none!important; } #input-screen-2:checked~* .screen-2, #input-screen-3:checked~* .screen-3 { display:block; }
</style>
<div class="guess-emoji-html">
<input id="input-screen-2" name="input-screen" type="checkbox" style="display:none">
<input type="checkbox" id="input-screen-3" name="input-screen" style="display:none">
<form>
<input name="input_1" type="checkbox" id="input_1_1" class="input_correct_1_1" style="display:none">
<input id="input_1_2" name="input_1" type="checkbox" class="input_error_1" style="display:none">
<input type="checkbox" id="input_1_3" name="input_1" class="input_error_1" style="display:none">
<input id="input_1_4" name="input_1" type="checkbox" class="input_error_1" style="display:none">
<input id="input_1_5" name="input_1" type="checkbox" class="input_error_1" style="display:none">
<input id="input_1_6" name="input_1" type="checkbox" class="input_error_1" style="display:none">
<input name="input_1" type="checkbox" id="input_1_7" class="input_error_1" style="display:none">
<input type="checkbox" id="input_1_8" name="input_1" class="input_correct_1_2" style="display:none">
<input id="input_1_9" name="input_1" type="checkbox" class="input_error_1" style="display:none">
<input id="input_1_10" name="input_1" type="checkbox" class="input_error_1" style="display:none">
<input id="input_1_11" name="input_1" type="checkbox" class="input_error_1" style="display:none">
<input type="checkbox" id="input_1_12" name="input_1" class="input_error_1" style="display:none">
<input name="input_2" type="checkbox" id="input_2_1" class="input_error_2" style="display:none">
<input type="checkbox" id="input_2_2" name="input_2" class="input_correct_2_1" style="display:none">
<input name="input_2" type="checkbox" id="input_2_3" class="input_error_2" style="display:none">
<input id="input_2_4" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input id="input_2_5" name="input_2" type="checkbox" class="input_correct_2_2" style="display:none">
<input id="input_2_6" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input id="input_2_7" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input type="checkbox" id="input_2_8" name="input_2" class="input_error_2" style="display:none">
<input type="checkbox" id="input_2_9" name="input_2" class="input_error_2" style="display:none">
<input id="input_2_10" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input type="checkbox" id="input_2_11" name="input_2" class="input_correct_2_3" style="display:none">
<input id="input_2_12" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input name="input_3" type="checkbox" id="input_3_1" class="input_correct_3_1" style="display:none">
<input name="input_3" type="checkbox" id="input_3_2" class="input_error_3" style="display:none">
<input name="input_3" type="checkbox" id="input_3_3" class="input_correct_3_2" style="display:none">
<input id="input_3_4" name="input_3" type="checkbox" class="input_error_3" style="display:none">
<input id="input_3_5" name="input_3" type="checkbox" class="input_error_3" style="display:none">
<input type="checkbox" id="input_3_6" name="input_3" class="input_correct_3_3" style="display:none">
<input name="input_3" type="checkbox" id="input_3_7" class="input_error_3" style="display:none">
<input id="input_3_8" name="input_3" type="checkbox" class="input_error_3" style="display:none">
<input id="input_3_9" name="input_3" type="checkbox" class="input_error_3" style="display:none">
<input id="input_3_10" name="input_3" type="checkbox" class="input_error_3" style="display:none">
<input name="input_3" type="checkbox" id="input_3_11" class="input_error_3" style="display:none">
<input type="checkbox" id="input_3_12" name="input_3" class="input_error_3" style="display:none">
<!-- screen-1 -->
<div class="screen-1">
<div esd-text="true" class="word esd-text">
<h2 style="text-align:center">
Electric car
</h2>
</div>
<div class="field">
<div esd-text="true" class="esd-text">
<span class="correct correct_1_1">
🚗
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="correct correct_1_2">
🔋
</span>
</div>
</div>
<div class="errors">
<div esd-text="true" class="esd-text">
<span class="error_1_1">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_1_2">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_1_3">
X
</span>
</div>
</div>
<div class="emoji">
<div>
<label for="input_1_1" class="answer_1_1">
🚗
</label>
</div>
<div>
<label for="input_1_2" class="answer_1_2">
🐋
</label>
</div>
<div>
<label for="input_1_3" class="answer_1_3">
💧
</label>
</div>
<div>
<label for="input_1_4" class="answer_1_4">
🧀
</label>
</div>
<div>
<label for="input_1_5" class="answer_1_5">
🎸
</label>
</div>
<div>
<label for="input_1_6" class="answer_1_6">
👽
</label>
</div>
<div>
<label for="input_1_7" class="answer_1_7">
👠
</label>
</div>
<div>
<label for="input_1_8" class="answer_1_8">
🔋
</label>
</div>
<div>
<label for="input_1_9" class="answer_1_9">
🌂
</label>
</div>
<div>
<label for="input_1_10" class="answer_1_10">
💃
</label>
</div>
<div>
<label for="input_1_11" class="answer_1_11">
🐭
</label>
</div>
<div>
<label for="input_1_12" class="answer_1_12">
☘️
</label>
</div>
</div>
<div class="correct-message message">
<div esd-text="true" class="esd-text">
<div class="field">
<div>
<span>
🚗
</span>
</div>
<div>
<span>
🔋
</span>
</div>
</div>
<h3 style="text-align:center;padding-bottom:20px">
This is the correct answer!
</h3>
<p>
<label for="input-screen-2" class="btn green">
Next
</label>
</p>
</div>
</div>
<div class="wrong-message message">
<div esd-text="true" class="esd-text">
<h3 style="text-align:center;padding-bottom:20px">
The answer is incorrect.
</h3>
<p>
<button type="reset" class="btn green">
Try again
</button>
</p>
<p>
<label for="input-screen-2" class="btn gray">
Skip
</label>
</p>
</div>
</div>
</div>
<!-- screen-2 -->
<div class="screen-2">
<div class="word" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_4c061b96fa043d959035e0b791dddcb7cab89ac84bba5a13dd4bc7da58a74c8e/images/gf14145f8d00d7b0b1f95b59f6b9db464b60e13218d1ccc07c77520a11d20ca79456ba1bc93859314a8ccad3a656ab081_640.jpeg);background-repeat:no-repeat;background-size:cover"></div>
<div class="field">
<div esd-text="true" class="esd-text">
<span class="correct correct_2_1">
🐈
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="correct correct_2_2">
💤
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="correct correct_2_3">
🛏
</span>
</div>
</div>
<div class="errors">
<div esd-text="true" class="esd-text">
<span class="error_2_1">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_2_2">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_2_3">
X
</span>
</div>
</div>
<div class="emoji">
<div>
<label for="input_2_1" class="answer_2_1">
🐋
</label>
</div>
<div>
<label for="input_2_2" class="answer_2_2">
🐈
</label>
</div>
<div>
<label for="input_2_3" class="answer_2_3">
💧
</label>
</div>
<div>
<label for="input_2_4" class="answer_2_4">
🧀
</label>
</div>
<div>
<label for="input_2_5" class="answer_2_5">
💤
</label>
</div>
<div>
<label for="input_2_6" class="answer_2_6">
👽
</label>
</div>
<div>
<label for="input_2_7" class="answer_2_7">
👠
</label>
</div>
<div>
<label for="input_2_8" class="answer_2_8">
🎸
</label>
</div>
<div>
<label for="input_2_9" class="answer_2_9">
🌂
</label>
</div>
<div>
<label for="input_2_10" class="answer_2_10">
💃
</label>
</div>
<div>
<label for="input_2_11" class="answer_2_11">
🛏
</label>
</div>
<div>
<label for="input_2_12" class="answer_2_12">
☘️
</label>
</div>
</div>
<div class="correct-message message">
<div esd-text="true" class="esd-text">
<div class="field">
<div>
<span>
🐈
</span>
</div>
<div>
<span>
💤
</span>
</div>
<div>
<span>
🛏
</span>
</div>
</div>
<h3 style="padding-bottom:20px;text-align:center">
This is the correct answer!
</h3>
<p>
<label for="input-screen-3" class="btn green">
Next
</label>
</p>
</div>
</div>
<div class="wrong-message message">
<div esd-text="true" class="esd-text">
<h3 style="padding-bottom:20px;text-align:center">
The answer is incorrect.
</h3>
<p>
<button type="reset" class="btn green">
Try again
</button>
</p>
<p>
<label for="input-screen-3" class="btn gray">
Skip
</label>
</p>
</div>
</div>
</div>
<!-- screen-3 -->
<div class="screen-3">
<div esd-text="true" class="word esd-text">
<h2 style="text-align:center">
Dance to the music
</h2>
</div>
<div class="field">
<div esd-text="true" class="esd-text">
<span class="correct correct_3_1">
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="correct correct_3_2">
🕺
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="correct correct_3_3">
🎵
</span>
</div>
</div>
<div class="errors">
<div esd-text="true" class="esd-text">
<span class="error_3_1">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_3_2">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_3_3">
X
</span>
</div>
</div>
<div class="emoji">
<div>
<label for="input_3_1" class="answer_3_1">
💃
</label>
</div>
<div>
<label for="input_3_2" class="answer_3_2">
🐋
</label>
</div>
<div>
<label for="input_3_3" class="answer_3_3">
🕺
</label>
</div>
<div>
<label for="input_3_4" class="answer_3_4">
💧
</label>
</div>
<div>
<label for="input_3_5" class="answer_3_5">
🧀
</label>
</div>
<div>
<label for="input_3_6" class="answer_3_6">
🎵
</label>
</div>
<div>
<label for="input_3_7" class="answer_3_7">
👽
</label>
</div>
<div>
<label for="input_3_8" class="answer_3_8">
👠
</label>
</div>
<div>
<label for="input_3_9" class="answer_3_9">
🎸
</label>
</div>
<div>
<label for="input_3_10" class="answer_3_10">
🌂
</label>
</div>
<div>
<label for="input_3_11" class="answer_3_11">
🐈
</label>
</div>
<div>
<label for="input_3_12" class="answer_3_12">
☘️
</label>
</div>
</div>
<div class="correct-message message">
<div esd-text="true" class="esd-text">
<div class="field">
<div>
<span>
💃
</span>
</div>
<div>
<span>
🕺
</span>
</div>
<div>
<span>
🎵
</span>
</div>
</div>
<h3 style="padding-bottom:20px;text-align:center">
Well done!
</h3>
<p>
As a reward, you receive 15% OFF to all our products. Your promo code is WINNER15 🙂
</p>
</div>
</div>
<div class="wrong-message message">
<div esd-text="true" class="esd-text">
<h3 style="text-align:center;padding-bottom:20px">
The answer is incorrect.
</h3>
<p>
<button type="reset" class="btn green">
Try again
</button>
</p>
</div>
</div>
</div>
</form>
</div>
The HTML version has a similar structure to the AMP version, but all interactivity is achieved using input and label tags.
In this example, we have three steps with riddles. Each step has its own set of emoji (div with the emoji class) that the recipient can select. They need to be clickable, so we replaced them all with a label tag and added classes (answer_1_1, answer_1_2, etc.) and attributes for="input_1_1", where input_1_1 is the ID of the input tags (for="input_1_1", for="input_1_2", etc.).
The numbers in both the class and the attribute change, namely, the first number corresponds to the step, and the second to the emoji number.
We wrapped the entire game layout in the <form></form> tag. This is done to ensure the Try Again button works correctly, as in this version we've replaced it with a button type="reset". This type of button allows you to clear all fields contained within the form tag. This way, we can easily clear the form and start the game over.
Meanwhile, we inserted all emoji-related inputs into the code after the <form> tag:
Please note that each input has not only an ID that links the input to a specific emoji, but also classes input_error_1, input_correct_1_1, input_correct_1_2.
The input_correct_1_1 and input_correct_1_2 classes were added to correct answers, and the input_error_1 class was added to all others. As a reminder, the first digit, 1, here indicates the game step number.
Besides that, two more inputs were added before the <form> tag. These inputs are responsible for switching steps and cannot be cleared. Therefore, we moved them outside the <form> tag, because if the recipient clicks Next or Skip, they can't return to the previous step.
The Next and Skip buttons themselves have been replaced with label tags linked to these inputs. In the first step, the link goes to input-screen-2 like this:
And like this:
In the second step, the binding goes to input-screen-3 like this:
And this:
Styles part
Now, let’s have a quick look at the style code for this game. According to the game's logic, error messages and correct answers, as well as next steps, should be hidden, so the code for this includes the following piece:
In addition, for all clickable emojis in each step, the following style is specified so that these emojis are hidden when clicked:
Next, let's talk about the red color for errors. Here, we used classes rather than input IDs. If only one input with an error class is active, the first cross is colored; if two inputs are active, the second cross is colored, and so on. Here's how it looks in code:
And here:
Now let's talk about how messages work. The principle is the same for all steps. If all three errors are selected, the wrong-message will be displayed; if all correct answers are selected, the correct-message will be displayed:
Next come the styles for displaying the guessed emoji.
Here’s what the style code for all steps looks like:
And the last styles are responsible for the steps:
Fallback version
For email clients that don't support HTML5 and CSS3, or AMP, you need to create an additional block with code. The fallback version will be shown automatically. At its core, it will be an imitation of the game that transfers recipients to the needed page once the fallback version is clicked on.
In this example, the fallback version will look slightly different. The emoji will vary depending on the email client, and in Outlook, the corners won't be rounded. This is because in this example, the fallback is a layout, not just an image.
We continue to work on the block with interactive HTML, which we made above. Paste the following code between the </style> and <div class="guess-emoji-html"> tags:
<!--[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 cellpadding="0" cellspacing="0" width="100%">
<tbody valign="middle">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tbody valign="middle">
<tr>
<td>
</td>
<td align="center" esd-text="true" height="200" width="300" class="esd-text" style="background-color:#D9D9D9;width:300px;height:200px;border-radius:5px">
<h2 style="text-align:center">
Electric car
</h2>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom:15px;padding-top:20px">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody valign="middle">
<tr>
<td>
</td>
<td width="60" align="center" height="60" style="border-radius:5px;background-color:#D9D9D9;width:60px;height:60px">
</td>
<td width="10">
</td>
<td align="center" height="60" width="60" style="border-radius:5px;background-color:#D9D9D9;width:60px;height:60px">
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom:15px">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody valign="middle">
<tr>
<td>
</td>
<td width="30" align="center" esd-text="true" class="esd-text">
<p style="color:gray;font-size:30px!important;font-family:Arial, sans-serif;font-weight:bold">
X
</p>
</td>
<td align="center" esd-text="true" width="30" class="esd-text">
<p style="color:gray;font-size:30px!important;font-family:Arial, sans-serif;font-weight:bold">
X
</p>
</td>
<td esd-text="true" width="30" align="center" class="esd-text">
<p style="font-weight:bold;color:gray;font-size:30px!important;font-family:Arial, sans-serif">
X
</p>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody valign="middle">
<tr>
<td>
</td>
<td align="center" esd-text="true" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 🚗 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="font-size:40px;text-decoration:none"> 🐋 </a>
</h3>
</td>
<td esd-text="true" align="center" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="font-size:40px;text-decoration:none"> 💧 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="height:50px;width:60px">
<h3>
<a target="_blank" href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" style="font-size:40px;text-decoration:none"> 🧀 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="height:50px;width:60px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 🎸 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="height:50px;width:60px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 👽 </a>
</h3>
</td>
<td esd-text="true" align="center" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="font-size:40px;text-decoration:none"> 👠 </a>
</h3>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody valign="middle">
<tr>
<td>
</td>
<td align="center" style="height:50px;width:60px">
</td>
<td align="center" esd-text="true" class="esd-text" style="height:50px;width:60px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 🔋 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="font-size:40px;text-decoration:none"> 🌂 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 💃 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="height:50px;width:60px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 🐭 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="font-size:40px;text-decoration:none"> ☘️ </a>
</h3>
</td>
<td align="center" style="width:60px;height:50px">
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="display:none;mso-hide:all">
Besides that, at the end of the entire code, you also need to insert this small piece of code:
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
Essentially, this is a full-fledged game layout. The hidden word can be changed here by simply replacing the text.
Links to the web version and the emoji themselves need to be changed for each emoji (in our example, there are 12) if you want the game to lead on your own web page.
If you need to change colors or sizes, these styles are written inline for each element.
Now we need to add styles to display only the version suitable 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;
}
}
There is an important piece of code in the 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 using styles. It's in the comments <!--[if !mso]><!--> … <!--<![endif]--> to ensure 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, it's a table with links to the web version. You can create your own layout; just make sure it's understandable for Outlook.
The styles below are used to hide and show the fallback version. If you remove them or comment them out, the fallback version will be visible, and you can customize its design. But don't forget to re-enable these styles before sending the email.
These styles don't have clear rules for each email client, but 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) { .guess-emoji-html .emoji { width: 100%!important; } .guess-emoji-html .word { width: 100%!important; } } .guess-emoji-html { position: relative; } .guess-emoji-html .word { display: flex; justify-content: center; align-items: center; width: 300px; height: 200px; margin: 0 auto; border-radius: 5px; overflow: hidden; background-color: #d9d9d9; } .guess-emoji-html .field div { width: 60px; height: 60px; border-radius: 5px; background-color: #d9d9d9; font-size: 40px; text-align: center; } .guess-emoji-html .field { display: flex; justify-content: center; padding: 20px; gap: 10px; } .guess-emoji-html .emoji { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; width: 75%; margin: 0 auto 20px; } .guess-emoji-html .emoji div { width: 50px; height: 50px; } .guess-emoji-html .emoji label { cursor: pointer; font-size: 40px; } .guess-emoji-html .errors { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 auto; padding-bottom: 20px; } .guess-emoji-html .errors span { font-family: Arial, sans-serif; font-weight: bold; color: gray; font-size: 30px; } .guess-emoji-html .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; } .guess-emoji-html .btn { display:inline-block; border-radius: 5px; padding: 10px 20px; font-size: 16px; border: 0; margin: 5px 0; cursor: pointer; } .guess-emoji-html .green { background-color: #31cb4b; color: #ffffff; } .guess-emoji-html .gray { background-color: gray; color: #ffffff; } .guess-emoji-html .correct, .guess-emoji-html .screen-2, .guess-emoji-html .screen-3, .guess-emoji-html .message { display:none; } #input_1_1:checked~* .answer_1_1, #input_1_2:checked~* .answer_1_2, #input_1_3:checked~* .answer_1_3, #input_1_4:checked~* .answer_1_4, #input_1_5:checked~* .answer_1_5, #input_1_6:checked~* .answer_1_6, #input_1_7:checked~* .answer_1_7, #input_1_8:checked~* .answer_1_8, #input_1_9:checked~* .answer_1_9, #input_1_10:checked~* .answer_1_10, #input_1_11:checked~* .answer_1_11, #input_1_12:checked~* .answer_1_12 { display:none; } #input_2_1:checked~* .answer_2_1, #input_2_2:checked~* .answer_2_2, #input_2_3:checked~* .answer_2_3, #input_2_4:checked~* .answer_2_4, #input_2_5:checked~* .answer_2_5, #input_2_6:checked~* .answer_2_6, #input_2_7:checked~* .answer_2_7, #input_2_8:checked~* .answer_2_8, #input_2_9:checked~* .answer_2_9, #input_2_10:checked~* .answer_2_10, #input_2_11:checked~* .answer_2_11, #input_2_12:checked~* .answer_2_12 { display:none; } #input_3_1:checked~* .answer_3_1, #input_3_2:checked~* .answer_3_2, #input_3_3:checked~* .answer_3_3, #input_3_4:checked~* .answer_3_4, #input_3_5:checked~* .answer_3_5, #input_3_6:checked~* .answer_3_6, #input_3_7:checked~* .answer_3_7, #input_3_8:checked~* .answer_3_8, #input_3_9:checked~* .answer_3_9, #input_3_10:checked~* .answer_3_10, #input_3_11:checked~* .answer_3_11, #input_3_12:checked~* .answer_3_12 { display:none; } .input_error_1:checked~* .error_1_1, .input_error_1:checked~.input_error_1:checked~* .error_1_2, .input_error_1:checked~.input_error_1:checked~.input_error_1:checked~* .error_1_3 { color: red; } .input_error_2:checked~* .error_2_1, .input_error_2:checked~.input_error_2:checked~* .error_2_2, .input_error_2:checked~.input_error_2:checked~.input_error_2:checked~* .error_2_3 { color: red; } .input_error_3:checked~* .error_3_1, .input_error_3:checked~.input_error_3:checked~* .error_3_2, .input_error_3:checked~.input_error_3:checked~.input_error_3:checked~* .error_3_3 { color: red; } .input_error_1:checked~.input_error_1:checked~.input_error_1:checked~.screen-1 .wrong-message, .input_correct_1_1:checked~.input_correct_1_2:checked~.screen-1 .correct-message { display: flex; } .input_error_2:checked~.input_error_2:checked~.input_error_2:checked~.screen-2 .wrong-message, .input_correct_2_1:checked~.input_correct_2_2:checked~.input_correct_2_3:checked~.screen-2 .correct-message { display: flex; } .input_error_3:checked~.input_error_3:checked~.input_error_3:checked~.screen-3 .wrong-message, .input_correct_3_1:checked~.input_correct_3_2:checked~.input_correct_3_3:checked~.screen-3 .correct-message { display: flex; } .input_correct_1_1:checked~* .correct_1_1, .input_correct_1_2:checked~* .correct_1_2, .input_correct_2_1:checked~* .correct_2_1, .input_correct_2_2:checked~* .correct_2_2, .input_correct_2_3:checked~* .correct_2_3, .input_correct_3_1:checked~* .correct_3_1, .input_correct_3_2:checked~* .correct_3_2, .input_correct_3_3:checked~* .correct_3_3 { display:block; } #input-screen-2:checked~* .screen-1, #input-screen-3:checked~* .screen-2 { display:none!important; } #input-screen-2:checked~* .screen-2, #input-screen-3:checked~* .screen-3 { 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="display:none !important;mso-hide:all">
<!--<![endif]-->
<!-- FALLBACK -->
<span id="fallback" class="fallback">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody valign="middle">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tbody valign="middle">
<tr>
<td>
</td>
<td align="center" esd-text="true" height="200" width="300" class="esd-text" style="background-color:#D9D9D9;width:300px;height:200px;border-radius:5px">
<h2 style="text-align:center">
Electric car
</h2>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom:15px;padding-top:20px">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody valign="middle">
<tr>
<td>
</td>
<td width="60" align="center" height="60" style="border-radius:5px;background-color:#D9D9D9;width:60px;height:60px">
</td>
<td width="10">
</td>
<td align="center" height="60" width="60" style="border-radius:5px;background-color:#D9D9D9;width:60px;height:60px">
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom:15px">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody valign="middle">
<tr>
<td>
</td>
<td width="30" align="center" esd-text="true" class="esd-text">
<p style="color:gray;font-size:30px!important;font-family:Arial, sans-serif;font-weight:bold">
X
</p>
</td>
<td align="center" esd-text="true" width="30" class="esd-text">
<p style="color:gray;font-size:30px!important;font-family:Arial, sans-serif;font-weight:bold">
X
</p>
</td>
<td esd-text="true" width="30" align="center" class="esd-text">
<p style="font-weight:bold;color:gray;font-size:30px!important;font-family:Arial, sans-serif">
X
</p>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody valign="middle">
<tr>
<td>
</td>
<td align="center" esd-text="true" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 🚗 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="font-size:40px;text-decoration:none"> 🐋 </a>
</h3>
</td>
<td esd-text="true" align="center" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="font-size:40px;text-decoration:none"> 💧 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="height:50px;width:60px">
<h3>
<a target="_blank" href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" style="font-size:40px;text-decoration:none"> 🧀 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="height:50px;width:60px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 🎸 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="height:50px;width:60px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 👽 </a>
</h3>
</td>
<td esd-text="true" align="center" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="font-size:40px;text-decoration:none"> 👠 </a>
</h3>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody valign="middle">
<tr>
<td>
</td>
<td align="center" style="height:50px;width:60px">
</td>
<td align="center" esd-text="true" class="esd-text" style="height:50px;width:60px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 🔋 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="font-size:40px;text-decoration:none"> 🌂 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 💃 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="height:50px;width:60px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="text-decoration:none;font-size:40px"> 🐭 </a>
</h3>
</td>
<td align="center" esd-text="true" class="esd-text" style="width:60px;height:50px">
<h3>
<a href="https://viewstripo.email/f521f8e7-7f02-4354-9b59-0fac389ee8921759229108082?type=amphtml" target="_blank" style="font-size:40px;text-decoration:none"> ☘️ </a>
</h3>
</td>
<td align="center" style="width:60px;height:50px">
</td>
<td>
</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="guess-emoji-html">
<input type="checkbox" id="input-screen-2" name="input-screen" style="display:none">
<input id="input-screen-3" name="input-screen" type="checkbox" style="display:none">
<form>
<input type="checkbox" id="input_1_1" name="input_1" class="input_correct_1_1" style="display:none">
<input name="input_1" type="checkbox" id="input_1_2" class="input_error_1" style="display:none">
<input name="input_1" type="checkbox" id="input_1_3" class="input_error_1" style="display:none">
<input type="checkbox" id="input_1_4" name="input_1" class="input_error_1" style="display:none">
<input id="input_1_5" name="input_1" type="checkbox" class="input_error_1" style="display:none">
<input id="input_1_6" name="input_1" type="checkbox" class="input_error_1" style="display:none">
<input name="input_1" type="checkbox" id="input_1_7" class="input_error_1" style="display:none">
<input id="input_1_8" name="input_1" type="checkbox" class="input_correct_1_2" style="display:none">
<input id="input_1_9" name="input_1" type="checkbox" class="input_error_1" style="display:none">
<input type="checkbox" id="input_1_10" name="input_1" class="input_error_1" style="display:none">
<input id="input_1_11" name="input_1" type="checkbox" class="input_error_1" style="display:none">
<input type="checkbox" id="input_1_12" name="input_1" class="input_error_1" style="display:none">
<input id="input_2_1" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input id="input_2_2" name="input_2" type="checkbox" class="input_correct_2_1" style="display:none">
<input type="checkbox" id="input_2_3" name="input_2" class="input_error_2" style="display:none">
<input name="input_2" type="checkbox" id="input_2_4" class="input_error_2" style="display:none">
<input type="checkbox" id="input_2_5" name="input_2" class="input_correct_2_2" style="display:none">
<input id="input_2_6" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input id="input_2_7" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input id="input_2_8" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input id="input_2_9" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input id="input_2_10" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input id="input_2_11" name="input_2" type="checkbox" class="input_correct_2_3" style="display:none">
<input id="input_2_12" name="input_2" type="checkbox" class="input_error_2" style="display:none">
<input id="input_3_1" name="input_3" type="checkbox" class="input_correct_3_1" style="display:none">
<input type="checkbox" id="input_3_2" name="input_3" class="input_error_3" style="display:none">
<input id="input_3_3" name="input_3" type="checkbox" class="input_correct_3_2" style="display:none">
<input id="input_3_4" name="input_3" type="checkbox" class="input_error_3" style="display:none">
<input type="checkbox" id="input_3_5" name="input_3" class="input_error_3" style="display:none">
<input type="checkbox" id="input_3_6" name="input_3" class="input_correct_3_3" style="display:none">
<input id="input_3_7" name="input_3" type="checkbox" class="input_error_3" style="display:none">
<input name="input_3" type="checkbox" id="input_3_8" class="input_error_3" style="display:none">
<input id="input_3_9" name="input_3" type="checkbox" class="input_error_3" style="display:none">
<input id="input_3_10" name="input_3" type="checkbox" class="input_error_3" style="display:none">
<input id="input_3_11" name="input_3" type="checkbox" class="input_error_3" style="display:none">
<input id="input_3_12" name="input_3" type="checkbox" class="input_error_3" style="display:none">
<!-- screen-1 -->
<div class="screen-1">
<div esd-text="true" class="word esd-text">
<h2 style="text-align:center">
Electric car
</h2>
</div>
<div class="field">
<div esd-text="true" class="esd-text">
<span class="correct correct_1_1">
🚗
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="correct correct_1_2">
🔋
</span>
</div>
</div>
<div class="errors">
<div esd-text="true" class="esd-text">
<span class="error_1_1">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_1_2">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_1_3">
X
</span>
</div>
</div>
<div class="emoji">
<div>
<label for="input_1_1" class="answer_1_1">
🚗
</label>
</div>
<div>
<label for="input_1_2" class="answer_1_2">
🐋
</label>
</div>
<div>
<label for="input_1_3" class="answer_1_3">
💧
</label>
</div>
<div>
<label for="input_1_4" class="answer_1_4">
🧀
</label>
</div>
<div>
<label for="input_1_5" class="answer_1_5">
🎸
</label>
</div>
<div>
<label for="input_1_6" class="answer_1_6">
👽
</label>
</div>
<div>
<label for="input_1_7" class="answer_1_7">
👠
</label>
</div>
<div>
<label for="input_1_8" class="answer_1_8">
🔋
</label>
</div>
<div>
<label for="input_1_9" class="answer_1_9">
🌂
</label>
</div>
<div>
<label for="input_1_10" class="answer_1_10">
💃
</label>
</div>
<div>
<label for="input_1_11" class="answer_1_11">
🐭
</label>
</div>
<div>
<label for="input_1_12" class="answer_1_12">
☘️
</label>
</div>
</div>
<div class="correct-message message">
<div esd-text="true" class="esd-text">
<div class="field">
<div>
<span>
🚗
</span>
</div>
<div>
<span>
🔋
</span>
</div>
</div>
<h3 style="text-align:center;padding-bottom:20px">
This is the correct answer!
</h3>
<p>
<label for="input-screen-2" class="btn green">
Next
</label>
</p>
</div>
</div>
<div class="wrong-message message">
<div esd-text="true" class="esd-text">
<h3 style="padding-bottom:20px;text-align:center">
The answer is incorrect.
</h3>
<p>
<button type="reset" class="btn green">
Try again
</button>
</p>
<p>
<label for="input-screen-2" class="btn gray">
Skip
</label>
</p>
</div>
</div>
</div>
<!-- screen-2 -->
<div class="screen-2">
<div class="word" style="background-image:url(https://zlnfb.stripocdn.email/content/guids/CABINET_4c061b96fa043d959035e0b791dddcb7cab89ac84bba5a13dd4bc7da58a74c8e/images/gf14145f8d00d7b0b1f95b59f6b9db464b60e13218d1ccc07c77520a11d20ca79456ba1bc93859314a8ccad3a656ab081_640.jpeg);background-repeat:no-repeat;background-size:cover"></div>
<div class="field">
<div esd-text="true" class="esd-text">
<span class="correct correct_2_1">
🐈
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="correct correct_2_2">
💤
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="correct correct_2_3">
🛏
</span>
</div>
</div>
<div class="errors">
<div esd-text="true" class="esd-text">
<span class="error_2_1">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_2_2">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_2_3">
X
</span>
</div>
</div>
<div class="emoji">
<div>
<label for="input_2_1" class="answer_2_1">
🐋
</label>
</div>
<div>
<label for="input_2_2" class="answer_2_2">
🐈
</label>
</div>
<div>
<label for="input_2_3" class="answer_2_3">
💧
</label>
</div>
<div>
<label for="input_2_4" class="answer_2_4">
🧀
</label>
</div>
<div>
<label for="input_2_5" class="answer_2_5">
💤
</label>
</div>
<div>
<label for="input_2_6" class="answer_2_6">
👽
</label>
</div>
<div>
<label for="input_2_7" class="answer_2_7">
👠
</label>
</div>
<div>
<label for="input_2_8" class="answer_2_8">
🎸
</label>
</div>
<div>
<label for="input_2_9" class="answer_2_9">
🌂
</label>
</div>
<div>
<label for="input_2_10" class="answer_2_10">
💃
</label>
</div>
<div>
<label for="input_2_11" class="answer_2_11">
🛏
</label>
</div>
<div>
<label for="input_2_12" class="answer_2_12">
☘️
</label>
</div>
</div>
<div class="correct-message message">
<div esd-text="true" class="esd-text">
<div class="field">
<div>
<span>
🐈
</span>
</div>
<div>
<span>
💤
</span>
</div>
<div>
<span>
🛏
</span>
</div>
</div>
<h3 style="text-align:center;padding-bottom:20px">
This is the correct answer!
</h3>
<p>
<label for="input-screen-3" class="btn green">
Next
</label>
</p>
</div>
</div>
<div class="wrong-message message">
<div esd-text="true" class="esd-text">
<h3 style="padding-bottom:20px;text-align:center">
The answer is incorrect.
</h3>
<p>
<button type="reset" class="btn green">
Try again
</button>
</p>
<p>
<label for="input-screen-3" class="btn gray">
Skip
</label>
</p>
</div>
</div>
</div>
<!-- screen-3 -->
<div class="screen-3">
<div esd-text="true" class="word esd-text">
<h2 style="text-align:center">
Dance to the music
</h2>
</div>
<div class="field">
<div esd-text="true" class="esd-text">
<span class="correct correct_3_1">
💃
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="correct correct_3_2">
🕺
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="correct correct_3_3">
🎵
</span>
</div>
</div>
<div class="errors">
<div esd-text="true" class="esd-text">
<span class="error_3_1">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_3_2">
X
</span>
</div>
<div esd-text="true" class="esd-text">
<span class="error_3_3">
X
</span>
</div>
</div>
<div class="emoji">
<div>
<label for="input_3_1" class="answer_3_1">
💃
</label>
</div>
<div>
<label for="input_3_2" class="answer_3_2">
🐋
</label>
</div>
<div>
<label for="input_3_3" class="answer_3_3">
🕺
</label>
</div>
<div>
<label for="input_3_4" class="answer_3_4">
💧
</label>
</div>
<div>
<label for="input_3_5" class="answer_3_5">
🧀
</label>
</div>
<div>
<label for="input_3_6" class="answer_3_6">
🎵
</label>
</div>
<div>
<label for="input_3_7" class="answer_3_7">
👽
</label>
</div>
<div>
<label for="input_3_8" class="answer_3_8">
👠
</label>
</div>
<div>
<label for="input_3_9" class="answer_3_9">
🎸
</label>
</div>
<div>
<label for="input_3_10" class="answer_3_10">
🌂
</label>
</div>
<div>
<label for="input_3_11" class="answer_3_11">
🐈
</label>
</div>
<div>
<label for="input_3_12" class="answer_3_12">
☘️
</label>
</div>
</div>
<div class="correct-message message">
<div esd-text="true" class="esd-text">
<div class="field">
<div>
<span>
💃
</span>
</div>
<div>
<span>
🕺
</span>
</div>
<div>
<span>
🎵
</span>
</div>
</div>
<h3 style="text-align:center;padding-bottom:20px">
Well done!
</h3>
<p>
As a reward, you receive 15% OFF to all our products. Your promo code is WINNER15 🙂
</p>
</div>
</div>
<div class="wrong-message message">
<div esd-text="true" class="esd-text">
<h3 style="text-align:center;padding-bottom:20px">
The answer is incorrect.
</h3>
<p>
<button type="reset" class="btn green">
Try again
</button>
</p>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
Wrapping up
Another game and another easy creation process. This game can grant your emails a new level of interactivity and open new horizons for your marketing activities. Creating the Guess the emoji game won’t take much time, but the value it will bring to your newsletter is immeasurable. Use this game, tweak it to your heart’s content, and set your email marketing on the path of interactive content.
Create exceptional emails with Stripo
0 comments