DEV Community: benjamin

Build an Interactive Quiz using ⚡AMP Email

benjamin — Mon, 25 Mar 2024 04:00:21 +0000

Background

Many news organizations create weekly quizzes about recent events. These organizations usually send out an email containing a link to the quiz hosted on their website. This requires users to click on the link and navigate to a landing page to play the quiz.

The Goal

Instead of leaving the inbox to play the quiz in a web browser, is it possible to create a fully playable quiz within the email? Yes, through the use of AMP email and the amp-bind component, you can build an interactive quiz.

🛠️ Let's Start Building

The following is a step by step guide for building a short, four question AMP quiz. Scroll to the bottom to view the AMP quiz demo ⏬

🏗️ AMP Boilerplate Template

1). Start by setting up an AMP email template with the required amp-bind script in the <head> tag

Below is a sample AMP email boilerplate:



<!doctype html>
<html ⚡4email data-css-strict lang="en">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
  </style>
</head>
<body>
  <h1>Hello, I am an AMP EMAIL!</h1>
</body>
</html>

❓ Question ✅ Answer Modules

2). Create the first quiz question and corresponding choices



<h3>Question #1</h3>
<h2>How many boroughs make up New York City?</h2>
<article id="q1Question">
  <button>
    Four
  </button>
  <button>
    Five
  </button>
  <button>
    Six
  </button>
  <button>
    Seven
  </button>
</article>

3). Then create the answer module below the original choices. This module will reveal the player's correct or incorrect answer selection



<h3>Question #1</h3>
<h2>How many boroughs make up New York City?</h2>
<article id="q1Question">
  <button>
    Four
  </button>
  <button>
    Five
  </button>
  <button>
    Six
  </button>
  <button>
    Seven
  </button>
</article>
<article id="q1Answer">
  <button>
    Four
  </button>
  <button>
    Five
  </button>
  <button>
    Six
  </button>
  <button>
    Seven
  </button>
</article>

4). Apply the hidden attribute to hide the quiz answer module



<article id="q1Answer" hidden>
...
</article>

In order to hide the question module and reveal the answer module after selecting a choice, we need to create an event handler that listens to this action.

5). Use the on attribute to create an event handler that hides the question module and reveals the answer module after "tapping" on one of the choices



<h3>Question #1</h3>
<h2>How many boroughs make up New York City?</h2>
<article id="q1Question">
  <button on="tap:q1Question.hide,q1Answer.show">
    Four
  </button>
  <button on="tap:q1Question.hide,q1Answer.show">
    Five
  </button>
  <button on="tap:q1Question.hide,q1Answer.show">
    Six
  </button>
  <button on="tap:q1Question.hide,q1Answer.show">
    Seven
  </button>
</article>

The purpose of this event handler is to prevent users from answering the question again after making an initial selection.

Now let's reveal the correct answer and indicate through CSS styling and classes whether the selected option was correct or incorrect ⬇️

6). Use AMP.setState() to bind a correct or incorrect class to each of the options



<h3>Question #1</h3>
<h2>How many boroughs make up New York City?</h2>
<article id="q1Question">
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct', btn1Class: 'incorrect'})">
    Four
  </button>
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct'})">
    Five
  </button>
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct', btn3Class: 'incorrect'})">
    Six
  </button>
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct', btn4Class: 'incorrect'})">
    Seven
  </button>
</article>

7). Add the corresponding [class] attribute to each of the options in the answer module



<h3>Question #1</h3>
<h2>How many boroughs make up New York City?</h2>
<article id="q1Question">
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct', btn1Class: 'incorrect'})">
    Four
  </button>
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct'})">
    Five
  </button>
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct', btn3Class: 'incorrect'})">
    Six
  </button>
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct', btn4Class: 'incorrect'})">
    Seven
  </button>
</article>
<article id="q1Answer" hidden>
  <button [class]="btn1Class || ''">
    Four
  </button>
  <button [class]="btn2Class || ''">
    Five
  </button>
  <button [class]="btn3Class || ''">
    Six
  </button>
  <button [class]="btn4Class || ''">
    Seven
  </button>
