Remember that game from children’s magazines or the backs of cereal boxes where you have to connect all the dots to get a picture? Everyone is probably familiar with this intrigue when you draw a line from one dot to another and do not know what picture you will get at the end.
We bring back these pleasant memories in our new interactive mechanic for emails called the “Dot to Dot” game. This interactivity piece can find many uses in email marketing:
- seasonal campaigns can be supported with thematic drawings that recipients must draw with dots, increasing overall campaign engagement;
- special offers can be granted through competition of this game, making it both challenging and fun;
- revealing or announcing new products through an intriguing game like this can generate more buzz around your brand and future marketing moves.
In this article, we will show you in detail how to create a full-fledged game that will include the following:
- AMP version of the game with five images;
- interactive HTML version with the same five images;
- fallback version for email clients that do not support interactivity.
Let’s dive into our guide.
How the game works
First, it is worth discussing the principle of how the game functions in general. In our example, the recipient needs to draw a rocket. The drawing itself is divided into several segments, between which there are dots. Next, we need each segment, and the dots are laid out separately (namely, for each segment 1-2, 2-3, 3-4, etc., a separate block is created that moves and turns at the desired angle). Combining all of these allows recipients to complete the image with lines, as they were drawn by hand.
AMP version
Let’s start by adding an empty structure and selecting “Include in AMPHTML.”
<style amp-custom>
.dot-amp .dot-container {
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/images/bg.png) no-repeat top center;
background-size: contain;
width: 300px;
height: 450px;
margin: 0 auto;
position: relative;
}
.dot-amp .circle {
display: inline-block;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}
.dot-amp .active .circle,
.dot-amp .dot:hover .circle {
background: blue;
}
.dot-amp .number {
display: block;
position: absolute;
right: -10px;
line-height: 10px;
}
.dot-amp .line {
background: #000;
width: 3px;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dot-amp .dot {
display: block;
cursor: pointer;
padding: 10px;
position: absolute;
bottom: -18px;
left: 50%;
transform: translate(-50%, 0);
line-height: 10px;
}
.dot-amp .block-1-2 {
width: 7.50%;
height: 20.17%;
position: absolute;
top: 1.67%;
right: 17.75%;
transform: rotate(-23deg);
}
.dot-amp .dot-1 {
top: -14px;
bottom: auto;
}
.dot-amp .dot-1 .number {
transform: rotate(23deg);
}
.dot-amp .dot-2 .number {
transform: rotate(23deg);
}
.dot-amp .block-2-3 {
width: 7.50%;
height: 16.83%;
position: absolute;
transform: rotate(-5deg);
top: 21.83%;
right: 10.50%;
}
.dot-amp .dot-3 .number {
transform: rotate(5deg);
}
.dot-amp .result {
padding: 20px 0;
text-align: center;
}
@media only screen and (max-width: 600px) {
.dot-amp .dot-container {
width: 250px;
height: 375px;
}
}
</style>
<div class="dot-amp">
<div class="dot-container">
<div class="block-2-3">
<div class="line line-2-3" hidden [hidden]="dot2!=1 || dot3!=1"></div>
<label role="button" tabindex="3" on="tap:AMP.setState({dot3:1, active:3})" class="dot dot-3" [class]="active == 3 ? 'dot dot-3 active' : 'dot dot-3'">
<span class="number">3</span>
<span class="circle"></span>
</label>
</div>
<div class="block-1-2">
<div class="line line-1-2" hidden [hidden]="dot1!=1 || dot2!=1"></div>
<label role="button" tabindex="1" on="tap:AMP.setState({dot1:1, active:1})" class="dot dot-1" [class]="active == 1 ? 'dot dot-1 active' : 'dot dot-1'">
<span class="number">1</span>
<span class="circle"></span>
</label>
<label role="button" tabindex="2" on="tap:AMP.setState({dot2:1, active:2})" class="dot dot-2" [class]="active == 2 ? 'dot dot-2 active' : 'dot dot-2'">
<span class="number">2</span>
<span class="circle"></span>
</label>
</div>
</div>
<div class="result" hidden [hidden]="[dot1,dot2,dot3].indexOf(null) != -1">
<h2 style="padding-bottom:15px">Congratulations!</h2>
<p>Here's your personal promo code GAMIFICATION for 15% OFF sitewide.</p>
</div>
</div>
At the moment, the code has 3 dots and 2 segments (later, more will be added for the complete look of the game, as was shown in the demonstration GIF). In the layout, the blocks are named by segments block-1-2, block-2-3, and so on. The first block 1-2 consists of a line and two dots №1 and №2. In all other blocks, there will be a line and one dot (in block 2-3 dot №3, in block 3-4 dot №4, and so on).
Let’s take a closer look at one of the blocks.
The first element is div; this is our line. It has attributes hidden [hidden]="dot2!=1 || dot3!=1", where:
- hidden — hides the element;
- [hidden] — sets the condition when to hide the element (in our example, hide until dot2 and dot3 are equal to 1).
Next is the label tag, which is dot 3. It has the following attributes: role="button" tabindex="3" on="tap:AMP.setState({dot3:1, active:3})" [class]="active == 3 ? 'dot dot-3 active' : 'dot dot-3'", where:
- role="button" is an attribute that is added to the element and acts as a button;
- tabindex="3" is a required attribute if role="button" is present, as it sets the sequence of receiving focus when switching between elements using the tab key;
- on="tap:AMP.setState({dot3:1, active:3})" is the “click” event handler (on="tap:”);
- dot3 is a variable that initially has a null value, but when the recipient clicks on this dot, the value 1 is written to the variable, which helps to understand which dots the user clicked on;
- active is a variable that is needed to highlight the dot when it is active; we write the number of the dot the user clicked on into it;
- [class]="active == 3 ? 'dot dot-3 active' : 'dot dot-3'" is an attribute in which the condition for displaying classes is written: if the value of the variable active is 3, dot dot-3 active classes are added; otherwise, only dot dot-3 classes are left.
The remaining segments (except 1-2) must have the same layout; only the numbers are changed in accordance with the dot numbers. The very first segment 1-2 differs in that it has 2 dots at once (№1 and №2).
Endgame message
The next thing worth talking about is a message that appears once the game is finished. To add your custom text, replace our example in the marked area with your copy.
It has [hidden]="[dot1,dot2,dot3].indexOf(null) != -1" attribute that hides the element when the condition is met. In our example, the block will be hidden when at least one of the variables, dot1, dot2, and dot3, has a null value (it will be if the dot was not clicked). To make it appear in a custom game with a custom number of dots, they should all be listed here.
Understanding styles
Now, let’s talk about how the game looks, meaning its style code. Below, you can see the code that specifies the background image of the rocket and the block size for the desktop version. As a result, to set your custom background image for the game, you must change the link in a highlighter area to your custom image link.
Important note: To replace our image with your own, you need to prepare it, as in our example. You also need to change the block size if your image has different proportions.
The desktop version of the game in our example has the following dimensions:
The mobile size of our game is designated with this code part:
Meanwhile, the colors for dots by default and for dots on hover are set in this code part:
The color of the lines between the dots is defined in this piece of code:
Position of lines via styles and how to customize them
Now, the most difficult part of the styles — which is responsible for the angle at which the lines go and, in essence, helps to create a drawing:
This piece of code specifies the dimensions, coordinates, and slopes of each segment. Since we rotate the entire block with (transform: rotate(-23deg)), the numbers in it also rotate. To make them look even, we align each number back with the style transform, namely rotate(23deg).
All values are set in percent so that they don’t need to be changed on mobile.
How to calculate values in percentages
You can immediately specify the sizes in percent, or select the sizes in pixels, and then convert them to percent. Percentages are calculated relative to the container with the game (dot-container). In our example, its dimensions are 300 px width and 450 px height.
Let’s take the dimensions of block 1-2, for example, as its dimensions are 23 px width and 90 px height.
We calculate the width of the block relative to the width of the container with the game and the height relative to the height.
For width, there will be a calculation formula:
- 23*100/300 = 7.67% — this value is written in the width of block 1-2.
The following formula will be used for height:
- 90*100/450 = 20% — this value is written in the height of block 1-2.
The values “left” and “top” can be immediately set as a percentage or converted from pixels using the same formula — for left or right, relative to the width of the container, and for top or bottom, relative to the height of the container.
Thus, you need to add all the necessary blocks with dots.
Interactive HTML version
The next step of our guide is the interactive HTML version, built with HTML5& CSS3. Continue to work on the same template where we created the AMP version. Add another empty structure. Select it, and pick an “Include in HTML only” option.
<style>
.dot-html .dot-container {
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/images/bg.png) no-repeat top center;
background-size: contain;
width: 300px;
height: 450px;
margin: 0 auto;
position: relative;
}
.dot-html .circle {
display: inline-block;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}
.dot-html .active .circle {
background: blue;
}
.dot-html .number {
display: block;
position: absolute;
right: -10px;
}
.dot-html .line {
background: #000;
width: 3px;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.dot-html .dot {
display: block;
cursor: pointer;
padding: 10px;
position: absolute;
bottom: -18px;
left: 50%;
transform: translate(-50%, 0);
}
.dot-html .block-1-2 {
width: 7.50%;
height: 20.17%;
position: absolute;
top: 1.67%;
right: 17.75%;
transform: rotate(-23deg);
}
.dot-html .dot-1 {
top: -14px;
bottom: auto;
}
.dot-html .dot-1 .number {
transform: rotate(23deg);
}
.dot-html .dot-2 .number {
transform: rotate(23deg);
}
.dot-html .block-2-3 {
width: 7.50%;
height: 16.83%;
position: absolute;
transform: rotate(-5deg);
top: 21.83%;
right: 10.50%;
}
.dot-html .dot-3 .number {
transform: rotate(5deg);
}
.dot-html .block-3-4 {
width: 7.50%;
height: 26.00%;
position: absolute;
transform: rotate(16deg);
top: 39.00%;
right: 14.50%;
}
.dot-html .dot-4 .number {
transform: rotate(-16deg);
}
.dot-html .block-4-5 {
width: 7.50%;
height: 17.50%;
position: absolute;
transform: rotate(91deg);
top: 56.83%;
right: 33.75%;
}
.dot-html .dot-5 .number {
transform: rotate(-91deg);
}
.dot-html .block-5-6 {
width: 7.50%;
height: 16.50%;
position: absolute;
transform: rotate(113deg);
top: 53.67%;
right: auto;
left: 32.00%;
}
.dot-html .dot-6 .number {
transform: rotate(-113deg);
}
.dot-html .block-6-7 {
width: 7.50%;
height: 20.00%;
position: absolute;
top: 38.17%;
right: auto;
left: 20.80%;
transform: rotate(4deg);
}
.dot-html .dot-7 {
top: -16px;
bottom: auto;
}
.dot-html .dot-7 .number {
transform: rotate(-2deg);
}
.dot-html .block-7-8 {
width: 7.50%;
height: 23.33%;
position: absolute;
transform: rotate(25deg);
top: 16.33%;
right: auto;
left: 29.00%;
}
.dot-html .dot-8 {
top: -16px;
bottom: auto;
}
.dot-html .dot-8 .number {
transform: rotate(-27deg);
}
.dot-html .block-8-9 {
width: 7.50%;
height: 20.83%;
position: absolute;
transform: rotate(54deg);
top: 0.5%;
right: auto;
left: 49.75%;
}
.dot-html .dot-9 {
top: -16px;
bottom: auto;
}
.dot-html .dot-9 .number {
transform: rotate(-54deg);
}
.dot-html .result {
padding: 20px 0;
text-align: center;
display: none;
}
@media only screen and (max-width: 600px) {
.dot-html .dot-container {
width: 250px;
height: 375px;
}
}
#input-dot-8:checked~#input-dot-9:checked~div .line-8-9,
#input-dot-7:checked~#input-dot-8:checked~div .line-7-8,
#input-dot-6:checked~#input-dot-7:checked~div .line-6-7,
#input-dot-5:checked~#input-dot-6:checked~div .line-5-6,
#input-dot-4:checked~#input-dot-5:checked~div .line-4-5,
#input-dot-3:checked~#input-dot-4:checked~div .line-3-4,
#input-dot-2:checked~#input-dot-3:checked~div .line-2-3,
#input-dot-1:checked~#input-dot-2:checked~div .line-1-2 {
display: block;
}
#input-dot-9:checked~div .dot-9 .circle,
#input-dot-8:checked~div .dot-8 .circle,
#input-dot-7:checked~div .dot-7 .circle,
#input-dot-6:checked~div .dot-6 .circle,
#input-dot-5:checked~div .dot-5 .circle,
#input-dot-4:checked~div .dot-4 .circle,
#input-dot-3:checked~div .dot-3 .circle,
#input-dot-2:checked~div .dot-2 .circle,
#input-dot-1:checked~div .dot-1 .circle,
.dot-html .dot:hover .circle {
background: blue;
}
#input-dot-1:checked~#input-dot-2:checked~div .dot-1 .circle,
#input-dot-2:checked~#input-dot-3:checked~div .dot-2 .circle,
#input-dot-3:checked~#input-dot-4:checked~div .dot-3 .circle,
#input-dot-4:checked~#input-dot-5:checked~div .dot-4 .circle,
#input-dot-5:checked~#input-dot-6:checked~div .dot-5 .circle,
#input-dot-6:checked~#input-dot-7:checked~div .dot-6 .circle,
#input-dot-7:checked~#input-dot-8:checked~div .dot-7 .circle,
#input-dot-8:checked~#input-dot-9:checked~div .dot-8 .circle {
background: #000;
}
#input-dot-1:checked~#input-dot-2:checked~#input-dot-3:checked~#input-dot-4:checked~#input-dot-5:checked~#input-dot-6:checked~#input-dot-7:checked~#input-dot-8:checked~#input-dot-9:checked~.result {
display: block;
}
</style>
<div class="dot-html">
<input id="input-dot-1" name="input-dot-1" type="radio" style="display:none">
<input id="input-dot-2" name="input-dot-2" type="radio" style="display:none">
<input id="input-dot-3" name="input-dot-3" type="radio" style="display:none">
<input id="input-dot-4" name="input-dot-4" type="radio" style="display:none">
<input id="input-dot-5" name="input-dot-5" type="radio" style="display:none">
<input id="input-dot-6" name="input-dot-6" type="radio" style="display:none">
<input id="input-dot-7" name="input-dot-7" type="radio" style="display:none">
<input id="input-dot-8" name="input-dot-8" type="radio" style="display:none">
<input id="input-dot-9" name="input-dot-9" type="radio" style="display:none">
<div class="dot-container">
<div class="block-8-9">
<div class="line line-8-9"></div>
<label for="input-dot-9" class="dot dot-9"><span class="circle"></span><span class="number">9</span></label>
</div>
<div class="block-7-8">
<div class="line line-7-8"></div>
<label for="input-dot-8" class="dot dot-8"><span class="circle"></span><span class="number">8</span></label>
</div>
<div class="block-6-7">
<div class="line line-6-7"></div>
<label for="input-dot-7" class="dot dot-7"><span class="circle"></span><span class="number">7</span></label>
</div>
<div class="block-5-6">
<div class="line line-5-6"></div>
<label for="input-dot-6" class="dot dot-6"><span class="number">6</span><span class="circle"></span></label>
</div>
<div class="block-4-5">
<div class="line line-4-5"></div>
<label for="input-dot-5" class="dot dot-5"><span class="number">5</span><span class="circle"></span></label>
</div>
<div class="block-3-4">
<div class="line line-3-4"></div>
<label for="input-dot-4" class="dot dot-4"><span class="number">4</span><span class="circle"></span></label>
</div>
<div class="block-2-3">
<div class="line line-2-3"></div>
<label for="input-dot-3" class="dot dot-3"><span class="number">3</span><span class="circle"></span></label>
</div>
<div class="block-1-2">
<div class="line line-1-2"></div>
<label for="input-dot-1" class="dot dot-1"><span class="number">1</span><span class="circle"></span></label>
<label for="input-dot-2" class="dot dot-2"><span class="number">2</span><span class="circle"></span></label>
</div>
</div>
<div class="result">
<h2 style="padding-bottom:15px">Congratulations!</h2>
<p>Here's your personal promo code GAMIFICATION for 15% OFF sitewide.</p>
</div>
</div>
Here, the overall layout is the same as in the AMP version, but instead of AMP attributes, we use tags binding label tags to input tags using the attribute “for.” In this attribute, we specify the id of the corresponding input.
Important note: The number of inputs corresponds to the number of dots in the image.
Understanding styles
Styles help us regulate how game elements are displayed. Here is what the styles for displaying lines between dots look like:
If the recipient clicks on dots 8 and 9, we show segment 8-9, if on dots 7 and 8, we show segment 7-8, and so on. As an example, we list all the dots that exist in our game.
The following styles paint the dots blue when hovered over and in the active state, and the styles below them return the dot to its original (black) color if the segment to which it belongs is already displayed.
Last but not least, the styles responsible for displaying the block with the message after all the dots have been colored:
Fallback version
For email clients that don’t support HTML5 and CSS3, you need to create an additional block with code. It will have a layout similar to our mechanics but without interactivity. Clicking on the elements will lead to the web version of the email.
We continue to work in the block with interactive HTML, which we made above. Paste the following code between the </style> tag and <div class="dot-html">:
<!--[if !mso]><!--><input type="checkbox" id="fallback_ctrl" class="fallback_ctrl" style="display:none !important;mso-hide:all;" checked>
<!--<![endif]-->
<!-- FALLBACK -->
<div id="fallback" class="fallback">
<table width="100%">
<tbody>
<tr align="center">
<td><a target="_blank" href="https://viewstripo.email/41a57244-a78a-40d8-88ee-f18848aba63b1711958538852?type=amphtml"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/images/bg.png" alt style="display: block;" width="258" height="450"></a></td>
</tr>
</tbody>
</table>
</div><!-- /FALLBACK -->
<!--[if !mso]><!-->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="mso-hide:all;display:none;">
Besides that, paste this code at the end of the code:
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
The fallback code has a special part, with a link to a web version of the email. Just paste the link to your web version, as shown below.
Important note: You can read more about email web versions and how to get them in our special article.
Understanding styles
To define how the fallback version looks, we also need to add styles. Add this piece of code inside the style tag (it would be easier to paste it before the closing tag </style>):
/* --- */
@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;
}
}
Let’s look at the code in more detail.
<!--[if !mso]><!--><input type="checkbox" id="fallback_ctrl" class="fallback_ctrl" style="display:none !important;mso-hide:all;" checked>
<!--<![endif]-->
This input is needed to show or hide the fallback version via styles. We wrapped it in the comments <!--[if !mso]><!--> … <!--<![endif]--> to make sure it is hidden in the Outlook Desktop client.
Meanwhile, <div id="fallback" class="fallback"></div> is a block containing the entire layout of our fallback. It should have a simple table layout suitable for Outlook. In our example, this is a table in the form of tabs with links that lead to the web version. You can create your own version, for example, so that the contents of the tabs are displayed one under the other without going to the web version. The main thing is to use a layout that is understandable for Outlook.
The styles below are responsible for hiding and displaying the fallback version. If you remove them or comment them out, the fallback version will be visible, and you can adjust its design to the desired form. Don’t forget to return these styles before sending the email.
These styles don’t have clear rules for each email client, but there are 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 needed for Outlook on iOS and Android mobile devices;
- mso-hide:all; is used for Outlook.com.
The full code for interactive and fallback version
Here is the fallback code of the game, including the interactive HTML part and the fallback version:
<style>
.dot-html .dot-container {
background: url(https://zlnfb.stripocdn.email/content/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/images/bg.png) no-repeat top center;
background-size: contain;
width: 300px;
height: 450px;
margin: 0 auto;
position: relative;
}
.dot-html .circle {
display: inline-block;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}
.dot-html .active .circle {
background: blue;
}
.dot-html .number {
display: block;
position: absolute;
right: -10px;
}
.dot-html .line {
background: #000;
width: 3px;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.dot-html .dot {
display: block;
cursor: pointer;
padding: 10px;
position: absolute;
bottom: -18px;
left: 50%;
transform: translate(-50%, 0);
}
.dot-html .block-1-2 {
width: 7.50%;
height: 20.17%;
position: absolute;
top: 1.67%;
right: 17.75%;
transform: rotate(-23deg);
}
.dot-html .dot-1 {
top: -14px;
bottom: auto;
}
.dot-html .dot-1 .number {
transform: rotate(23deg);
}
.dot-html .dot-2 .number {
transform: rotate(23deg);
}
.dot-html .block-2-3 {
width: 7.50%;
height: 16.83%;
position: absolute;
transform: rotate(-5deg);
top: 21.83%;
right: 10.50%;
}
.dot-html .dot-3 .number {
transform: rotate(5deg);
}
.dot-html .block-3-4 {
width: 7.50%;
height: 26.00%;
position: absolute;
transform: rotate(16deg);
top: 39.00%;
right: 14.50%;
}
.dot-html .dot-4 .number {
transform: rotate(-16deg);
}
.dot-html .block-4-5 {
width: 7.50%;
height: 17.50%;
position: absolute;
transform: rotate(91deg);
top: 56.83%;
right: 33.75%;
}
.dot-html .dot-5 .number {
transform: rotate(-91deg);
}
.dot-html .block-5-6 {
width: 7.50%;
height: 16.50%;
position: absolute;
transform: rotate(113deg);
top: 53.67%;
right: auto;
left: 32.00%;
}
.dot-html .dot-6 .number {
transform: rotate(-113deg);
}
.dot-html .block-6-7 {
width: 7.50%;
height: 20.00%;
position: absolute;
top: 38.17%;
right: auto;
left: 20.80%;
transform: rotate(4deg);
}
.dot-html .dot-7 {
top: -16px;
bottom: auto;
}
.dot-html .dot-7 .number {
transform: rotate(-2deg);
}
.dot-html .block-7-8 {
width: 7.50%;
height: 23.33%;
position: absolute;
transform: rotate(25deg);
top: 16.33%;
right: auto;
left: 29.00%;
}
.dot-html .dot-8 {
top: -16px;
bottom: auto;
}
.dot-html .dot-8 .number {
transform: rotate(-27deg);
}
.dot-html .block-8-9 {
width: 7.50%;
height: 20.83%;
position: absolute;
transform: rotate(54deg);
top: 0.5%;
right: auto;
left: 49.75%;
}
.dot-html .dot-9 {
top: -16px;
bottom: auto;
}
.dot-html .dot-9 .number {
transform: rotate(-54deg);
}
.dot-html .result {
padding: 20px 0;
text-align: center;
display: none;
}
@media only screen and (max-width: 600px) {
.dot-html .dot-container {
width: 250px;
height: 375px;
}
}
#input-dot-8:checked~#input-dot-9:checked~div .line-8-9,
#input-dot-7:checked~#input-dot-8:checked~div .line-7-8,
#input-dot-6:checked~#input-dot-7:checked~div .line-6-7,
#input-dot-5:checked~#input-dot-6:checked~div .line-5-6,
#input-dot-4:checked~#input-dot-5:checked~div .line-4-5,
#input-dot-3:checked~#input-dot-4:checked~div .line-3-4,
#input-dot-2:checked~#input-dot-3:checked~div .line-2-3,
#input-dot-1:checked~#input-dot-2:checked~div .line-1-2 {
display: block;
}
#input-dot-9:checked~div .dot-9 .circle,
#input-dot-8:checked~div .dot-8 .circle,
#input-dot-7:checked~div .dot-7 .circle,
#input-dot-6:checked~div .dot-6 .circle,
#input-dot-5:checked~div .dot-5 .circle,
#input-dot-4:checked~div .dot-4 .circle,
#input-dot-3:checked~div .dot-3 .circle,
#input-dot-2:checked~div .dot-2 .circle,
#input-dot-1:checked~div .dot-1 .circle,
.dot-html .dot:hover .circle {
background: blue;
}
#input-dot-1:checked~#input-dot-2:checked~div .dot-1 .circle,
#input-dot-2:checked~#input-dot-3:checked~div .dot-2 .circle,
#input-dot-3:checked~#input-dot-4:checked~div .dot-3 .circle,
#input-dot-4:checked~#input-dot-5:checked~div .dot-4 .circle,
#input-dot-5:checked~#input-dot-6:checked~div .dot-5 .circle,
#input-dot-6:checked~#input-dot-7:checked~div .dot-6 .circle,
#input-dot-7:checked~#input-dot-8:checked~div .dot-7 .circle,
#input-dot-8:checked~#input-dot-9:checked~div .dot-8 .circle {
background: #000;
}
#input-dot-1:checked~#input-dot-2:checked~#input-dot-3:checked~#input-dot-4:checked~#input-dot-5:checked~#input-dot-6:checked~#input-dot-7:checked~#input-dot-8:checked~#input-dot-9:checked~.result {
display: block;
}
/* --- */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input.fallback_ctrl:checked~.container {
display: block !important;
}
input.fallback_ctrl:checked~#fallback {
display: none !important;
}
}
[owa] .container {
display: none !important;
}
[class~="x_container"] {
display: none !important;
}
[id~="x_fallback"] {
display: block !important;
}
@media screen and (max-width: 600px) {
body[data-outlook-cycle] #fallback {
display: block !important;
}
body[data-outlook-cycle] .container {
display: none !important;
}
}
</style>
<!--[if !mso]><!--><input type="checkbox" id="fallback_ctrl" class="fallback_ctrl" style="display:none !important;mso-hide:all;" checked>
<!--<![endif]-->
<!-- FALLBACK -->
<div id="fallback" class="fallback">
<table width="100%">
<tbody>
<tr align="center">
<td><a target="_blank" href="https://viewstripo.email/c29e42f1-be3f-4496-baae-104fe5d89bb51719820023314?type=amphtml"><img src="https://zlnfb.stripocdn.email/content/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/images/bg.png" alt style="display: block;" width="258" height="450"></a></td>
</tr>
</tbody>
</table>
</div><!-- /FALLBACK -->
<!--[if !mso]><!-->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="mso-hide:all;display:none;">
<div class="dot-html"><input id="input-dot-1" name="input-dot-1" type="radio" style="display:none"><input id="input-dot-2" name="input-dot-2" type="radio" style="display:none"><input id="input-dot-3" name="input-dot-3" type="radio" style="display:none"><input id="input-dot-4" name="input-dot-4" type="radio" style="display:none"><input id="input-dot-5" name="input-dot-5" type="radio" style="display:none"><input id="input-dot-6" name="input-dot-6" type="radio" style="display:none"><input id="input-dot-7" name="input-dot-7" type="radio" style="display:none"><input id="input-dot-8" name="input-dot-8" type="radio" style="display:none"><input id="input-dot-9" name="input-dot-9" type="radio" style="display:none">
<div class="dot-container">
<div class="block-8-9">
<div class="line line-8-9"></div><label for="input-dot-9" class="dot dot-9"><span class="circle"></span><span class="number">9</span></label>
</div>
<div class="block-7-8">
<div class="line line-7-8"></div><label for="input-dot-8" class="dot dot-8"><span class="circle"></span><span class="number">8</span></label>
</div>
<div class="block-6-7">
<div class="line line-6-7"></div><label for="input-dot-7" class="dot dot-7"><span class="circle"></span><span class="number">7</span></label>
</div>
<div class="block-5-6">
<div class="line line-5-6"></div><label for="input-dot-6" class="dot dot-6"><span class="number">6</span><span class="circle"></span></label>
</div>
<div class="block-4-5">
<div class="line line-4-5"></div><label for="input-dot-5" class="dot dot-5"><span class="number">5</span><span class="circle"></span></label>
</div>
<div class="block-3-4">
<div class="line line-3-4"></div><label for="input-dot-4" class="dot dot-4"><span class="number">4</span><span class="circle"></span></label>
</div>
<div class="block-2-3">
<div class="line line-2-3"></div><label for="input-dot-3" class="dot dot-3"><span class="number">3</span><span class="circle"></span></label>
</div>
<div class="block-1-2">
<div class="line line-1-2"></div><label for="input-dot-1" class="dot dot-1"><span class="number">1</span><span class="circle"></span></label><label for="input-dot-2" class="dot dot-2"><span class="number">2</span><span class="circle"></span></label>
</div>
</div>
<div class="result">
<h2 style="padding-bottom:15px">Congratulations!</h2>
<p>Here's your personal promo code GAMIFICATION for 15% OFF sitewide.</p>
</div>
</div>
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
This code part is just for checking only, and to make sure that you’ve made no mistakes on the previous steps of our guide. If something doesn’t work as intended, compare your code to this full sample to see if something is wrong.
Wrapping up
At first glance, the game may seem quite simple, but its charm is that you are limited only by your imagination of what kind of drawing you can come up with. The complexity and engagement of the game depends only on how much you want to make it that way, creating different versions of “Dot to Dot” games.
We hope that this guide will become reliable support for upgrading your emails with interactivity and new mechanics.
0 comments