Engagement Quiz

Module 5 of 6 in the KINETIC.email developer course. Build interactive quizzes in your emails using progressive disclosure: revealing questions one at a time as subscribers answer.

What is an engagement quiz in email?

An engagement quiz is an interactive experience built directly into an email with the radio button hack. Recipients tap answer options; each answer hides the current question and reveals the next, showing one question at a time until a final result appears, all without leaving the inbox. Quizzes turn passive recipients into active participants and can collect zero-party data about subscriber preferences.

Common use cases

• Product recommender quizzes
• Personality or style quizzes
• Knowledge trivia
• Preference surveys
• Lead qualification

How it works

• Radio buttons track answer selection.
• Multiple groups, one per question.
• :checked selectors hide the answered question and show the next.
• display: none and display: block toggle which question is visible.

Advantages and limitations

Quizzes need no JavaScript, work with the lightswitch fallback and build on skills from earlier modules. They are only supported in kinetic-enabled clients, cannot do conditional branching, show a single result for all paths, and require careful HTML structure.

Building an interactive quiz

<input type="radio" id="q1a" name="q1">
<input type="radio" id="q1b" name="q1">
<input type="radio" id="q2a" name="q2">
<input type="radio" id="q2b" name="q2">

<div class="question q1">
  <h3>What matters most in your campaigns?</h3>
  <label for="q1a" class="option">Beautiful design</label>
  <label for="q1b" class="option">Data and analytics</label>
</div>
<div class="question q2">...</div>
<div class="question result">...</div>

.q2, .result { display: none; }

#q1a:checked ~ .q2,
#q1b:checked ~ .q2 { display: block; }
#q1a:checked ~ .q1,
#q1b:checked ~ .q1 { display: none; }

#q2a:checked ~ .result,
#q2b:checked ~ .result { display: block; }
#q2a:checked ~ .q2,
#q2b:checked ~ .q2 { display: none; }

How it works

1. Multiple radio groups: each question has its own name, so answering Q1 does not reset Q2.
2. One question at a time: an answered question hides and the next one appears.
3. Labels as answer buttons: labels inside the question blocks still toggle the radio inputs at the top of the document.
4. Cascade order: hide rules must come after show rules. When both apply (Q1 shows Q2, and a Q2 answer hides Q2), the later rule wins because the specificity is equal.

All inputs must be siblings of the question blocks, not nested inside them, for the ~ general sibling combinator to work. The lesson's live example walks through three questions and ends on a result card: "You're an Email Innovator!"

Exercise 1: Build a two-question quiz

Add the Q2 radio inputs, hide .q2 and .result by default, then write :checked rules that hide Q1 and show Q2, and hide Q2 and show the result.

Visual feedback and styling

The :checked + label adjacent sibling selector styles a label based on whether the radio immediately before it is selected, so a tapped option changes appearance instantly:

#q1a:checked + label,
#q1b:checked + label {
  background: #7c3aed;
  color: white;
  border-color: #7c3aed;
}

Styling tips

• Use display: none and display: block for question hide and show; it does not leave empty space the way max-height: 0 sometimes can.
• Place hide rules after show rules.
• Add cursor: pointer to labels so options read as clickable.
• Use contrasting colors for the selected state so feedback is clear on mobile.

Exercise 2: Style the result card and options

Add a .result-card with a heading and paragraph, give it a purple gradient background, white text, 32px padding, 16px rounded corners and centered text, and add a :hover state to .option.

Best practices

• Keep it short: 2 to 4 questions.
• Use clear, simple language in answer options.
• Provide immediate visual feedback on selection.
• End with a fun, encouraging result.
• Keep all radio inputs as siblings and give each question a unique name.
• Always include the kinetic lightswitch so non-supporting clients see a graceful fallback.
• Test in both supporting and non-supporting clients.
• Do not attempt conditional branching; CSS cannot do if/else logic across answer combinations.
• Make answer options at least 44px tall for easy tapping.

The next module shows how to add tracking pixels to each answer so a quiz collects real subscriber data.

Signing in lets you track your progress and earn course completion credits.

Previous: Building Tabbed Elements. Next: Kinetic Email Tracking. Back to the learning hub.