</article>

The AMP.setState({btn2Class: 'correct', btn1Class: 'incorrect'}) action will assign the correct CSS class through the [class]="btn2Class || ''" expression. It will also assign the incorrect CSS class through the [class]="btn1Class || ''" expression. The same logic applies to the rest of the buttons.

8). Create the correct and incorrect classes and add the CSS styling



/* AMP.setState CLASSES */
.correct {
  background-color: #3beb57;
  color: #000000;
}
.incorrect {
  background-color: #ff3636;
  color: #ffffff;
}

Up to this point, we have created the first quiz question with four different options. When a user selects one of the options, the hidden answer module will reveal and the correct and incorrect class expression will render.

💯 Recording the Quiz Score

Now let's use amp-bind to track a user's quiz score as they answer each question.

9). Use the AMP.setState() action and the [text] attribute to record and display a score. The state variable quizScore will now update to the value of 1 if the correct option is selected or 0 for the incorrect options



<h3>Question #1</h3>
<h3>Your Score: <span [text]="quizScore">0</span></h3>
<h2>How many boroughs make up New York City?</h2>
<article id="q1Question">
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct', btn1Class: 'incorrect', quizScore: 0})">
    Four
  </button>
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct', quizScore: 1})">
    Five
  </button>
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct', btn3Class: 'incorrect', quizScore: 0})">
    Six
  </button>
  <button on="tap:q1Question.hide,q1Answer.show,AMP.setState({btn2Class: 'correct', btn4Class: 'incorrect', quizScore: 0})">
    Seven
  </button>
</article>

⏩ Next Quiz Question

After a quiz question is answered, let's provide a way to move onto the next question.

10). Create a "Next question" button within the hidden answer module



<article id="q1Answer" hidden>
  <button [class]="btn1Class || ''">
    Four
  </button>
  <button [class]="btn2Class || ''">
    Five
  </button>
  <button [class]="btn3Class || ''">
    Six
  </button>
  <button [class]="btn4Class || ''">
    Seven
  </button>
  <button on="tap:q1Section.hide,q2Section.show">
    Next question &#x2192;
  </button>
</article>

11). Then wrap the entire question #1 module (including the question and answer modules) in a <section> element. Wrap the entire question #2 module using the same method



<!-- QUESTION #1 -->
<section id="q1Section">
  <h3>Question #1</h3>
  <h2>How many boroughs make up New York City?</h2>
  ...
</section>
<!-- end question #1 -->

<!-- QUESTION #2 -->
<section id="q2Section" hidden>
  <h3>Question #2</h3>
  <h2>What is the largest park in NYC?</h2>
  ...
</section>
<!-- end question #2 -->

The "Next question" button with the on="tap:q1Section.hide,q2Section.show" event will hide question #1 and display question #2.

Repeat these steps for questions #2 and #3 to finish building the quiz. Now the quiz is completed 🙌

🕹️ AMP Quiz Demo

Below is a demo featuring a four question quiz with some added CSS styling.

⚠️ NOTE: Copy & paste the HTML tab code into the Gmail AMP Playground or the amp.dev Playground for a more accurate demo experience!

🤔 Can We Automate?

Once this AMP email quiz template is created, can weekly email sends be automated with new questions pulling in from a CORS JSON endpoint?

It is possible to pull in the text content (i.e. quiz questions and options to choose from), however, the logic determining which option is correct and which options are incorrect are built into the on attribute and event handler.

In other words, the position of the "correct" options will always stay the same for each question due to the inline nature of the AMP logic - only the text content will change. This is not an ideal situation because users will eventually learn where the "correct" option is located regardless of the quiz question content.

Currently, the only option with this particular AMP template is to manually shuffle the <button> elements to randomize the "correct" option 🙃.

Conclusion

A fully interactive quiz can be built entirely inside of an email by using the amp-bind component. Individual scores can also be tracked based on the user selections.

Although there is no straightforward solution for automating this AMP quiz template, the fact that users can complete the quiz without leaving their inbox is a clear win 🏆.

