Interactive polls with results

Introduction

The amp-story-interactive component provides customizable immersive quizzes and polls for Web Stories.

In this guide we build a Web Story with polls that reports the answers to a result element. The result element shows different categories based off a user's poll answers.

To begin, import amp-story-interactive along your other stories imports.

<script async custom-element="amp-story-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>

Overview

We will create an interactive experience that calculates what animal you are. The option-{1/2/3/4}-results-category attribute links each poll option to a result category, so pay special attention to it.

Define the polls

To add a poll, we have to specify some attributes:

option-{1/2/3/4}-text passes the options to the poll.
option-{1/2/3/4}-confetti passes the emojis that explode when selecting an option. Give it a try by selecting an option!
prompt-text and prompt-size determine the content and size of the question. We'll make it large sine the content is short.
theme and chip-style change the way the poll looks.
option-{1/2/3/4}-results-category helps calculate the state of the amp-story-interactive-results element, more info below.

In this case, we added a dark transparent poll with orange prompt text, and we linked each option to a option-{1/2/3/4}-results-category.

<amp-story-page id="page-poll-1">
  <amp-story-grid-layer template="fill" style="background-color: white">
    <amp-img style="opacity:0.7"
      layout="fixed" width="1600" height="1200"
      src="https://images.unsplash.com/photo-1490818387583-1baba5e638af?q=20"
      alt="..." />
  </amp-story-grid-layer>
  <amp-story-grid-layer template="fill" aspect-ratio="4:6">
    <div animate-in="scale-fade-up">
      <amp-story-interactive-poll
      id="poll-1" class="center"
      prompt-text="What's your favorite food?"
      endpoint="https://amp.dev/documentation/examples/components/amp-story-interactive-poll/results"
      prompt-size="large" theme="dark" chip-style="transparent"
      option-1-text="Bones" option-1-results-category="Dog" option-1-confetti="🦴"
      option-2-text="Fish" option-2-results-category="Cat" option-2-confetti="🐟"
      option-3-text="Carrots" option-3-results-category="Bunny" option-3-confetti="🥕"
      option-4-text="Cheese" option-4-results-category="Mouse" option-4-confetti="🧀">
    </amp-story-interactive-poll>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Now we can create another poll with the same attributes. Note how the results-category associated with each option is independent from the order. For this poll, we will set the accent color to green: --interactive-accent-color:rgb(9, 63, 4);.

<amp-story-page id="page-poll-2">
  <amp-story-grid-layer template="fill">
    <amp-img
      layout="fixed" width="1600" height="1200"
      src="https://images.unsplash.com/photo-1542144582-1ba00456b5e3?q=20"
      alt="..." />
  </amp-story-grid-layer>
  <amp-story-grid-layer template="fill" aspect-ratio="4:6">
    <div animate-in="scale-fade-up">
      <amp-story-interactive-poll
        id="poll-2"
        prompt-text="How do you spend your free time?"
        endpoint="https://amp.dev/documentation/examples/components/amp-story-interactive-poll/results"
        class="center"
        prompt-size="large"
        option-1-text="Stretching back" option-1-results-category="Cat" option-1-confetti="🧘"
        option-2-text="Brushing mustache" option-2-results-category="Mouse" option-2-confetti="👺"
        option-3-text="Jumping" option-3-results-category="Bunny" option-3-confetti="🦘"
        option-4-text="Fetching balls" option-4-results-category="Dog" option-4-confetti="⚽">
      </amp-story-interactive-poll>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

And let's make a third one just to train muscle memory.

There's multiple attributes and CSS variables exposed for creators to adapt the style to fit the story design. Adding gradients to the prompt-background is a great way to enhance the visuals of your elements, for instance.

--interactive-prompt-background: linear-gradient(120deg, var(--color-1), var(--color-2));

If you want to see all the available styles, check the documentation or example story.

<amp-story-page id="page-poll-3">
  <amp-story-grid-layer template="fill">
    <amp-img
      layout="fixed" width="1600" height="1200"
      src="https://images.unsplash.com/photo-1500835556837-99ac94a94552?q=20"
      alt="..." />
  </amp-story-grid-layer>
  <amp-story-grid-layer template="fill" aspect-ratio="4:6">
    <div animate-in="scale-fade-up">
      <amp-story-interactive-poll
         id="poll-3"
         prompt-text="What would you do for holidays?"
         endpoint="https://amp.dev/documentation/examples/components/amp-story-interactive-poll/results"
         class="center poll-3"
         prompt-size="large"
         chip-style="shadow"
         option-1-text="Easter island" option-1-results-category="Bunny" option-1-confetti="🗿"
         option-2-text="Drive with tongue out" option-2-results-category="Dog" option-2-confetti="🏎️"
         option-3-text="Run from cats" option-3-results-category="Mouse" option-3-confetti="🏃"
         option-4-text="Stay in bed" option-4-results-category="Cat" option-4-confetti="😴">
      </amp-story-interactive-poll>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Link to the results

We have specified option-{1/2/3/4}-results-category on all the polls without any immediate effect, but here is where they come into play.

An internal state saves the user's poll selections. The amp-story-interactive-results element reads each polls state and calculates the results. It then displays the category, description and image of the calculated state.

If you go back to the other pages and answer to the poll (in the story below), you'll see how the results change state to another animal when you go back to the results page.

The result shown will be the one with more options selected, prioritizing the states configured first. If no options are selected, it will then show the option-1 state by default.

<amp-story-page id="page-results">
  <amp-story-grid-layer template="fill">
    <amp-img
      layout="fixed" width="1600" height="1200"
      src="https://images.unsplash.com/photo-1500835556837-99ac94a94552?q=20"
      alt="..." />
  </amp-story-grid-layer>
  <amp-story-grid-layer template="fill" aspect-ratio="4:6">
    <div animate-in="scale-fade-up">
      <amp-story-interactive-results
         id="results-1" class="center"
         prompt-text="You are a"
         option-1-results-category="Cat" option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH" option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
         option-2-results-category="Dog" option-2-text="You always have energy and love being with friends. Outdoors is your favorite place" option-2-image="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg"
         option-3-results-category="Bunny" option-3-text="You love jumping around and having fun. Your bubbly personality is contagious, and your love for carrots is unconditional" option-3-image="https://images.pexels.com/photos/326012/pexels-photo-326012.jpeg"
         option-4-results-category="Mouse" option-4-text="Even though you're small, you're also full of curiosity and love going around finding new things to do" option-4-image="https://images.pexels.com/photos/51340/rat-pets-eat-51340.jpeg">
      </amp-story-interactive-results>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

More resources

If you want to learn more about all the interactive experiences for Web Stories, head over to the documentation or check out the guide on how to make a story with quizzes instead.

需要进一步说明？

如果此页面上的说明未能涵盖您的所有问题，欢迎与其他 AMP 用户取得联系，讨论您的具体用例。

前往 Stack Overflow

一项无法解释的功能？

AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。

编辑 GitHub 上的示例

Written by @mszylkowski