带有结果的互动投票

简介

amp-story-interactive 组件为 Web Stories 提供可自定义的沉浸式测验和投票。

在本指南中，我们将构建一个带有投票的 Web Story，该投票将答案报告给结果元素。结果元素根据用户的投票答案显示不同的类别。

首先，导入 amp-story-interactive 以及其他故事导入。

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

概述

我们将创建一个互动体验，计算出您是什么动物。 option-{1/2/3/4}-results-category 属性将每个投票选项链接到结果类别，因此请特别注意它。

定义投票

要添加投票，我们必须指定一些属性

option-{1/2/3/4}-text 将选项传递给投票。
option-{1/2/3/4}-confetti 传递在选择选项时爆炸的表情符号。尝试选择一个选项！
prompt-text 和 prompt-size 确定问题的内容和大小。因为内容很短，所以我们将它设置得很大。
theme 和 chip-style 更改投票的外观。
option-{1/2/3/4}-results-category 帮助计算 amp-story-interactive-results 元素的状态，更多信息如下。

在本例中，我们添加了一个带有橙色提示文本的深色透明投票，并将每个选项链接到一个 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.org.cn/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>

现在我们可以使用相同的属性创建另一个投票。请注意，与每个选项关联的 results-category 与顺序无关。对于此投票，我们将强调色设置为绿色：--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.org.cn/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>

让我们再创建一个，只是为了训练肌肉记忆。

为创建者公开了多个属性和 CSS 变量，以调整样式以适应故事设计。例如，向 prompt-background 添加渐变是增强元素视觉效果的好方法。

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

如果您想查看所有可用的样式，请查看文档或示例故事。

<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.org.cn/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>

链接到结果

我们在所有投票中指定了 option-{1/2/3/4}-results-category，但没有任何直接影响，但它们在这里发挥作用。

内部状态保存用户的投票选择。 amp-story-interactive-results 元素读取每个投票状态并计算结果。然后，它会显示计算状态的类别、描述和图像。

如果您返回其他页面并回答投票（在下面的故事中），您将看到当您返回结果页面时，结果如何更改状态为另一种动物。

显示的结果将是选择选项最多的结果，优先考虑首先配置的状态。如果未选择任何选项，则默认情况下它将显示 option-1 状态。

<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>

带有结果的互动投票

简介

概述

定义投票

链接到结果

更多资源