🚫 Non-Image Approach to Data Viz in Email

benjamin — Mon, 13 Mar 2023 00:48:51 +0000

HTML emails have a limited toolbox for data visualization. Sophisticated tools such as D3.js are not available to use in email development. As a result, images have become the most common method for displaying data in emails.

This route comes with a number of disadvantages:

not accessible to screen readers (unless the <alt> tag is used properly)
image auto-loading turned off prevents users from seeing data visuals
not dark mode compatible
contributes to total email load time especially when images are not optimized

Is there an alternative way to display data in email templates that do not rely on images? Can emails feature clear, colorful, and engaging data visuals without images?

Yes, through the use of <table> elements, you can create versatile horizontal bar charts, vertical bar charts, and progress bars. This method has distinct advantages and disadvantages compared to using images.

Let's Build a Bar Chart Using `<table>` Elements

Start with a <table> element and <td> cells for the data bar name, data bar, and end label. In this chart example, the name and end label will be place outside the data bar.

<table width="600">
  <tr>
    <td>Data bar #1</td> <!-- Data bar name -->
    <td></td> <!-- Data bar -->
    <td>Label #1</td> <!-- End label -->
  </tr>
</table>

Define the height and width for each <td> cell.

<table width="600">
  <tr>
    <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
    <td style="background-color: #0dbd67; height: 24px; width: 65%;" height="24" width="65%"></td>
    <td style="background-color: #ffffff; height: 24px; width: 15%;" height="24" width="15%">Label #1</td>
  </tr>
</table>

Adjust the width values to change the size of the data bar. Since all three columns are sharing the width percentage, make sure all <td> cells add up to 100%.

<table width="600">
  <tr>
    <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
    <td style="background-color: #0dbd67; height: 24px; width: 35%;" height="24" width="35%"></td> <!-- The data bar width was reduced from 65% to 35%. The difference is added to the `<td>` cell below. -->
    <td style="background-color: #ffffff; height: 24px; width: 45%;" height="24" width="45%">Label #1</td>
  </tr>
</table>

To create a second data bar, nest the code within new <table>, <tr>, and <td> elements. This will allow you to have more control over the spacing between each horizontal data bar. Adjust the spacing using padding within the outer <td> cell.

<table>
  <tr>
    <td style="padding: 0 0 2px 0;">
      <table width="600">
        <tr>
          <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
          <td style="background-color: #0dbd67; height: 24px; width: 35%;" height="24" width="35%"></td>
          <td style="background-color: #ffffff; height: 24px; width: 45%;" height="24" width="45%">Label #1</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding: 0 0 2px 0;">
      <table width="600">
        <tr>
          <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #2</td>
          <td style="background-color: #0d5fbd; height: 24px; width: 65%;" height="24" width="65%"></td>
          <td style="background-color: #ffffff; height: 24px; width: 15%;" height="24" width="15%">Label #2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Now repeat the <tr> sections for each individual data bar and adjust the background-color, widths, and labels for each <td> cell for this bar chart.

This is one example of how <table> elements can be used to create a horizontal bar chart.

Advantages of HTML/CSS Bar Charts

Charts built using <table> elements have a number of advantages over images:

charts can be mobile responsive through the use of media queries and font-size adjustment
load times of charts are faster compared to downloading images
HTML/CSS coded charts use live text, numbers, and labels, which can be picked up by screen readers
charts can be viewed without having to download any images
can be dynamic. Since data bar widths, chart numbers, label text, and colors are coded in HTML/CSS, these fields can be set as variables within ESPs and dynamically rendered using updated JSON data
charts are more compatible in dark mode compared to images

Disadvantages of HTML/CSS Bar Charts

However, there are some disadvantages with coded bar charts:

only horizontal and vertical bar charts and progress bars can be created through this method. For more complicated charts (i.e. circle graphs, highly detailed, complex charts), images are the only option
adds to overall email file weight which risks Gmail clipping if 102KB threshold is surpassed
time consuming and complicated to code and build individual charts

Conclusion

