An easy-to-follow guide on making an interactive Magic Ball game (code samples included) — Stripo.email

The whole code looks like this:

 Start 

And once you’ve done, it must look like this:

After all manipulations, the ball now rotates, and the buttons are hidden. All that remains is to implement the display of one random message, as in a real magic ball. To make it happen, we need to change our “Start” button code to this one:

on="tap:AMP.setState({reveal: true, num: floor(random() * floor(8)+1)})"

So it will look like this:

In the entry num: floor(random() * floor(8)+1), we wrote a random value from 1 to 8 into the variable num (as our game includes 8 different answers).

Next, we specify display conditions for all responses. We need to display messages with a delay, so we will use the visibility property. We already have 2 classes described for this in the code you pasted at the very start:

Now, these classes need to be added to the answer code. All div tags that contain predictions need to have the following code added, changing only the number. In the entry num == 1 it should be 1,2,3,4 in ascending order:

[class]=”num == 1 ? ‘visible-img’ : ‘hidden-img'” class=”hidden-img”

Depending on the value of num, we add the class visible-img or hidden-img, and also hide all messages by default by adding class=”hidden-img”.

Here’s the whole code sample for this:

Table of Contents
Toggle


            It is certain
          
        
        

            It is decidedly so
          
        
        

            Ask again later
          
        
        

            Better not tell you now
          
        
        

            My reply is no
          
        
        

            My sources say no
          
        
        

            Yes definitely
          
        
        

            As I see it, yes
          
        

In the end, it all must look like this:

And it’s done. To make sure that you did everything right, we leave both final code samples, so you can check them with your own creation

Basic code with styles:

  

    

      
      

        

            It is certain
          
        
        

            It is decidedly so
          
        
        

            Ask again later
          
        
        

            Better not tell you now
          
        
        

            My reply is no
          
        
        

            My sources say no
          
        
        

            Yes definitely
          
        
        

            As I see it, yes
          
        
      
    
  
  




    
      Start
    
  









  




    
      Try again
    
  

Interactive game code:

  

    

      
      

        

            It is certain
          
        
        

            It is decidedly so
          
        
        

            Ask again later
          
        
        

            Better not tell you now
          
        
        

            My reply is no
          
        
        

            My sources say no
          
        
        

            Yes definitely
          
        
        

            As I see it, yes
          
        
      
    
  
  




    
      Start
    
  







  

Kinetic version built with HTML5 and CSS3

The next step of our guide is the kinetic version, also known as Interactive HTML, built with HTML5 & CSS3. Now, let’s add another empty 1-column structure. Select it, and pick an “Include in HTML only” option to make a foundation for our HTML game version.

After that, we drop in this structure HTML block and paste this code in this block:

The kinetic version has a similar structure, but all the interactivity is done using the input and label tags. However, there is a nuance here. We cannot use random number generation, so further in the code, we added buttons that will show different messages, creating a sense of randomness.

Instead of button tags, label tags are inserted and bound to specific inputs using the for=” attribute. All buttons except the first and last are the same, with only numbers differing.

There are a few interesting details in this code that are worth noting. The first button does not have a start class, but only start-1. Meanwhile, the last button has a different code — button type=”reset”. We wrapped the entire code in a tag so that when all the messages are passed, the button type=”reset” will clear the form settings (marked inputs) and the game will start over. This will be unnoticeable, since the message sequence will simply be shown all over again.

The inputs for the buttons are also the same, and they are added at the very beginning. It is important that all input type=”radio” and each pair of buttons “Start” and “Try again“ have the same name attribute. This is done so that the animation styles are removed and added again; otherwise, the animation will not work.

Styles part

We decided to highlight styles in a separate section, since there are also nuances here, thanks to which the game works. All styles for the kinetic version are at the beginning of the code in the part here:

And here:

For example, the animation of the ball rotation is made using the :checked: property.

Also, all buttons except the first one are hidden using the start and again classes.

To display the buttons, certain styles are used, each for its own stage of the game.

First, when we press the button, it needs to be hidden. The styles are as follows:

The following styles are needed if Start 1 is pressed and it is necessary to show Try again 1, if Try again 1 is pressed, it is necessary to show Start 2, and so on.

The last styles show and hide the corresponding prediction.

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 design similar to our mechanics but without interactivity. Clicking on the elements will lead to the web version of the email. The fallback version for this game will include an image of a ball and a “Start” button.

We continue to work on the block with interactive HTML, which we made above. Paste the following code between the and

.

 



  






After that, paste this code at the very end of the email, so it will look like this.










Besides that, you can change the links, replacing them with your own here:

To change the image of your magic ball, you can replace this link:

The button here has a special code for Outlook. Therefore, if you want to change its style, it is best to create a separate button using the “Button” block and customize it as you need. Then open the code and copy the entire code.

After that, open the HTML version of the game and replace the part with the button from 
 to 
 with your own code.

Styles part
As in the interactive version guide, we make a separate section about styles. For the fallback version, styles are needed to show only the version suitable for the email client and make the buttons look the same as in the interactive version.
Paste this code within the  tag in your HTML version of the game:

    /* --- */
    @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;
        }
    }
Now, let’s dive into the details of how these styles work. For example, this part:
It’s needed to show or hide the fallback via styles. We enclosed in comments  …  to ensure it is hidden in the Outlook Desktop client.
Meanwhile,  is a block containing the entire layout of our fallback. It should have a simple, tabular layout suitable for Outlook. In our example, this is a table with links that lead to the web version. You can create your own version. The main thing is to use a layout that is understandable for Outlook.

The styles below hide and show 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. But don't forget to return these styles before sending the email.

These styles don’t have clear rules for each email client, but there is a set of hacks that can be used to control the display:

styles that start with [owa] are used for Outlook;
the [class~="x_container"] styles are needed for Outlook in case [owa] does not work;
body[data-outlook-cycle] styles needed for Outlook on iOS and Android mobile devices;
mso-hide:all; is used for Outlook.com.

The full code
Here is the fallback code of the game, including the interactive HTML part and the fallback version:




  







It may look complicated when all game versions are within one email. But we have a dedicated guide where we explain how this works and what benefits it brings.
Wrapping up
This small game is a treasure trove of possible uses to make your emails engaging and fun. Its randomness feature can bring a sense of surprise to your marketing ideas. Besides that, you can customize the game contents however you like, tweaking it to suit your needs, since now you know how to create it and what’s under the hood of this game.
We hope that this guide will be a helpful support in your journey to make your emails an interactive masterpiece.





Create exceptional emails with Stripo

Was this article helpful?

Yes

No

Thanks for your feedback!