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