Images are not the only way to display clear, colorful, and engaging data visuals in email. Through the use of <table> elements, emails can feature versatile horizontal and vertical bar charts, and progress bars.

Exploring Dark Mode in ⚡AMP Email

benjamin — Wed, 02 Nov 2022 00:34:16 +0000

Purpose

This post will investigate potential solutions for dark mode support in AMP email.

Does AMP Email Support Dark Mode?

No, there is no dark mode support. AMP email does not support the prefers-color-scheme media feature which is used to apply custom CSS styles for dark mode.
Also, there are no default dark mode styles that automatically apply to AMP email templates. Users who set "dark mode" in their devices will view the same AMP template without any adjustments to the background color or fonts.

Main Question

🤔 Despite this current situation, can AMP email still support dark mode?

✅ Yes, by leveraging specific AMP components including amp-bind, light/dark mode color schemes can be selected and applied dynamically within the AMP email template.

How could this look in 🖥️ Gmail desktop?

...and in 📱 Gmail app for iOS?

🔩 Creating a Dark Mode Option in AMP Email

The amp-bind component allows "elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions".

Through amp-bind and the AMP.setState() action, users can select a light or dark mode option from a dropdown menu and apply custom CSS styles to the AMP template. Let's begin.

1). Start with the <select> HTML element to create a dropdown menu. Define a value attribute for each <option> tag



<select>
  <option value="lightMode">Light Mode</option>
  <option value="darkMode">Dark Mode</option>
</select>

2). Use the on attribute to create an event handler with a change event



<select on="change:">
  <option value="lightMode">Light Mode</option>
  <option value="darkMode">Dark Mode</option>
</select>

3). Then add the AMP.setState() method to update the value of the mode state variable with the option's value when a change event occurs



<select on="change:AMP.setState({ mode: event.value })">
  <option value="lightMode">Light Mode</option>
  <option value="darkMode">Dark Mode</option>
</select>

4). Create an <amp-state> element with an id of colorScheme. Declare JSON data and add state names of lightMode and darkMode with a state variable of style



<amp-state id="colorScheme">
  <script type="application/json">
    {
      "lightMode": {
        "style": "lightStyles"
      },
      "darkMode": {
        "style": "darkStyles"
      }
    }
  </script>
</amp-state>

5). Define CSS styles for the lightStyles and darkStyles classes. These styles will target the background and font colors



<style amp-custom>
  /* LIGHT/DARK MODE STYLES */
  .lightStyles {
    background-color: #ffffff;
    color: #000000;
  }
  .darkStyles {
    background-color: #202124;
    color: #ffffff;
  }
</style>

6). Assign the <body> element (or the element that wraps your entire email content) with the [class] property and bind it to the <amp-state> element using the id of colorScheme. The colorScheme[mode].style expression updates the class property



<body [class]="colorScheme[mode].style || ''">

Through these steps, we can create a CSS class for light mode and a CSS class for dark mode. When the user selects a color scheme, the specific CSS class, properties, and values are immediately applied to the AMP email template ⬇️

🌙 AMP Email Dark Mode Demo

Below is a demo featuring light/dark mode options.

⚠️ NOTE: Copy & paste the HTML tab code into the Gmail AMP Playground or the amp.dev Playground for a more accurate demo experience!

🚧 Areas for Improvement

In this specific use case, users must select the dark mode color scheme each time they receive an AMP email. An improved experience would allow users to select their preferred color scheme once and then apply it to future AMP emails.
In the Gmail app for iOS, there is a noticeable white border when dark mode styles are applied. I have not found a way to target and remove these white borders or expand the template's width to cover this area.

🌗 Beyond Light and Dark Modes

Since we have the freedom and control over defining the background-color and color values in each CSS class, this opens the door to creating color schemes that go beyond light and dark modes.

Let's add a new color scheme called "Sunglow" that will apply background-color: #032932 and color: #fbe707 to the AMP template ⤵️



<select on="change:AMP.setState({ mode: event.value })">
  <option value="lightMode">Light Mode</option>
  <option value="darkMode">Dark Mode</option>
  <option value="sunMode">Sunglow Mode</option>
