2 days ago
An easy-to-follow guide on making an interactive Wordle game (code samples included)
Summarize
It’s time to play some guessing games. But don’t worry. You’ll have all the hints you need — so will your email recipients once you create and add our new interactive game that we’ll show you how to make in our special article. We are glad to present our Wordle game to you.
How this game works
At first glance, the game seems quite simple. We have a 5-letter word, a set of letters, a “clear” button, and a message at the end of the game.
The recipient’s task is to guess the word, and to keep the task short, hints are provided. Each letter can be colored gray, yellow, or green. Gray means that the letter doesn’t exist in the word. Yellow means that the letter exists but is in the wrong place. Green means that the letter exists and is in the correct place. Once the word is guessed, the recipient will see the final screen with the reward.
With this game, you can diversify your email marketing by:
- making riddles with special words that can tease your future products or events;
- run quizzes that can show how your audience knows your niche, products, and more;
- provide promo codes, discounts, and other gifts to your audience through a gamified approach.
Different inboxes support different interactive technologies, so to reach as many recipients as possible, one email needs to include several versions of the same game working together.
In this guide, we show how this full email is built and how its parts work together, including:
- an AMP version of the game;
- a kinetic version built with HTML5 and CSS3; and
- a fallback version for clients whose email does not support interactivity.
The HTML version contains the kinetic (HTML5 and CSS3) version, which serves as the main version and will be shown when the client’s email supports HTML5 and CSS3, with a fallback for subscribers whose email does not support kinetic content. The AMP version will be shown if the recipient’s email client supports AMP; it will override the HTML version.
AMP version
We start with our AMP version of the game, and you need to prepare a foundation for your future game. Add a one-column structure for which you must set the option “include it in AMP HTML” only, so it is visible only in AMP HTML.
After that, drag and drop an HTML block into this structure and paste this code.
<style amp-custom>
.wordle-amp .game-container { width: 260px; margin: 0 auto; } .wordle-amp .letter { display: flex; width: 35px; height: 35px; padding: 5px; border-radius: 3px; margin-bottom: 6px; background-color: #ccc; color: #fff; text-transform: uppercase; font-size: 18px; font-weight: bold; justify-content: center; align-items: center; } .wordle-amp .green { background-color: green; } .wordle-amp .yellow { background-color: #cbbf34; } .wordle-amp .gray { background-color: #ccc; } .wordle-amp .result { text-align: center; } .wordle-amp .buttons label { display: inline-block;width: 40px;height: 32px;padding-top:10px; border:2px solid #ccc; text-transform: uppercase; text-align:center;cursor:pointer; } .wordle-amp .line div { padding:4px 2px;margin:0;} .wordle-amp .line {display: flex; justify-content: center; align-items: center;} .wordle-amp .word {display: flex;gap: 7px;padding-bottom:20px; justify-content: center; align-items: flex-start;} @media only screen and (max-width: 600px) {.wordle-amp .line {flex-wrap: wrap}} .wordle-amp .btn { display: inline-block; margin: 10px auto 0; padding: 5px 17px; background-color: green; border: 0; color: white; font-size: 16px; cursor: pointer;}
</style>
<div class="wordle-amp">
<div class="game-container">
<div class="word">
<span class="letter gray"></span>
<span class="letter gray"></span>
<span class="letter gray"></span>
<span class="letter gray"></span>
<span class="letter gray"></span>
</div>
<div class="buttons buttons-1">
<div class="line">
<div>
<label>
Q
</label>
</div>
<div>
<label>
W
</label>
</div>
<div>
<label>
E
</label>
</div>
<div>
<label>
R
</label>
</div>
<div>
<label>
T
</label>
</div>
<div>
<label>
Y
</label>
</div>
<div>
<label>
U
</label>
</div>
<div>
<label>
I
</label>
</div>
<div>
<label>
O
</label>
</div>
<div>
<label>
P
</label>
</div>
</div>
<div class="line">
<div>
<label>
a
</label>
</div>
<div>
<label>
s
</label>
</div>
<div>
<label>
d
</label>
</div>
<div>
<label>
f
</label>
</div>
<div>
<label>
g
</label>
</div>
<div>
<label>
h
</label>
</div>
<div>
<label>
j
</label>
</div>
<div>
<label>
k
</label>
</div>
<div>
<label>
l
</label>
</div>
</div>
<div class="line">
<div>
<label>
z
</label>
</div>
<div>
<label>
x
</label>
</div>
<div>
<label>
c
</label>
</div>
<div>
<label>
v
</label>
</div>
<div>
<label>
b
</label>
</div>
<div>
<label>
n
</label>
</div>
<div>
<label>
m
</label>
</div>
</div>
</div>
<p style="text-align:center">
<button type="button" class="btn">
Clear
</button>
</p>
</div>
<div class="result">
<h4 style="padding-bottom:5px;font-size:18px">
You've scored some amazing discounts!
</h4>
<h4 style="font-size:18px;padding-bottom:15px">
<b>Up to 30% OFF</b> on select items.
</h4>
<h4 style="font-size:16px;padding-bottom:15px">
Use the promo code <b>PRIZE2</b> on our website.
</h4>
<p style="font-size:13px;padding-top:5px;padding-bottom:25px">
Make sure to use your winnings soon! These discounts can be used together or on separate purchases, so enjoy the savings while they last!
</p>
</div>
</div>
We have our basic layout of the game; now, we need to make it functional. We’ll use the letterNum variable; it will increase by 1 each time a player clicks on any of the listed letters. In this way, we can determine which letter the recipient selected in order. If they clicked “W,” then “A,” and then “T,” we’ll know that “W” should be written in the first cell of the word, “A” in the second, “T” in the third, and so on. For the cells themselves in the hidden word, we’ll add our own variables in the code: letterValue1, letterValue2, letterValue3, and so on. In this way, we can compare the letters that the recipient selected with the letters in the hidden word.
To implement the above, we’ll add the following attributes to each label tag in the letter list:
<label tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'Q': letterValue1, letterValue2: letterNum == 1 ? 'Q': letterValue2, letterValue3: letterNum == 2 ? 'Q': letterValue3, letterValue4: letterNum == 3 ? 'Q': letterValue4, letterValue5: letterNum == 4 ? 'Q': letterValue5,letterNum: +letterNum+1 })" role="button">
Q
</label>
Let’s briefly review what these elements are and why they’re needed:
- role="button" is an attribute that specifies that the element will be used as a button. In AMP, it’s required along with on="tap:" if the tag to which we’re adding it is a non-button element;
- tabindex="1" controls the focus order when navigating between elements using the Tab key. This is a required attribute when using on="tap:" if the tag we’re adding it to isn’t a button;
- on="tap:" is the click event handler;
- AMP.setState({ })" is a special AMP syntax for creating variables.
Variables that are worth covering quickly will also be created so that you understand the game’s structure:
- letterValue1: +letterNum == 0 ? 'Q': letterValue1 - if letterNum is 0, we write the letter the player clicked to the letterValue1 variable;
- letterValue2: letterNum == 1 ? 'Q': letterValue2 - if letterNum is 1, we write the letter the player clicked to the letterValue2 variable;
- letterValue3: letterNum == 2 ? 'Q': letterValue3 - - if letterNum is 2, we write the letter the player clicked to the letterValue3 variable;
- letterValue4: letterNum == 3 ? 'Q': letterValue4 - - if letterNum is 3, we write the letter the player clicked to variable letterValue4;
- letterValue5: letterNum == 4 ? 'Q': letterValue5 - - if the value of letterNum is 4, we write the letter the player clicked to the variable letterValue5;
- letterNum: +letterNum+1 - we increment the value of the variable letterNum by 1 with each click.
This code will be the same for all letters; the only difference being the letter itself: instead of 'Q' in the example, you need to substitute a specific letter: 'W', 'E', 'R', etc. To save you the hassle of manually entering all the code, simply replace the entire block with the buttons class with this code:
<div class="buttons buttons-1">
<div class="line">
<div>
<label tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'Q': letterValue1, letterValue2: letterNum == 1 ? 'Q': letterValue2, letterValue3: letterNum == 2 ? 'Q': letterValue3, letterValue4: letterNum == 3 ? 'Q': letterValue4, letterValue5: letterNum == 4 ? 'Q': letterValue5,letterNum: +letterNum+1 })" role="button">
Q
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'W': letterValue1, letterValue2: letterNum == 1 ? 'W': letterValue2, letterValue3: letterNum == 2 ? 'W': letterValue3, letterValue4: letterNum == 3 ? 'W': letterValue4, letterValue5: letterNum == 4 ? 'W': letterValue5,letterNum: +letterNum+1 })" role="button" tabindex="1">
W
</label>
</div>
<div>
<label tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'E': letterValue1, letterValue2: letterNum == 1 ? 'E': letterValue2, letterValue3: letterNum == 2 ? 'E': letterValue3, letterValue4: letterNum == 3 ? 'E': letterValue4, letterValue5: letterNum == 4 ? 'E': letterValue5, letterNum: +letterNum+1 })" role="button">
E
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'R': letterValue1, letterValue2: letterNum == 1 ? 'R': letterValue2, letterValue3: letterNum == 2 ? 'R': letterValue3, letterValue4: letterNum == 3 ? 'R': letterValue4, letterValue5: letterNum == 4 ? 'R': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
R
</label>
</div>
<div>
<label tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'T': letterValue1, letterValue2: letterNum == 1 ? 'T': letterValue2, letterValue3: letterNum == 2 ? 'T': letterValue3, letterValue4: letterNum == 3 ? 'T': letterValue4, letterValue5: letterNum == 4 ? 'T': letterValue5, letterNum: +letterNum+1 })" role="button">
T
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'Y': letterValue1, letterValue2: letterNum == 1 ? 'Y': letterValue2, letterValue3: letterNum == 2 ? 'Y': letterValue3, letterValue4: letterNum == 3 ? 'Y': letterValue4, letterValue5: letterNum == 4 ? 'Y': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
Y
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'U': letterValue1, letterValue2: letterNum == 1 ? 'U': letterValue2, letterValue3: letterNum == 2 ? 'U': letterValue3, letterValue4: letterNum == 3 ? 'U': letterValue4, letterValue5: letterNum == 4 ? 'U': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
U
</label>
</div>
<div>
<label tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'I': letterValue1, letterValue2: letterNum == 1 ? 'I': letterValue2, letterValue3: letterNum == 2 ? 'I': letterValue3, letterValue4: letterNum == 3 ? 'I': letterValue4, letterValue5: letterNum == 4 ? 'I': letterValue5, letterNum: +letterNum+1 })" role="button">
I
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'O': letterValue1, letterValue2: letterNum == 1 ? 'O': letterValue2, letterValue3: letterNum == 2 ? 'O': letterValue3, letterValue4: letterNum == 3 ? 'O': letterValue4, letterValue5: letterNum == 4 ? 'O': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
O
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'P': letterValue1, letterValue2: letterNum == 1 ? 'P': letterValue2, letterValue3: letterNum == 2 ? 'P': letterValue3, letterValue4: letterNum == 3 ? 'P': letterValue4, letterValue5: letterNum == 4 ? 'P': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
P
</label>
</div>
</div>
<div class="line">
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'A': letterValue1, letterValue2: letterNum == 1 ? 'A': letterValue2, letterValue3: letterNum == 2 ? 'A': letterValue3, letterValue4: letterNum == 3 ? 'A': letterValue4, letterValue5: letterNum == 4 ? 'A': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
a
</label>
</div>
<div>
<label role="button" tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'S': letterValue1, letterValue2: letterNum == 1 ? 'S': letterValue2, letterValue3: letterNum == 2 ? 'S': letterValue3, letterValue4: letterNum == 3 ? 'S': letterValue4, letterValue5: letterNum == 4 ? 'S': letterValue5, letterNum: +letterNum+1 })">
s
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'D': letterValue1, letterValue2: letterNum == 1 ? 'D': letterValue2, letterValue3: letterNum == 2 ? 'D': letterValue3, letterValue4: letterNum == 3 ? 'D': letterValue4, letterValue5: letterNum == 4 ? 'D': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
d
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'Y': letterValue1, letterValue2: letterNum == 1 ? 'Y': letterValue2, letterValue3: letterNum == 2 ? 'Y': letterValue3, letterValue4: letterNum == 3 ? 'Y': letterValue4, letterValue5: letterNum == 4 ? 'Y': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
f
</label>
</div>
<div>
<label role="button" tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'G': letterValue1, letterValue2: letterNum == 1 ? 'G': letterValue2, letterValue3: letterNum == 2 ? 'G': letterValue3, letterValue4: letterNum == 3 ? 'G': letterValue4, letterValue5: letterNum == 4 ? 'G': letterValue5, letterNum: +letterNum+1 })">
g
</label>
</div>
<div>
<label role="button" tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'H': letterValue1, letterValue2: letterNum == 1 ? 'H': letterValue2, letterValue3: letterNum == 2 ? 'H': letterValue3, letterValue4: letterNum == 3 ? 'H': letterValue4, letterValue5: letterNum == 4 ? 'H': letterValue5, letterNum: +letterNum+1 })">
h
</label>
</div>
<div>
<label tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'J': letterValue1, letterValue2: letterNum == 1 ? 'J': letterValue2, letterValue3: letterNum == 2 ? 'J': letterValue3, letterValue4: letterNum == 3 ? 'J': letterValue4, letterValue5: letterNum == 4 ? 'J': letterValue5, letterNum: +letterNum+1 })" role="button">
j
</label>
</div>
<div>
<label role="button" tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'K': letterValue1, letterValue2: letterNum == 1 ? 'K': letterValue2, letterValue3: letterNum == 2 ? 'K': letterValue3, letterValue4: letterNum == 3 ? 'K': letterValue4, letterValue5: letterNum == 4 ? 'K': letterValue5, letterNum: +letterNum+1 })">
k
</label>
</div>
<div>
<label role="button" tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'L': letterValue1, letterValue2: letterNum == 1 ? 'L': letterValue2, letterValue3: letterNum == 2 ? 'L': letterValue3, letterValue4: letterNum == 3 ? 'L': letterValue4, letterValue5: letterNum == 4 ? 'L': letterValue5, letterNum: +letterNum+1 })">
l
</label>
</div>
</div>
<div class="line">
<div>
<label role="button" tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'Z': letterValue1, letterValue2: letterNum == 1 ? 'Z': letterValue2, letterValue3: letterNum == 2 ? 'Z': letterValue3, letterValue4: letterNum == 3 ? 'Z': letterValue4, letterValue5: letterNum == 4 ? 'Z': letterValue5, letterNum: +letterNum+1 })">
z
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'X': letterValue1, letterValue2: letterNum == 1 ? 'X': letterValue2, letterValue3: letterNum == 2 ? 'X': letterValue3, letterValue4: letterNum == 3 ? 'X': letterValue4, letterValue5: letterNum == 4 ? 'X': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
x
</label>
</div>
<div>
<label role="button" tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'C': letterValue1, letterValue2: letterNum == 1 ? 'C': letterValue2, letterValue3: letterNum == 2 ? 'C': letterValue3, letterValue4: letterNum == 3 ? 'C': letterValue4, letterValue5: letterNum == 4 ? 'C': letterValue5, letterNum: +letterNum+1 })">
c
</label>
</div>
<div>
<label tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'V': letterValue1, letterValue2: letterNum == 1 ? 'V': letterValue2, letterValue3: letterNum == 2 ? 'V': letterValue3, letterValue4: letterNum == 3 ? 'V': letterValue4, letterValue5: letterNum == 4 ? 'V': letterValue5, letterNum: +letterNum+1 })" role="button">
v
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'B': letterValue1, letterValue2: letterNum == 1 ? 'B': letterValue2, letterValue3: letterNum == 2 ? 'B': letterValue3, letterValue4: letterNum == 3 ? 'B': letterValue4, letterValue5: letterNum == 4 ? 'B': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
b
</label>
</div>
<div>
<label role="button" tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'N': letterValue1, letterValue2: letterNum == 1 ? 'N': letterValue2, letterValue3: letterNum == 2 ? 'N': letterValue3, letterValue4: letterNum == 3 ? 'N': letterValue4, letterValue5: letterNum == 4 ? 'N': letterValue5, letterNum: +letterNum+1 })">
n
</label>
</div>
<div>
<label tabindex="1" on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'M': letterValue1, letterValue2: letterNum == 1 ? 'M': letterValue2, letterValue3: letterNum == 2 ? 'M': letterValue3, letterValue4: letterNum == 3 ? 'M': letterValue4, letterValue5: letterNum == 4 ? 'M': letterValue5, letterNum: +letterNum+1 })" role="button">
m
</label>
</div>
</div>
</div>
Now, when the game detects the letters the recipient clicked, we need to display them in gray cells and change the color for hints.
To do this, we need the following attributes for the span tags in the block with the word class. The first tag will have the variable letterValue1, the second letterValue2, and so on. The hidden word for our game is “PARTY.” The whole attribute will look like this:
<span [class]="letterValue1 == 'P' ? 'letter green' : 'PARTY'.indexOf(letterValue1)>=0 ? 'letter yellow' : 'letter gray'" [text]="letterValue1 || ''" class="letter gray"></span>
- [text]="letterValue1 || '' " is a special amp attribute that changes the element’s text content to the value specified in quotation marks — in our case, the value of the letterValue1 variable or a space if such a variable doesn’t exist;
- [class]="letterValue1 == 'P' ? 'letter green' : 'PARTY'.indexOf(letterValue1)>=0 ? 'letter yellow' : 'letter gray'" is an attribute that changes the element's class. If the value of the letterValue1 variable (example for the first cell) is 'P', and this is a valid letter, then the green class is added. Next, if the first check fails, we iterate through the entire word using indexOf and check whether the letter exists in the word at all; if so, we add the yellow class. Finally, if neither the first nor the second check yields a result, we keep the gray class. The colors for these classes are already described in the styles.
This code needs to be added to each cell in the guessed word, so replace the entire block with the word class with this code.
<div class="word">
<span [class]="letterValue1 == 'P' ? 'letter green' : 'PARTY'.indexOf(letterValue1)>=0 ? 'letter yellow' : 'letter gray'" [text]="letterValue1 || ''" class="letter gray"></span>
<span [class]="letterValue2 == 'A' ? 'letter green' : 'PARTY'.indexOf(letterValue2)>=0 ? 'letter yellow' : 'letter gray'" [text]="letterValue2 || ''" class="letter gray"></span>
<span [class]="letterValue3 == 'R' ? 'letter green' : 'PARTY'.indexOf(letterValue3)>=0 ? 'letter yellow' : 'letter gray'" [text]="letterValue3 || ''" class="letter gray"></span>
<span [class]="letterValue4 == 'T' ? 'letter green' : 'PARTY'.indexOf(letterValue4)>=0 ? 'letter yellow' : 'letter gray'" [text]="letterValue4 || ''" class="letter gray"></span>
<span [class]="letterValue5 == 'Y' ? 'letter green' : 'PARTY'.indexOf(letterValue5)>=0 ? 'letter yellow' : 'letter gray'" [text]="letterValue5 || ''" class="letter gray"></span>
</div>
To create your own hidden word, you need to change the letters and the hidden word in these places.
Now we can see the letters we click appear in gray cells and change color. The next step is to make the “Clear” button work so that the recipient can try again. This is pretty simple, and all you need to do is replace the “Clear” button with the following code:
<button on="tap:AMP.setState({ letterValue1: null, letterValue2: null, letterValue3: null, letterValue4: null, letterValue5: null, letterNum: null })" type="button" class="btn">
Clear
</button>
Now, the “Clear” button clears the value of all variables.
The last thing we need to do is hide the game and show a message if the recipient enters the correct word. To do this, we need to replace the block with the game-container class with the following:
<div [hidden]="(letterValue1+letterValue2+letterValue3+letterValue4+letterValue5).toUpperCase() == 'PARTY'" class="game-container">
Essentially, this combines the values of all the letterValue variables (which contain the letters selected by the recipient) and compares the resulting word with the answer — in our case, PARTY. When these values are equal, the game block will hide. We also added .toUpperCase() to the code; this method converts letters to uppercase since the word “PARTY” itself is capitalized, which is important when comparing strings.
Important note: When creating the game with your own hidden word, you must change it here, too.
It is also necessary to change the block with the result class to this code.
<div [hidden]="(letterValue1+letterValue2+letterValue3+letterValue4+letterValue5).toUpperCase() != 'PARTY'" hidden class="result">
The same data are compared here, but the block will be hidden until the values are equal and will be displayed as soon as they are. The hidden attribute was also added to this block to hide it at the start of the game.
Important note: Don’t forget to replace our word PARTY with your own here once you decide to create the game with your hidden word.
To change your final message, you can edit texts in this section of the code.
This completes the creation of the AMP version. Here is the full AMP version code so that you can check whether you have done everything correctly according to the guide:
<style amp-custom>
.wordle-amp .game-container { width: 260px; margin: 0 auto; } .wordle-amp .letter { display: flex; width: 35px; height: 35px; padding: 5px; border-radius: 3px; margin-bottom: 6px; background-color: #ccc; color: #fff; text-transform: uppercase; font-size: 18px; font-weight: bold; justify-content: center; align-items: center; } .wordle-amp .green { background-color: green; } .wordle-amp .yellow { background-color: #cbbf34; } .wordle-amp .gray { background-color: #ccc; } .wordle-amp .result { text-align: center; } .wordle-amp .buttons label { display: inline-block;width: 40px;height: 32px;padding-top:10px; border:2px solid #ccc; text-transform: uppercase; text-align:center;cursor:pointer; } .wordle-amp .line div { padding:4px 2px;margin:0;} .wordle-amp .line {display: flex; justify-content: center; align-items: center;} .wordle-amp .word {display: flex;gap: 7px;padding-bottom:20px; justify-content: center; align-items: flex-start;} @media only screen and (max-width: 600px) {.wordle-amp .line {flex-wrap: wrap}} .wordle-amp .btn { display: inline-block; margin: 10px auto 0; padding: 5px 17px; background-color: green; border: 0; color: white; font-size: 16px; cursor: pointer;}
</style>
<div class="wordle-amp">
<div esd-text="true" [hidden]="(letterValue1+letterValue2+letterValue3+letterValue4+letterValue5).toUpperCase() == 'PARTY'" class="game-container esd-text">
<div class="word">
<span [class]="letterValue1 == 'P' ? 'letter green' : 'PARTY'.indexOf(letterValue1)>=0 ? 'letter yellow' : 'letter gray'" [text]="letterValue1 || ''" class="letter gray"></span>
<span [class]="letterValue2 == 'A' ? 'letter green' : 'PARTY'.indexOf(letterValue2)>=0 ? 'letter yellow' : 'letter gray'" [text]="letterValue2 || ''" class="letter gray"></span>
<span [class]="letterValue3 == 'R' ? 'letter green' : 'PARTY'.indexOf(letterValue3)>=0 ? 'letter yellow' : 'letter gray'" [text]="letterValue3 || ''" class="letter gray"></span>
<span [class]="letterValue4 == 'T' ? 'letter green' : 'PARTY'.indexOf(letterValue4)>=0 ? 'letter yellow' : 'letter gray'" [text]="letterValue4 || ''" class="letter gray"></span>
<span [class]="letterValue5 == 'Y' ? 'letter green' : 'PARTY'.indexOf(letterValue5)>=0 ? 'letter yellow' : 'letter gray'" [text]="letterValue5 || ''" class="letter gray"></span>
</div>
<div class="buttons buttons-1">
<div class="line">
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'Q': letterValue1, letterValue2: letterNum == 1 ? 'Q': letterValue2, letterValue3: letterNum == 2 ? 'Q': letterValue3, letterValue4: letterNum == 3 ? 'Q': letterValue4, letterValue5: letterNum == 4 ? 'Q': letterValue5,letterNum: +letterNum+1 })" role="button" tabindex="1">
Q
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'W': letterValue1, letterValue2: letterNum == 1 ? 'W': letterValue2, letterValue3: letterNum == 2 ? 'W': letterValue3, letterValue4: letterNum == 3 ? 'W': letterValue4, letterValue5: letterNum == 4 ? 'W': letterValue5,letterNum: +letterNum+1 })" role="button" tabindex="1">
W
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'E': letterValue1, letterValue2: letterNum == 1 ? 'E': letterValue2, letterValue3: letterNum == 2 ? 'E': letterValue3, letterValue4: letterNum == 3 ? 'E': letterValue4, letterValue5: letterNum == 4 ? 'E': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
E
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'R': letterValue1, letterValue2: letterNum == 1 ? 'R': letterValue2, letterValue3: letterNum == 2 ? 'R': letterValue3, letterValue4: letterNum == 3 ? 'R': letterValue4, letterValue5: letterNum == 4 ? 'R': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
R
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'T': letterValue1, letterValue2: letterNum == 1 ? 'T': letterValue2, letterValue3: letterNum == 2 ? 'T': letterValue3, letterValue4: letterNum == 3 ? 'T': letterValue4, letterValue5: letterNum == 4 ? 'T': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
T
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'Y': letterValue1, letterValue2: letterNum == 1 ? 'Y': letterValue2, letterValue3: letterNum == 2 ? 'Y': letterValue3, letterValue4: letterNum == 3 ? 'Y': letterValue4, letterValue5: letterNum == 4 ? 'Y': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
Y
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'U': letterValue1, letterValue2: letterNum == 1 ? 'U': letterValue2, letterValue3: letterNum == 2 ? 'U': letterValue3, letterValue4: letterNum == 3 ? 'U': letterValue4, letterValue5: letterNum == 4 ? 'U': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
U
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'I': letterValue1, letterValue2: letterNum == 1 ? 'I': letterValue2, letterValue3: letterNum == 2 ? 'I': letterValue3, letterValue4: letterNum == 3 ? 'I': letterValue4, letterValue5: letterNum == 4 ? 'I': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
I
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'O': letterValue1, letterValue2: letterNum == 1 ? 'O': letterValue2, letterValue3: letterNum == 2 ? 'O': letterValue3, letterValue4: letterNum == 3 ? 'O': letterValue4, letterValue5: letterNum == 4 ? 'O': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
O
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'P': letterValue1, letterValue2: letterNum == 1 ? 'P': letterValue2, letterValue3: letterNum == 2 ? 'P': letterValue3, letterValue4: letterNum == 3 ? 'P': letterValue4, letterValue5: letterNum == 4 ? 'P': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
P
</label>
</div>
</div>
<div class="line">
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'A': letterValue1, letterValue2: letterNum == 1 ? 'A': letterValue2, letterValue3: letterNum == 2 ? 'A': letterValue3, letterValue4: letterNum == 3 ? 'A': letterValue4, letterValue5: letterNum == 4 ? 'A': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
a
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'S': letterValue1, letterValue2: letterNum == 1 ? 'S': letterValue2, letterValue3: letterNum == 2 ? 'S': letterValue3, letterValue4: letterNum == 3 ? 'S': letterValue4, letterValue5: letterNum == 4 ? 'S': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
s
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'D': letterValue1, letterValue2: letterNum == 1 ? 'D': letterValue2, letterValue3: letterNum == 2 ? 'D': letterValue3, letterValue4: letterNum == 3 ? 'D': letterValue4, letterValue5: letterNum == 4 ? 'D': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
d
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'Y': letterValue1, letterValue2: letterNum == 1 ? 'Y': letterValue2, letterValue3: letterNum == 2 ? 'Y': letterValue3, letterValue4: letterNum == 3 ? 'Y': letterValue4, letterValue5: letterNum == 4 ? 'Y': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
f
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'G': letterValue1, letterValue2: letterNum == 1 ? 'G': letterValue2, letterValue3: letterNum == 2 ? 'G': letterValue3, letterValue4: letterNum == 3 ? 'G': letterValue4, letterValue5: letterNum == 4 ? 'G': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
g
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'H': letterValue1, letterValue2: letterNum == 1 ? 'H': letterValue2, letterValue3: letterNum == 2 ? 'H': letterValue3, letterValue4: letterNum == 3 ? 'H': letterValue4, letterValue5: letterNum == 4 ? 'H': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
h
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'J': letterValue1, letterValue2: letterNum == 1 ? 'J': letterValue2, letterValue3: letterNum == 2 ? 'J': letterValue3, letterValue4: letterNum == 3 ? 'J': letterValue4, letterValue5: letterNum == 4 ? 'J': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
j
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'K': letterValue1, letterValue2: letterNum == 1 ? 'K': letterValue2, letterValue3: letterNum == 2 ? 'K': letterValue3, letterValue4: letterNum == 3 ? 'K': letterValue4, letterValue5: letterNum == 4 ? 'K': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
k
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'L': letterValue1, letterValue2: letterNum == 1 ? 'L': letterValue2, letterValue3: letterNum == 2 ? 'L': letterValue3, letterValue4: letterNum == 3 ? 'L': letterValue4, letterValue5: letterNum == 4 ? 'L': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
l
</label>
</div>
</div>
<div class="line">
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'Z': letterValue1, letterValue2: letterNum == 1 ? 'Z': letterValue2, letterValue3: letterNum == 2 ? 'Z': letterValue3, letterValue4: letterNum == 3 ? 'Z': letterValue4, letterValue5: letterNum == 4 ? 'Z': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
z
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'X': letterValue1, letterValue2: letterNum == 1 ? 'X': letterValue2, letterValue3: letterNum == 2 ? 'X': letterValue3, letterValue4: letterNum == 3 ? 'X': letterValue4, letterValue5: letterNum == 4 ? 'X': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
x
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'C': letterValue1, letterValue2: letterNum == 1 ? 'C': letterValue2, letterValue3: letterNum == 2 ? 'C': letterValue3, letterValue4: letterNum == 3 ? 'C': letterValue4, letterValue5: letterNum == 4 ? 'C': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
c
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'V': letterValue1, letterValue2: letterNum == 1 ? 'V': letterValue2, letterValue3: letterNum == 2 ? 'V': letterValue3, letterValue4: letterNum == 3 ? 'V': letterValue4, letterValue5: letterNum == 4 ? 'V': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
v
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'B': letterValue1, letterValue2: letterNum == 1 ? 'B': letterValue2, letterValue3: letterNum == 2 ? 'B': letterValue3, letterValue4: letterNum == 3 ? 'B': letterValue4, letterValue5: letterNum == 4 ? 'B': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
b
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'N': letterValue1, letterValue2: letterNum == 1 ? 'N': letterValue2, letterValue3: letterNum == 2 ? 'N': letterValue3, letterValue4: letterNum == 3 ? 'N': letterValue4, letterValue5: letterNum == 4 ? 'N': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
n
</label>
</div>
<div>
<label on="tap:AMP.setState({ letterValue1: +letterNum == 0 ? 'M': letterValue1, letterValue2: letterNum == 1 ? 'M': letterValue2, letterValue3: letterNum == 2 ? 'M': letterValue3, letterValue4: letterNum == 3 ? 'M': letterValue4, letterValue5: letterNum == 4 ? 'M': letterValue5, letterNum: +letterNum+1 })" role="button" tabindex="1">
m
</label>
</div>
</div>
</div>
<p style="text-align:center">
<button type="button" on="tap:AMP.setState({ letterValue1: null, letterValue2: null, letterValue3: null, letterValue4: null, letterValue5: null, letterNum: null })" class="btn">
Clear
</button>
</p>
</div>
<div [hidden]="(letterValue1+letterValue2+letterValue3+letterValue4+letterValue5).toUpperCase() != 'PARTY'" hidden class="result esd-text">
<h4 style="padding-bottom:5px;font-size:18px">
You've scored some amazing discounts!
</h4>
<h4 style="font-size:18px;padding-bottom:15px">
<b>Up to 30% OFF</b> on select items.
</h4>
<h4 style="padding-bottom:15px;font-size:16px">
Use the promo code <b>PRIZE2</b> on our website.
</h4>
<p style="padding-top:5px;padding-bottom:25px;font-size:13px">
Make sure to use your winnings soon! These discounts can be used together or on separate purchases, so enjoy the savings while they last!
</p>
</div>
</div>
Kinetic version built with HTML5 and CSS3
Now let’s create the kinetic or interactive HTML version, built with HTML5 and CSS3. Add another empty one-column structure that we place below our AMP version. Select it and pick the “Include in HTML only” option.
After that, add an HTML block to this structure and paste this code:
<style>
.wordle-html .word { width: 260px; margin: 0 auto 20px; } .wordle-html .letter { display: flex; width: 35px; height: 35px; padding: 5px; border-radius: 3px; margin-bottom: 6px; background-color: #ccc; color: #fff; text-transform: uppercase; font-size: 18px; font-weight: bold; justify-content: center; align-items: center; } .wordle-html .green { background-color: green; } .wordle-html .yellow { background-color: #cbbf34; } .wordle-html .gray { background-color: gray; } .wordle-html .result { text-align: center; } .wordle-html .buttons label { display: inline-block;width: 40px;height: 32px;padding-top:10px; border:2px solid #ccc; text-transform: uppercase; text-align:center;cursor:pointer; } .wordle-html .line div { padding:4px 2px;margin:0;} .wordle-html .line {display: flex; justify-content: center; align-items: center;} @media only screen and (max-width: 600px) {.wordle-html .line {flex-wrap: wrap}} .wordle-html input {display:none;} #q-1:checked~* .letter-1::after, #q-2:checked~* .letter-2::after, #q-3:checked~* .letter-3::after, #q-4:checked~* .letter-4::after, #q-5:checked~* .letter-5::after {content:'Q';} #w-1:checked~* .letter-1::after, #w-2:checked~* .letter-2::after, #w-3:checked~* .letter-3::after, #w-4:checked~* .letter-4::after, #w-5:checked~* .letter-5::after {content:'W';} #e-1:checked~* .letter-1::after, #e-2:checked~* .letter-2::after, #e-3:checked~* .letter-3::after, #e-4:checked~* .letter-4::after, #e-5:checked~* .letter-5::after {content:'E';} #r-1:checked~* .letter-1::after, #r-2:checked~* .letter-2::after, #r-3:checked~* .letter-3::after, #r-4:checked~* .letter-4::after, #r-5:checked~* .letter-5::after {content:'R';} #t-1:checked~* .letter-1::after, #t-2:checked~* .letter-2::after, #t-3:checked~* .letter-3::after, #t-4:checked~* .letter-4::after, #t-5:checked~* .letter-5::after {content:'T';} #y-1:checked~* .letter-1::after, #y-2:checked~* .letter-2::after, #y-3:checked~* .letter-3::after, #y-4:checked~* .letter-4::after, #y-5:checked~* .letter-5::after {content:'Y';} #u-1:checked~* .letter-1::after, #u-2:checked~* .letter-2::after, #u-3:checked~* .letter-3::after, #u-4:checked~* .letter-4::after, #u-5:checked~* .letter-5::after {content:'U';} #i-1:checked~* .letter-1::after, #i-2:checked~* .letter-2::after, #i-3:checked~* .letter-3::after, #i-4:checked~* .letter-4::after, #i-5:checked~* .letter-5::after {content:'I';} #o-1:checked~* .letter-1::after, #o-2:checked~* .letter-2::after, #o-3:checked~* .letter-3::after, #o-4:checked~* .letter-4::after, #o-5:checked~* .letter-5::after {content:'O';} #p-1:checked~* .letter-1::after, #p-2:checked~* .letter-2::after, #p-3:checked~* .letter-3::after, #p-4:checked~* .letter-4::after, #p-5:checked~* .letter-5::after {content:'P';} #a-1:checked~* .letter-1::after, #a-2:checked~* .letter-2::after, #a-3:checked~* .letter-3::after, #a-4:checked~* .letter-4::after, #a-5:checked~* .letter-5::after {content:'A';} #s-1:checked~* .letter-1::after, #s-2:checked~* .letter-2::after, #s-3:checked~* .letter-3::after, #s-4:checked~* .letter-4::after, #s-5:checked~* .letter-5::after {content:'S';} #d-1:checked~* .letter-1::after, #d-2:checked~* .letter-2::after, #d-3:checked~* .letter-3::after, #d-4:checked~* .letter-4::after, #d-5:checked~* .letter-5::after {content:'D';} #f-1:checked~* .letter-1::after, #f-2:checked~* .letter-2::after, #f-3:checked~* .letter-3::after, #f-4:checked~* .letter-4::after, #f-5:checked~* .letter-5::after {content:'F';} #g-1:checked~* .letter-1::after, #g-2:checked~* .letter-2::after, #g-3:checked~* .letter-3::after, #g-4:checked~* .letter-4::after, #g-5:checked~* .letter-5::after {content:'G';} #h-1:checked~* .letter-1::after, #h-2:checked~* .letter-2::after, #h-3:checked~* .letter-3::after, #h-4:checked~* .letter-4::after, #h-5:checked~* .letter-5::after {content:'H';} #j-1:checked~* .letter-1::after, #j-2:checked~* .letter-2::after, #j-3:checked~* .letter-3::after, #j-4:checked~* .letter-4::after, #j-5:checked~* .letter-5::after {content:'J';} #k-1:checked~* .letter-1::after, #k-2:checked~* .letter-2::after, #k-3:checked~* .letter-3::after, #k-4:checked~* .letter-4::after, #k-5:checked~* .letter-5::after {content:'K';} #l-1:checked~* .letter-1::after, #l-2:checked~* .letter-2::after, #l-3:checked~* .letter-3::after, #l-4:checked~* .letter-4::after, #l-5:checked~* .letter-5::after {content:'L';} #z-1:checked~* .letter-1::after, #z-2:checked~* .letter-2::after, #z-3:checked~* .letter-3::after, #z-4:checked~* .letter-4::after, #z-5:checked~* .letter-5::after {content:'Z';} #x-1:checked~* .letter-1::after, #x-2:checked~* .letter-2::after, #x-3:checked~* .letter-3::after, #x-4:checked~* .letter-4::after, #x-5:checked~* .letter-5::after {content:'X';} #c-1:checked~* .letter-1::after, #c-2:checked~* .letter-2::after, #c-3:checked~* .letter-3::after, #c-4:checked~* .letter-4::after, #c-5:checked~* .letter-5::after {content:'C';} #v-1:checked~* .letter-1::after, #v-2:checked~* .letter-2::after, #v-3:checked~* .letter-3::after, #v-4:checked~* .letter-4::after, #v-5:checked~* .letter-5::after {content:'V';} #b-1:checked~* .letter-1::after, #b-2:checked~* .letter-2::after, #b-3:checked~* .letter-3::after, #b-4:checked~* .letter-4::after, #b-5:checked~* .letter-5::after {content:'B';} #n-1:checked~* .letter-1::after, #n-2:checked~* .letter-2::after, #n-3:checked~* .letter-3::after, #n-4:checked~* .letter-4::after, #n-5:checked~* .letter-5::after {content:'N';} #m-1:checked~* .letter-1::after, #m-2:checked~* .letter-2::after, #m-3:checked~* .letter-3::after, #m-4:checked~* .letter-4::after, #m-5:checked~* .letter-5::after {content:'M';} .buttons-2, .buttons-3, .buttons-4, .buttons-5 {display:none;} input[id$="-1"]:checked~* .buttons-1, input[id$="-2"]:checked~* .buttons-2, input[id$="-3"]:checked~* .buttons-3, input[id$="-4"]:checked~* .buttons-4 { display: none!important; } input[id$="-1"]:checked~* .buttons-2, input[id$="-2"]:checked~* .buttons-3, input[id$="-3"]:checked~* .buttons-4, input[id$="-4"]:checked~* .buttons-5 { display: block; } #p-1:checked~* .letter-1, #a-2:checked~* .letter-2, #r-3:checked~* .letter-3, #t-4:checked~* .letter-4, #y-5:checked~* .letter-5 { background-color: green; } #p-2:checked~* .letter-2, #p-3:checked~* .letter-3, #p-4:checked~* .letter-4, #p-5:checked~* .letter-5, #a-1:checked~* .letter-1, #a-3:checked~* .letter-3, #a-4:checked~* .letter-4, #a-5:checked~* .letter-5, #r-1:checked~* .letter-1, #r-2:checked~* .letter-2, #r-4:checked~* .letter-4, #r-5:checked~* .letter-5, #t-1:checked~* .letter-1, #t-2:checked~* .letter-2, #t-3:checked~* .letter-3, #t-5:checked~* .letter-5, #y-1:checked~* .letter-1, #y-2:checked~* .letter-2, #y-3:checked~* .letter-3, #y-4:checked~* .letter-4 { background-color: #a0a004; } .wordle-html .btn { display: inline-block; margin: 10px auto 0; padding: 5px 17px; background-color: green; border: 0; color: white; font-size: 16px; cursor: pointer;} .wordle-html .result { display:none; } #p-1:checked~#a-2:checked~#r-3:checked~#t-4:checked~#y-5:checked~.result { display:block; } #p-1:checked~#a-2:checked~#r-3:checked~#t-4:checked~#y-5:checked~.game-container { display: none!important; }
</style>
<div class="wordle-html">
<form>
<input id="q-1" type="radio">
<input id="w-1" type="radio">
<input type="radio" id="e-1">
<input id="r-1" type="radio">
<input id="t-1" type="radio">
<input id="y-1" type="radio">
<input id="u-1" type="radio">
<input id="i-1" type="radio">
<input id="o-1" type="radio">
<input type="radio" id="p-1">
<input type="radio" id="a-1">
<input type="radio" id="s-1">
<input type="radio" id="d-1">
<input id="f-1" type="radio">
<input type="radio" id="g-1">
<input id="h-1" type="radio">
<input type="radio" id="j-1">
<input id="k-1" type="radio">
<input id="l-1" type="radio">
<input id="z-1" type="radio">
<input id="x-1" type="radio">
<input type="radio" id="c-1">
<input type="radio" id="v-1">
<input id="b-1" type="radio">
<input id="n-1" type="radio">
<input id="m-1" type="radio">
<input id="q-2" type="radio">
<input type="radio" id="w-2">
<input id="e-2" type="radio">
<input type="radio" id="r-2">
<input id="t-2" type="radio">
<input id="y-2" type="radio">
<input type="radio" id="u-2">
<input id="i-2" type="radio">
<input type="radio" id="o-2">
<input id="p-2" type="radio">
<input type="radio" id="a-2">
<input id="s-2" type="radio">
<input type="radio" id="d-2">
<input type="radio" id="f-2">
<input id="g-2" type="radio">
<input id="h-2" type="radio">
<input type="radio" id="j-2">
<input id="k-2" type="radio">
<input type="radio" id="l-2">
<input id="z-2" type="radio">
<input type="radio" id="x-2">
<input type="radio" id="c-2">
<input type="radio" id="v-2">
<input id="b-2" type="radio">
<input id="n-2" type="radio">
<input id="m-2" type="radio">
<input id="q-3" type="radio">
<input id="w-3" type="radio">
<input type="radio" id="e-3">
<input id="r-3" type="radio">
<input id="t-3" type="radio">
<input type="radio" id="y-3">
<input id="u-3" type="radio">
<input id="i-3" type="radio">
<input type="radio" id="o-3">
<input id="p-3" type="radio">
<input type="radio" id="a-3">
<input type="radio" id="s-3">
<input type="radio" id="d-3">
<input id="f-3" type="radio">
<input id="g-3" type="radio">
<input id="h-3" type="radio">
<input type="radio" id="j-3">
<input id="k-3" type="radio">
<input id="l-3" type="radio">
<input type="radio" id="z-3">
<input id="x-3" type="radio">
<input id="c-3" type="radio">
<input id="v-3" type="radio">
<input id="b-3" type="radio">
<input type="radio" id="n-3">
<input type="radio" id="m-3">
<input id="q-4" type="radio">
<input id="w-4" type="radio">
<input id="e-4" type="radio">
<input id="r-4" type="radio">
<input id="t-4" type="radio">
<input id="y-4" type="radio">
<input id="u-4" type="radio">
<input id="i-4" type="radio">
<input type="radio" id="o-4">
<input id="p-4" type="radio">
<input id="a-4" type="radio">
<input type="radio" id="s-4">
<input id="d-4" type="radio">
<input id="f-4" type="radio">
<input id="g-4" type="radio">
<input id="h-4" type="radio">
<input type="radio" id="j-4">
<input id="k-4" type="radio">
<input id="l-4" type="radio">
<input id="z-4" type="radio">
<input id="x-4" type="radio">
<input id="c-4" type="radio">
<input type="radio" id="v-4">
<input type="radio" id="b-4">
<input type="radio" id="n-4">
<input type="radio" id="m-4">
<input id="q-5" type="radio">
<input type="radio" id="w-5">
<input type="radio" id="e-5">
<input id="r-5" type="radio">
<input id="t-5" type="radio">
<input id="y-5" type="radio">
<input type="radio" id="u-5">
<input id="i-5" type="radio">
<input type="radio" id="o-5">
<input type="radio" id="p-5">
<input id="a-5" type="radio">
<input id="s-5" type="radio">
<input type="radio" id="d-5">
<input id="f-5" type="radio">
<input id="g-5" type="radio">
<input id="h-5" type="radio">
<input id="j-5" type="radio">
<input type="radio" id="k-5">
<input type="radio" id="l-5">
<input type="radio" id="z-5">
<input type="radio" id="x-5">
<input id="c-5" type="radio">
<input id="v-5" type="radio">
<input type="radio" id="b-5">
<input id="n-5" type="radio">
<input type="radio" id="m-5">
<div class="game-container">
<div class="word">
<table width="100%">
<tbody>
<tr>
<td>
<span class="letter-1 letter"></span>
</td>
<td>
<span class="letter-2 letter"></span>
</td>
<td>
<span class="letter-3 letter"></span>
</td>
<td>
<span class="letter-4 letter"></span>
</td>
<td>
<span class="letter-5 letter"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="buttons buttons-1">
<div class="line">
<div>
<label for="q-1">
Q
</label>
</div>
<div>
<label for="w-1">
W
</label>
</div>
<div>
<label for="e-1">
E
</label>
</div>
<div>
<label for="r-1">
R
</label>
</div>
<div>
<label for="t-1">
T
</label>
</div>
<div>
<label for="y-1">
Y
</label>
</div>
<div>
<label for="u-1">
U
</label>
</div>
<div>
<label for="i-1">
I
</label>
</div>
<div>
<label for="o-1">
O
</label>
</div>
<div>
<label for="p-1">
P
</label>
</div>
</div>
<div class="line">
<div>
<label for="a-1">
a
</label>
</div>
<div>
<label for="s-1">
s
</label>
</div>
<div>
<label for="d-1">
d
</label>
</div>
<div>
<label for="f-1">
f
</label>
</div>
<div>
<label for="g-1">
g
</label>
</div>
<div>
<label for="h-1">
h
</label>
</div>
<div>
<label for="j-1">
j
</label>
</div>
<div>
<label for="k-1">
k
</label>
</div>
<div>
<label for="l-1">
l
</label>
</div>
</div>
<div class="line">
<div>
<label for="z-1">
z
</label>
</div>
<div>
<label for="x-1">
x
</label>
</div>
<div>
<label for="c-1">
c
</label>
</div>
<div>
<label for="v-1">
v
</label>
</div>
<div>
<label for="b-1">
b
</label>
</div>
<div>
<label for="n-1">
n
</label>
</div>
<div>
<label for="m-1">
m
</label>
</div>
</div>
</div>
<div class="buttons buttons-2">
<div class="line">
<div>
<label for="q-2">
Q
</label>
</div>
<div>
<label for="w-2">
W
</label>
</div>
<div>
<label for="e-2">
E
</label>
</div>
<div>
<label for="r-2">
R
</label>
</div>
<div>
<label for="t-2">
T
</label>
</div>
<div>
<label for="y-2">
Y
</label>
</div>
<div>
<label for="u-2">
U
</label>
</div>
<div>
<label for="i-2">
I
</label>
</div>
<div>
<label for="o-2">
O
</label>
</div>
<div>
<label for="p-2">
P
</label>
</div>
</div>
<div class="line">
<div>
<label for="a-2">
a
</label>
</div>
<div>
<label for="s-2">
s
</label>
</div>
<div>
<label for="d-2">
d
</label>
</div>
<div>
<label for="f-2">
f
</label>
</div>
<div>
<label for="g-2">
g
</label>
</div>
<div>
<label for="h-2">
h
</label>
</div>
<div>
<label for="j-2">
j
</label>
</div>
<div>
<label for="k-2">
k
</label>
</div>
<div>
<label for="l-2">
l
</label>
</div>
</div>
<div class="line">
<div>
<label for="z-2">
z
</label>
</div>
<div>
<label for="x-2">
x
</label>
</div>
<div>
<label for="c-2">
c
</label>
</div>
<div>
<label for="v-2">
v
</label>
</div>
<div>
<label for="b-2">
b
</label>
</div>
<div>
<label for="n-2">
n
</label>
</div>
<div>
<label for="m-2">
m
</label>
</div>
</div>
</div>
<div class="buttons buttons-3">
<div class="line">
<div>
<label for="q-3">
Q
</label>
</div>
<div>
<label for="w-3">
W
</label>
</div>
<div>
<label for="e-3">
E
</label>
</div>
<div>
<label for="r-3">
R
</label>
</div>
<div>
<label for="t-3">
T
</label>
</div>
<div>
<label for="y-3">
Y
</label>
</div>
<div>
<label for="u-3">
U
</label>
</div>
<div>
<label for="i-3">
I
</label>
</div>
<div>
<label for="o-3">
O
</label>
</div>
<div>
<label for="p-3">
P
</label>
</div>
</div>
<div class="line">
<div>
<label for="a-3">
a
</label>
</div>
<div>
<label for="s-3">
s
</label>
</div>
<div>
<label for="d-3">
d
</label>
</div>
<div>
<label for="f-3">
f
</label>
</div>
<div>
<label for="g-3">
g
</label>
</div>
<div>
<label for="h-3">
h
</label>
</div>
<div>
<label for="j-3">
j
</label>
</div>
<div>
<label for="k-3">
k
</label>
</div>
<div>
<label for="l-3">
l
</label>
</div>
</div>
<div class="line">
<div>
<label for="z-3">
z
</label>
</div>
<div>
<label for="x-3">
x
</label>
</div>
<div>
<label for="c-3">
c
</label>
</div>
<div>
<label for="v-3">
v
</label>
</div>
<div>
<label for="b-3">
b
</label>
</div>
<div>
<label for="n-3">
n
</label>
</div>
<div>
<label for="m-3">
m
</label>
</div>
</div>
</div>
<div class="buttons buttons-4">
<div class="line">
<div>
<label for="q-4">
Q
</label>
</div>
<div>
<label for="w-4">
W
</label>
</div>
<div>
<label for="e-4">
E
</label>
</div>
<div>
<label for="r-4">
R
</label>
</div>
<div>
<label for="t-4">
T
</label>
</div>
<div>
<label for="y-4">
Y
</label>
</div>
<div>
<label for="u-4">
U
</label>
</div>
<div>
<label for="i-4">
I
</label>
</div>
<div>
<label for="o-4">
O
</label>
</div>
<div>
<label for="p-4">
P
</label>
</div>
</div>
<div class="line">
<div>
<label for="a-4">
a
</label>
</div>
<div>
<label for="s-4">
s
</label>
</div>
<div>
<label for="d-4">
d
</label>
</div>
<div>
<label for="f-4">
f
</label>
</div>
<div>
<label for="g-4">
g
</label>
</div>
<div>
<label for="h-4">
h
</label>
</div>
<div>
<label for="j-4">
j
</label>
</div>
<div>
<label for="k-4">
k
</label>
</div>
<div>
<label for="l-4">
l
</label>
</div>
</div>
<div class="line">
<div>
<label for="z-4">
z
</label>
</div>
<div>
<label for="x-4">
x
</label>
</div>
<div>
<label for="c-4">
c
</label>
</div>
<div>
<label for="v-4">
v
</label>
</div>
<div>
<label for="b-4">
b
</label>
</div>
<div>
<label for="n-4">
n
</label>
</div>
<div>
<label for="m-4">
m
</label>
</div>
</div>
</div>
<div class="buttons buttons-5">
<div class="line">
<div>
<label for="q-5">
Q
</label>
</div>
<div>
<label for="w-5">
W
</label>
</div>
<div>
<label for="e-5">
E
</label>
</div>
<div>
<label for="r-5">
R
</label>
</div>
<div>
<label for="t-5">
T
</label>
</div>
<div>
<label for="y-5">
Y
</label>
</div>
<div>
<label for="u-5">
U
</label>
</div>
<div>
<label for="i-5">
I
</label>
</div>
<div>
<label for="o-5">
O
</label>
</div>
<div>
<label for="p-5">
P
</label>
</div>
</div>
<div class="line">
<div>
<label for="a-5">
a
</label>
</div>
<div>
<label for="s-5">
s
</label>
</div>
<div>
<label for="d-5">
d
</label>
</div>
<div>
<label for="f-5">
f
</label>
</div>
<div>
<label for="g-5">
g
</label>
</div>
<div>
<label for="h-5">
h
</label>
</div>
<div>
<label for="j-5">
j
</label>
</div>
<div>
<label for="k-5">
k
</label>
</div>
<div>
<label for="l-5">
l
</label>
</div>
</div>
<div class="line">
<div>
<label for="z-5">
z
</label>
</div>
<div>
<label for="x-5">
x
</label>
</div>
<div>
<label for="c-5">
c
</label>
</div>
<div>
<label for="v-5">
v
</label>
</div>
<div>
<label for="b-5">
b
</label>
</div>
<div>
<label for="n-5">
n
</label>
</div>
<div>
<label for="m-5">
m
</label>
</div>
</div>
</div>
<p style="text-align:center">
<button type="reset" class="btn">
Clear
</button>
</p>
</div>
<div class="result">
<h4 style="padding-bottom:5px;font-size:18px">
You've scored some amazing discounts!
</h4>
<h4 style="font-size:18px;padding-bottom:15px">
<b>Up to 30% OFF</b> on select items.
</h4>
<h4 style="padding-bottom:15px;font-size:16px">
Use the promo code <b>PRIZE2</b> on our website.
</h4>
<p style="padding-bottom:25px;font-size:13px;padding-top:5px">
Make sure to use your winnings soon! These discounts can be used together or on separate purchases, so enjoy the savings while they last!
</p>
</div>
</form>
</div>
The HTML version has a similar structure, but all interactivity is achieved using label tags linked to input tags using the for="" attribute.
Unfortunately, in this version, we can’t use a single set of letters, as in the AMP version, because we simply can’t determine which one the user clicked on. Therefore, we’ll have to use a different set of letters for each cell in the guessed word. We have five of them, meaning there will be five sets of letters. Each letter gets its own input.
The inputs are placed at the very top. Don’t move them, as we use the “~” CSS selector in the styles, which is tightly tied to the code structure, and if the layout changes, the game may stop working.
All inputs have an ID consisting of a letter and a number: first, all letters have number 1, then all have number 2, and then 3, 4, and 5.
Next comes the word block with cells for the hidden word, which looks like a set of span tags with classes indicating the letter number in order: letter-1, letter-2, letter-3, etc.
Below are sets of letters in blocks buttons-1, buttons-2, buttons-3, etc. The letters are placed in label tags with a for attribute that specifies the ID, as in the inputs above, which corresponds to the letter and number.
After all the letter sets, there’s a “Clear” button. It uses button type="reset." Since the entire game is wrapped in a form tag, this button makes it easy to clear all input values.
At the end, there is a block with a message after the game with class="result". You can change your final message here.
Now, let’s look at the styles that make our game work.
Let’s start with the styles that control the display of letter sets. All sets except the first are hidden. Next, we use the input[id$="-1"], which refers to all input tags whose ID ends in 1. Thus, as soon as the recipient clicks on any letter in the first set, that set (.buttons-1) will be hidden, and the next set (.buttons-2) will be shown. It goes further for each set of letters.
Next, to ensure the letter the recipient clicked would appear in the gray cells, the following styles were added. The screenshot shows only a portion of these styles, but they were added to all letters:
As soon as a letter is clicked, it is inserted into the cell corresponding to its number using the CSS content property.
Next are the styles responsible for changing the letter color. Because we added IDs to the letters, we could simply specify the IDs of the correct letters by typing the letter itself and its number in the hidden word “PARTY.”
For the same letters but in different places, a yellow background is indicated:
To change the hidden word, you must set the needed letters (letters themselves and their IDs) for the right position (green) and the wrong position (yellow).
The last important style displays the message block and hides the game after the recipient guesses the word.
Fallback version
The final piece of our complete game puzzle is a fallback version. A fallback version is required for clients whose email does not support HTML5 and CSS3 — or AMP. This version of the game is pretty simple, as it will have a layout similar to our mechanics but without interactivity. Clicking on elements will lead to the web version of the email. In this example, the fallback will be an image of the game.
All actions will take place in the kinetic HTML block created above. Insert the following code between the </style> tag and the <div class="wordle-html"> tag.
<input checked id="fallback_ctrl" type="checkbox" class="fallback_ctrl" style="mso-hide:all;display:none !important">
<!-- FALLBACK -->
<span id="fallback" class="fallback">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<a href="https://viewstripo.email/cceb9a36-1567-44b3-aee5-246f415a82831759228835276?type=amphtml" target="_blank">
<img width="500" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_652af7859e4c9da67c370ae73b60f4967a4e60dc120d55e6457b5e92107e37e8/images/imgfallback.png" class="adapt-img">
</a>
</td>
</tr>
</tbody>
</table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="mso-hide:all;display:none">
At the very end of the code, insert this piece:
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
To change the page to where your fallback version will lead and the image, replace these links here:
The last thing left to do is to add styles to display only the version suitable for the client’s email. Copy these styles at the end of the style tag:
/* --- */ @media screen and (-webkit-min-device-pixel-ratio: 0) { input.fallback_ctrl:checked~.container { display: block !important; } input.fallback_ctrl:checked~#fallback { display: none !important; } } [owa] .container { display: none !important; } [class~="x_container"] { display: none !important; } [id~="x_fallback"] { display: block !important; } @media screen and (max-width: 600px) { body[data-outlook-cycle] #fallback { display: block !important; } body[data-outlook-cycle] .container { display: none !important; } }
This input is used to show or hide the fallback using styles. It’s enclosed in comments <!--[if !mso]><!--> … <!--<![endif]--> to ensure that it’s hidden in the client’s Outlook Desktop.
Also worth noting is the <span id=“fallback” class=“fallback”></span> section, which contains all our fallback layouts. It should have a simple tabular layout suitable for Outlook. In our example, this is a table with links to the web version. You can create your own layout, but just make sure it’s understandable for Outlook.
While these styles don’t have clear rules for each email client, there is a set of hacks that can be used to control the display:
- styles that start with [owa] are used for Outlook;
- the [class~="x_container"] styles are needed for Outlook in case [owa] does not work;
- body[data-outlook-cycle] styles are needed for Outlook on iOS and Android mobile devices; and
- mso-hide:all; is used for Outlook.com.
The full code
The creation of the game is done. Here is the full HTML code, including the kinetic version, based on HTML5 and CSS3 та static fallback:
<style>
.wordle-html .word { width: 260px; margin: 0 auto 20px; } .wordle-html .letter { display: flex; width: 35px; height: 35px; padding: 5px; border-radius: 3px; margin-bottom: 6px; background-color: #ccc; color: #fff; text-transform: uppercase; font-size: 18px; font-weight: bold; justify-content: center; align-items: center; } .wordle-html .green { background-color: green; } .wordle-html .yellow { background-color: #cbbf34; } .wordle-html .gray { background-color: gray; } .wordle-html .result { text-align: center; } .wordle-html .buttons label { display: inline-block;width: 40px;height: 32px;padding-top:10px; border:2px solid #ccc; text-transform: uppercase; text-align:center;cursor:pointer; } .wordle-html .line div { padding:4px 2px;margin:0;} .wordle-html .line {display: flex; justify-content: center; align-items: center;} @media only screen and (max-width: 600px) {.wordle-html .line {flex-wrap: wrap}} .wordle-html input {display:none;} #q-1:checked~* .letter-1::after, #q-2:checked~* .letter-2::after, #q-3:checked~* .letter-3::after, #q-4:checked~* .letter-4::after, #q-5:checked~* .letter-5::after {content:'Q';} #w-1:checked~* .letter-1::after, #w-2:checked~* .letter-2::after, #w-3:checked~* .letter-3::after, #w-4:checked~* .letter-4::after, #w-5:checked~* .letter-5::after {content:'W';} #e-1:checked~* .letter-1::after, #e-2:checked~* .letter-2::after, #e-3:checked~* .letter-3::after, #e-4:checked~* .letter-4::after, #e-5:checked~* .letter-5::after {content:'E';} #r-1:checked~* .letter-1::after, #r-2:checked~* .letter-2::after, #r-3:checked~* .letter-3::after, #r-4:checked~* .letter-4::after, #r-5:checked~* .letter-5::after {content:'R';} #t-1:checked~* .letter-1::after, #t-2:checked~* .letter-2::after, #t-3:checked~* .letter-3::after, #t-4:checked~* .letter-4::after, #t-5:checked~* .letter-5::after {content:'T';} #y-1:checked~* .letter-1::after, #y-2:checked~* .letter-2::after, #y-3:checked~* .letter-3::after, #y-4:checked~* .letter-4::after, #y-5:checked~* .letter-5::after {content:'Y';} #u-1:checked~* .letter-1::after, #u-2:checked~* .letter-2::after, #u-3:checked~* .letter-3::after, #u-4:checked~* .letter-4::after, #u-5:checked~* .letter-5::after {content:'U';} #i-1:checked~* .letter-1::after, #i-2:checked~* .letter-2::after, #i-3:checked~* .letter-3::after, #i-4:checked~* .letter-4::after, #i-5:checked~* .letter-5::after {content:'I';} #o-1:checked~* .letter-1::after, #o-2:checked~* .letter-2::after, #o-3:checked~* .letter-3::after, #o-4:checked~* .letter-4::after, #o-5:checked~* .letter-5::after {content:'O';} #p-1:checked~* .letter-1::after, #p-2:checked~* .letter-2::after, #p-3:checked~* .letter-3::after, #p-4:checked~* .letter-4::after, #p-5:checked~* .letter-5::after {content:'P';} #a-1:checked~* .letter-1::after, #a-2:checked~* .letter-2::after, #a-3:checked~* .letter-3::after, #a-4:checked~* .letter-4::after, #a-5:checked~* .letter-5::after {content:'A';} #s-1:checked~* .letter-1::after, #s-2:checked~* .letter-2::after, #s-3:checked~* .letter-3::after, #s-4:checked~* .letter-4::after, #s-5:checked~* .letter-5::after {content:'S';} #d-1:checked~* .letter-1::after, #d-2:checked~* .letter-2::after, #d-3:checked~* .letter-3::after, #d-4:checked~* .letter-4::after, #d-5:checked~* .letter-5::after {content:'D';} #f-1:checked~* .letter-1::after, #f-2:checked~* .letter-2::after, #f-3:checked~* .letter-3::after, #f-4:checked~* .letter-4::after, #f-5:checked~* .letter-5::after {content:'F';} #g-1:checked~* .letter-1::after, #g-2:checked~* .letter-2::after, #g-3:checked~* .letter-3::after, #g-4:checked~* .letter-4::after, #g-5:checked~* .letter-5::after {content:'G';} #h-1:checked~* .letter-1::after, #h-2:checked~* .letter-2::after, #h-3:checked~* .letter-3::after, #h-4:checked~* .letter-4::after, #h-5:checked~* .letter-5::after {content:'H';} #j-1:checked~* .letter-1::after, #j-2:checked~* .letter-2::after, #j-3:checked~* .letter-3::after, #j-4:checked~* .letter-4::after, #j-5:checked~* .letter-5::after {content:'J';} #k-1:checked~* .letter-1::after, #k-2:checked~* .letter-2::after, #k-3:checked~* .letter-3::after, #k-4:checked~* .letter-4::after, #k-5:checked~* .letter-5::after {content:'K';} #l-1:checked~* .letter-1::after, #l-2:checked~* .letter-2::after, #l-3:checked~* .letter-3::after, #l-4:checked~* .letter-4::after, #l-5:checked~* .letter-5::after {content:'L';} #z-1:checked~* .letter-1::after, #z-2:checked~* .letter-2::after, #z-3:checked~* .letter-3::after, #z-4:checked~* .letter-4::after, #z-5:checked~* .letter-5::after {content:'Z';} #x-1:checked~* .letter-1::after, #x-2:checked~* .letter-2::after, #x-3:checked~* .letter-3::after, #x-4:checked~* .letter-4::after, #x-5:checked~* .letter-5::after {content:'X';} #c-1:checked~* .letter-1::after, #c-2:checked~* .letter-2::after, #c-3:checked~* .letter-3::after, #c-4:checked~* .letter-4::after, #c-5:checked~* .letter-5::after {content:'C';} #v-1:checked~* .letter-1::after, #v-2:checked~* .letter-2::after, #v-3:checked~* .letter-3::after, #v-4:checked~* .letter-4::after, #v-5:checked~* .letter-5::after {content:'V';} #b-1:checked~* .letter-1::after, #b-2:checked~* .letter-2::after, #b-3:checked~* .letter-3::after, #b-4:checked~* .letter-4::after, #b-5:checked~* .letter-5::after {content:'B';} #n-1:checked~* .letter-1::after, #n-2:checked~* .letter-2::after, #n-3:checked~* .letter-3::after, #n-4:checked~* .letter-4::after, #n-5:checked~* .letter-5::after {content:'N';} #m-1:checked~* .letter-1::after, #m-2:checked~* .letter-2::after, #m-3:checked~* .letter-3::after, #m-4:checked~* .letter-4::after, #m-5:checked~* .letter-5::after {content:'M';} .buttons-2, .buttons-3, .buttons-4, .buttons-5 {display:none;} input[id$="-1"]:checked~* .buttons-1, input[id$="-2"]:checked~* .buttons-2, input[id$="-3"]:checked~* .buttons-3, input[id$="-4"]:checked~* .buttons-4 { display: none!important; } input[id$="-1"]:checked~* .buttons-2, input[id$="-2"]:checked~* .buttons-3, input[id$="-3"]:checked~* .buttons-4, input[id$="-4"]:checked~* .buttons-5 { display: block; } #p-1:checked~* .letter-1, #a-2:checked~* .letter-2, #r-3:checked~* .letter-3, #t-4:checked~* .letter-4, #y-5:checked~* .letter-5 { background-color: green; } #p-2:checked~* .letter-2, #p-3:checked~* .letter-3, #p-4:checked~* .letter-4, #p-5:checked~* .letter-5, #a-1:checked~* .letter-1, #a-3:checked~* .letter-3, #a-4:checked~* .letter-4, #a-5:checked~* .letter-5, #r-1:checked~* .letter-1, #r-2:checked~* .letter-2, #r-4:checked~* .letter-4, #r-5:checked~* .letter-5, #t-1:checked~* .letter-1, #t-2:checked~* .letter-2, #t-3:checked~* .letter-3, #t-5:checked~* .letter-5, #y-1:checked~* .letter-1, #y-2:checked~* .letter-2, #y-3:checked~* .letter-3, #y-4:checked~* .letter-4 { background-color: #a0a004; } .wordle-html .btn { display: inline-block; margin: 10px auto 0; padding: 5px 17px; background-color: green; border: 0; color: white; font-size: 16px; cursor: pointer;} .wordle-html .result { display:none; } #p-1:checked~#a-2:checked~#r-3:checked~#t-4:checked~#y-5:checked~.result { display:block; } #p-1:checked~#a-2:checked~#r-3:checked~#t-4:checked~#y-5:checked~.game-container { display: none!important; } /* --- */ @media screen and (-webkit-min-device-pixel-ratio: 0) { input.fallback_ctrl:checked~.container { display: block !important; } input.fallback_ctrl:checked~#fallback { display: none !important; } } [owa] .container { display: none !important; } [class~="x_container"] { display: none !important; } [id~="x_fallback"] { display: block !important; } @media screen and (max-width: 600px) { body[data-outlook-cycle] #fallback { display: block !important; } body[data-outlook-cycle] .container { display: none !important; } }
</style>
<input checked id="fallback_ctrl" type="checkbox" class="fallback_ctrl" style="mso-hide:all;display:none !important">
<!-- FALLBACK -->
<span id="fallback" class="fallback">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<a href="https://viewstripo.email/cceb9a36-1567-44b3-aee5-246f415a82831759228835276?type=amphtml" target="_blank">
<img width="500" alt="" src="https://zlnfb.stripocdn.email/content/guids/CABINET_652af7859e4c9da67c370ae73b60f4967a4e60dc120d55e6457b5e92107e37e8/images/imgfallback.png" class="adapt-img">
</a>
</td>
</tr>
</tbody>
</table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="mso-hide:all;display:none">
<div class="wordle-html">
<form>
<input id="q-1" type="radio">
<input id="w-1" type="radio">
<input type="radio" id="e-1">
<input id="r-1" type="radio">
<input id="t-1" type="radio">
<input id="y-1" type="radio">
<input id="u-1" type="radio">
<input id="i-1" type="radio">
<input id="o-1" type="radio">
<input type="radio" id="p-1">
<input type="radio" id="a-1">
<input type="radio" id="s-1">
<input type="radio" id="d-1">
<input id="f-1" type="radio">
<input type="radio" id="g-1">
<input id="h-1" type="radio">
<input type="radio" id="j-1">
<input id="k-1" type="radio">
<input id="l-1" type="radio">
<input id="z-1" type="radio">
<input id="x-1" type="radio">
<input type="radio" id="c-1">
<input type="radio" id="v-1">
<input id="b-1" type="radio">
<input id="n-1" type="radio">
<input id="m-1" type="radio">
<input id="q-2" type="radio">
<input type="radio" id="w-2">
<input id="e-2" type="radio">
<input type="radio" id="r-2">
<input id="t-2" type="radio">
<input id="y-2" type="radio">
<input type="radio" id="u-2">
<input id="i-2" type="radio">
<input type="radio" id="o-2">
<input id="p-2" type="radio">
<input type="radio" id="a-2">
<input id="s-2" type="radio">
<input type="radio" id="d-2">
<input type="radio" id="f-2">
<input id="g-2" type="radio">
<input id="h-2" type="radio">
<input type="radio" id="j-2">
<input id="k-2" type="radio">
<input type="radio" id="l-2">
<input id="z-2" type="radio">
<input type="radio" id="x-2">
<input type="radio" id="c-2">
<input type="radio" id="v-2">
<input id="b-2" type="radio">
<input id="n-2" type="radio">
<input id="m-2" type="radio">
<input id="q-3" type="radio">
<input id="w-3" type="radio">
<input type="radio" id="e-3">
<input id="r-3" type="radio">
<input id="t-3" type="radio">
<input type="radio" id="y-3">
<input id="u-3" type="radio">
<input id="i-3" type="radio">
<input type="radio" id="o-3">
<input id="p-3" type="radio">
<input type="radio" id="a-3">
<input type="radio" id="s-3">
<input type="radio" id="d-3">
<input id="f-3" type="radio">
<input id="g-3" type="radio">
<input id="h-3" type="radio">
<input type="radio" id="j-3">
<input id="k-3" type="radio">
<input id="l-3" type="radio">
<input type="radio" id="z-3">
<input id="x-3" type="radio">
<input id="c-3" type="radio">
<input id="v-3" type="radio">
<input id="b-3" type="radio">
<input type="radio" id="n-3">
<input type="radio" id="m-3">
<input id="q-4" type="radio">
<input id="w-4" type="radio">
<input id="e-4" type="radio">
<input id="r-4" type="radio">
<input id="t-4" type="radio">
<input id="y-4" type="radio">
<input id="u-4" type="radio">
<input id="i-4" type="radio">
<input type="radio" id="o-4">
<input id="p-4" type="radio">
<input id="a-4" type="radio">
<input type="radio" id="s-4">
<input id="d-4" type="radio">
<input id="f-4" type="radio">
<input id="g-4" type="radio">
<input id="h-4" type="radio">
<input type="radio" id="j-4">
<input id="k-4" type="radio">
<input id="l-4" type="radio">
<input id="z-4" type="radio">
<input id="x-4" type="radio">
<input id="c-4" type="radio">
<input type="radio" id="v-4">
<input type="radio" id="b-4">
<input type="radio" id="n-4">
<input type="radio" id="m-4">
<input id="q-5" type="radio">
<input type="radio" id="w-5">
<input type="radio" id="e-5">
<input id="r-5" type="radio">
<input id="t-5" type="radio">
<input id="y-5" type="radio">
<input type="radio" id="u-5">
<input id="i-5" type="radio">
<input type="radio" id="o-5">
<input type="radio" id="p-5">
<input id="a-5" type="radio">
<input id="s-5" type="radio">
<input type="radio" id="d-5">
<input id="f-5" type="radio">
<input id="g-5" type="radio">
<input id="h-5" type="radio">
<input id="j-5" type="radio">
<input type="radio" id="k-5">
<input type="radio" id="l-5">
<input type="radio" id="z-5">
<input type="radio" id="x-5">
<input id="c-5" type="radio">
<input id="v-5" type="radio">
<input type="radio" id="b-5">
<input id="n-5" type="radio">
<input type="radio" id="m-5">
<div class="game-container">
<div class="word">
<table width="100%">
<tbody>
<tr>
<td>
<span class="letter-1 letter"></span>
</td>
<td>
<span class="letter-2 letter"></span>
</td>
<td>
<span class="letter-3 letter"></span>
</td>
<td>
<span class="letter-4 letter"></span>
</td>
<td>
<span class="letter-5 letter"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="buttons buttons-1">
<div class="line">
<div>
<label for="q-1">
Q
</label>
</div>
<div>
<label for="w-1">
W
</label>
</div>
<div>
<label for="e-1">
E
</label>
</div>
<div>
<label for="r-1">
R
</label>
</div>
<div>
<label for="t-1">
T
</label>
</div>
<div>
<label for="y-1">
Y
</label>
</div>
<div>
<label for="u-1">
U
</label>
</div>
<div>
<label for="i-1">
I
</label>
</div>
<div>
<label for="o-1">
O
</label>
</div>
<div>
<label for="p-1">
P
</label>
</div>
</div>
<div class="line">
<div>
<label for="a-1">
a
</label>
</div>
<div>
<label for="s-1">
s
</label>
</div>
<div>
<label for="d-1">
d
</label>
</div>
<div>
<label for="f-1">
f
</label>
</div>
<div>
<label for="g-1">
g
</label>
</div>
<div>
<label for="h-1">
h
</label>
</div>
<div>
<label for="j-1">
j
</label>
</div>
<div>
<label for="k-1">
k
</label>
</div>
<div>
<label for="l-1">
l
</label>
</div>
</div>
<div class="line">
<div>
<label for="z-1">
z
</label>
</div>
<div>
<label for="x-1">
x
</label>
</div>
<div>
<label for="c-1">
c
</label>
</div>
<div>
<label for="v-1">
v
</label>
</div>
<div>
<label for="b-1">
b
</label>
</div>
<div>
<label for="n-1">
n
</label>
</div>
<div>
<label for="m-1">
m
</label>
</div>
</div>
</div>
<div class="buttons buttons-2">
<div class="line">
<div>
<label for="q-2">
Q
</label>
</div>
<div>
<label for="w-2">
W
</label>
</div>
<div>
<label for="e-2">
E
</label>
</div>
<div>
<label for="r-2">
R
</label>
</div>
<div>
<label for="t-2">
T
</label>
</div>
<div>
<label for="y-2">
Y
</label>
</div>
<div>
<label for="u-2">
U
</label>
</div>
<div>
<label for="i-2">
I
</label>
</div>
<div>
<label for="o-2">
O
</label>
</div>
<div>
<label for="p-2">
P
</label>
</div>
</div>
<div class="line">
<div>
<label for="a-2">
a
</label>
</div>
<div>
<label for="s-2">
s
</label>
</div>
<div>
<label for="d-2">
d
</label>
</div>
<div>
<label for="f-2">
f
</label>
</div>
<div>
<label for="g-2">
g
</label>
</div>
<div>
<label for="h-2">
h
</label>
</div>
<div>
<label for="j-2">
j
</label>
</div>
<div>
<label for="k-2">
k
</label>
</div>
<div>
<label for="l-2">
l
</label>
</div>
</div>
<div class="line">
<div>
<label for="z-2">
z
</label>
</div>
<div>
<label for="x-2">
x
</label>
</div>
<div>
<label for="c-2">
c
</label>
</div>
<div>
<label for="v-2">
v
</label>
</div>
<div>
<label for="b-2">
b
</label>
</div>
<div>
<label for="n-2">
n
</label>
</div>
<div>
<label for="m-2">
m
</label>
</div>
</div>
</div>
<div class="buttons buttons-3">
<div class="line">
<div>
<label for="q-3">
Q
</label>
</div>
<div>
<label for="w-3">
W
</label>
</div>
<div>
<label for="e-3">
E
</label>
</div>
<div>
<label for="r-3">
R
</label>
</div>
<div>
<label for="t-3">
T
</label>
</div>
<div>
<label for="y-3">
Y
</label>
</div>
<div>
<label for="u-3">
U
</label>
</div>
<div>
<label for="i-3">
I
</label>
</div>
<div>
<label for="o-3">
O
</label>
</div>
<div>
<label for="p-3">
P
</label>
</div>
</div>
<div class="line">
<div>
<label for="a-3">
a
</label>
</div>
<div>
<label for="s-3">
s
</label>
</div>
<div>
<label for="d-3">
d
</label>
</div>
<div>
<label for="f-3">
f
</label>
</div>
<div>
<label for="g-3">
g
</label>
</div>
<div>
<label for="h-3">
h
</label>
</div>
<div>
<label for="j-3">
j
</label>
</div>
<div>
<label for="k-3">
k
</label>
</div>
<div>
<label for="l-3">
l
</label>
</div>
</div>
<div class="line">
<div>
<label for="z-3">
z
</label>
</div>
<div>
<label for="x-3">
x
</label>
</div>
<div>
<label for="c-3">
c
</label>
</div>
<div>
<label for="v-3">
v
</label>
</div>
<div>
<label for="b-3">
b
</label>
</div>
<div>
<label for="n-3">
n
</label>
</div>
<div>
<label for="m-3">
m
</label>
</div>
</div>
</div>
<div class="buttons buttons-4">
<div class="line">
<div>
<label for="q-4">
Q
</label>
</div>
<div>
<label for="w-4">
W
</label>
</div>
<div>
<label for="e-4">
E
</label>
</div>
<div>
<label for="r-4">
R
</label>
</div>
<div>
<label for="t-4">
T
</label>
</div>
<div>
<label for="y-4">
Y
</label>
</div>
<div>
<label for="u-4">
U
</label>
</div>
<div>
<label for="i-4">
I
</label>
</div>
<div>
<label for="o-4">
O
</label>
</div>
<div>
<label for="p-4">
P
</label>
</div>
</div>
<div class="line">
<div>
<label for="a-4">
a
</label>
</div>
<div>
<label for="s-4">
s
</label>
</div>
<div>
<label for="d-4">
d
</label>
</div>
<div>
<label for="f-4">
f
</label>
</div>
<div>
<label for="g-4">
g
</label>
</div>
<div>
<label for="h-4">
h
</label>
</div>
<div>
<label for="j-4">
j
</label>
</div>
<div>
<label for="k-4">
k
</label>
</div>
<div>
<label for="l-4">
l
</label>
</div>
</div>
<div class="line">
<div>
<label for="z-4">
z
</label>
</div>
<div>
<label for="x-4">
x
</label>
</div>
<div>
<label for="c-4">
c
</label>
</div>
<div>
<label for="v-4">
v
</label>
</div>
<div>
<label for="b-4">
b
</label>
</div>
<div>
<label for="n-4">
n
</label>
</div>
<div>
<label for="m-4">
m
</label>
</div>
</div>
</div>
<div class="buttons buttons-5">
<div class="line">
<div>
<label for="q-5">
Q
</label>
</div>
<div>
<label for="w-5">
W
</label>
</div>
<div>
<label for="e-5">
E
</label>
</div>
<div>
<label for="r-5">
R
</label>
</div>
<div>
<label for="t-5">
T
</label>
</div>
<div>
<label for="y-5">
Y
</label>
</div>
<div>
<label for="u-5">
U
</label>
</div>
<div>
<label for="i-5">
I
</label>
</div>
<div>
<label for="o-5">
O
</label>
</div>
<div>
<label for="p-5">
P
</label>
</div>
</div>
<div class="line">
<div>
<label for="a-5">
a
</label>
</div>
<div>
<label for="s-5">
s
</label>
</div>
<div>
<label for="d-5">
d
</label>
</div>
<div>
<label for="f-5">
f
</label>
</div>
<div>
<label for="g-5">
g
</label>
</div>
<div>
<label for="h-5">
h
</label>
</div>
<div>
<label for="j-5">
j
</label>
</div>
<div>
<label for="k-5">
k
</label>
</div>
<div>
<label for="l-5">
l
</label>
</div>
</div>
<div class="line">
<div>
<label for="z-5">
z
</label>
</div>
<div>
<label for="x-5">
x
</label>
</div>
<div>
<label for="c-5">
c
</label>
</div>
<div>
<label for="v-5">
v
</label>
</div>
<div>
<label for="b-5">
b
</label>
</div>
<div>
<label for="n-5">
n
</label>
</div>
<div>
<label for="m-5">
m
</label>
</div>
</div>
</div>
<p style="text-align:center">
<button type="reset" class="btn">
Clear
</button>
</p>
</div>
<div class="result">
<h4 style="padding-bottom:5px;font-size:18px">
You've scored some amazing discounts!
</h4>
<h4 style="font-size:18px;padding-bottom:15px">
<b>Up to 30% OFF</b> on select items.
</h4>
<h4 style="padding-bottom:15px;font-size:16px">
Use the promo code <b>PRIZE2</b> on our website.
</h4>
<p style="padding-bottom:25px;font-size:13px;padding-top:5px">
Make sure to use your winnings soon! These discounts can be used together or on separate purchases, so enjoy the savings while they last!
</p>
</div>
</form>
</div>
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
If you want to save time, you can use this complete version, where all the elements are already combined. To create your own version, you need to make some tweaks under the hood to change the hidden word and the final message.
Wrapping up
The game turned out to be a bit tricky in its creation process; however, once you create it, tweaking it is a piece of cake. You can set any word for guessing in a matter of minutes and go live with this interactive piece of content for your email campaign. We hope this guide has helped you understand how the game works and will enable you to add interactive mechanics to your emails.
Create exceptional emails with Stripo
Recommended for you