</select>



<amp-state id="colorScheme">
  <script type="application/json">
    {
      "lightMode": {
        "style": "lightStyles"
      },
      "darkMode": {
        "style": "darkStyles"
      },
      "sunMode": {
        "style": "sunStyles"
      }
    }
  </script>
</amp-state>



<style amp-custom>
  /* COLOR SCHEME STYLES */
  .lightStyles {
    background-color: #ffffff;
    color: #1b1b1b;
  }
  .darkStyles {
    background-color: #202124;
    color: #ffffff;
  }
  .sunStyles {
    background-color: #032932;
    color: #fbe707;
  }
</style>

🔮 Looking Ahead

Could providing multiple color schemes with varying contrasts help improve the user experience in AMP emails? For example, the Twitter app currently provides two versions of dark mode: "dim" vs "lights out".

Through the amp-bind method, AMP emails could provide different versions of dark mode as well. More research and work needs to be done on this front! ⚗️🔬

One Last (Important) Item: Logos in Dark Mode

A common issue with dark mode involves images such as logos: when switching color schemes, logos can become obscured or can unintentionally stick out in dark mode.

❓ Is there a way to replace the original logo with a version that is more appropriate for dark mode in AMP email?
✅ Yes, by using [hidden] expressions and event triggering, the original logo can be replaced with a "dark mode" version.

Continuing off of the previous AMP email sample code:

1). Add both a 🔳 light and 🔲 dark mode logo



<header>
  <amp-img src="https://YOUR-LIGHT-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Light mode logo"></amp-img>
  <amp-img src="https://YOUR-DARK-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Dark mode logo"></amp-img>
</header>

2). Create a [hidden] boolean expression comparing the value of mode with the current AMP state value. When the expression evaluates to false, the logo will no longer stay hidden and will become visible



<header>
  <amp-img [hidden]="mode != 'lightMode'" src="https://YOUR-LIGHT-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Light mode logo"></amp-img>
  <amp-img [hidden]="mode != 'darkMode'" src="https://YOUR-DARK-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Dark mode logo"></amp-img>
</header>

3). Add a separate hidden attribute to the dark mode logo to prevent both logos from displaying upon initial email load



<header>
  <amp-img [hidden]="mode != 'lightMode'" src="https://YOUR-LIGHT-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Light mode logo"></amp-img>
  <amp-img hidden [hidden]="mode != 'darkMode'" src="https://YOUR-DARK-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Dark mode logo"></amp-img>
</header>

Now when the user selects dark mode, the appropriate logo will display:

🌃 Conclusion

Through the use of amp-bind and the AMP.setState() action, users can select and apply a variety of color schemes to the AMP email template. Also, by leveraging [hidden] expressions, images such as logos can be replaced with dark mode versions.

Although there is no support for the media feature prefers-color-scheme, AMP email tools are available to help create customized color schemes experiences that can benefit email users.

DEV Community: benjamin

Build an Interactive Quiz using ⚡AMP Email

Background

The Goal

🛠️ Let's Start Building

🏗️ AMP Boilerplate Template

❓ Question ✅ Answer Modules

💯 Recording the Quiz Score

⏩ Next Quiz Question

🕹️ AMP Quiz Demo

🤔 Can We Automate?

Conclusion

🚫 Non-Image Approach to Data Viz in Email

Let's Build a Bar Chart Using <table> Elements

Advantages of HTML/CSS Bar Charts

Disadvantages of HTML/CSS Bar Charts

Conclusion

Exploring Dark Mode in ⚡AMP Email

Purpose

Does AMP Email Support Dark Mode?

Main Question

How could this look in 🖥️ Gmail desktop?

...and in 📱 Gmail app for iOS?

🔩 Creating a Dark Mode Option in AMP Email

🌙 AMP Email Dark Mode Demo

🚧 Areas for Improvement

🌗 Beyond Light and Dark Modes

🔮 Looking Ahead

One Last (Important) Item: Logos in Dark Mode

🌃 Conclusion

Let's Build a Bar Chart Using `<table>` Elements