带有结果的互动测验

简介

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

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

首先，将 amp-story-interactive 与其他 story 导入一起导入。

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

我们还将链接分析以跟踪统计信息

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

将您的 amp-analytics 配置添加到 story 中。我们将使用 ${storyInteractiveId} 和 ${storyInteractiveResponse} 来收集有关响应的其他信息。可以在文档中找到完整的变量列表

<amp-analytics id="my-analytics">
  <script type="application/json">
    {
      "requests": {
        "interactive": "https://example.com/interactive?id=${storyInteractiveId}&response=${storyInteractiveResponse}"
      },
      "triggers": {
        "interactiveSelected": {
          "on": "story-interactive",
          "request": "interactive"
        }
      }
    }
  </script>
</amp-analytics>

概述

我们将创建一个互动体验，告诉您您对足球了解多少。

为此，我们将使用 amp-story-interactive-results 元素来显示用户的测验结果。此元素显示用户的正确率百分比和相应的类别。

定义测验

要添加测验，我们必须指定一些属性

option-{1/2/3/4}-text 将用于将选项传递给投票
option-{1/2/3/4}-confetti 将用于传递在选择选项时会爆炸的表情符号。您应该仅将彩纸添加到正确的选项，因为如果选择的选项不正确，我们不想触发动画。试一下并选择“乌拉圭”，以查看动态效果！
prompt-text 和 prompt-size 将确定问题的内容和大小。由于内容很短，我们将使其变大。
theme 和 chip-style 将更改投票的外观。
option-{1/2/3/4}-correct 用于显示哪个选项是正确的。

在这种情况下，我们添加了一个带有绿色提示文本的透明测验，并启用了 option-3-correct。

测验可以有 2-4 个选项，因此它将适合所有类型的一个正确答案的问题。

<amp-story-page id="page-quiz-1">
  <amp-story-grid-layer template="fill" style="background-color: black">
    <amp-img style="opacity:0.7"
      layout="fixed" width="1600" height="1200"
      src="https://images.unsplash.com/photo-1508098682722-e99c43a406b2?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-quiz
        id="quiz-1" class="center"
        prompt-text="Who won the first soccer world cup?"
        endpoint="https://amp.js.cn/documentation/examples/components/amp-story-interactive-poll/results"
        prompt-size="large" chip-style="transparent"
        option-1-text="Spain"
        option-2-text="Brazil"
        option-3-text="Uruguay" option-3-correct option-3-confetti="⚽"
        option-4-text="Germany">
      </amp-story-interactive-quiz>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

现在我们可以创建另一个具有相同属性的测验。对于此测验，我们将重点颜色设置为绿色：--interactive-accent-color:rgb(9, 63, 4);，这将为提示背景和测验重点着色。在这种情况下，由于背景更详细，我们将不使用透明样式。

您可以使用 CSS 变量和属性更精细地控制提示、重点和背景。在文档中了解如何操作。

<amp-story-page id="page-quiz-2">
  <amp-story-grid-layer template="fill">
    <amp-img
      layout="fixed" width="1600" height="1200"
      src="https://images.unsplash.com/photo-1527871252447-4ce32da643c6?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-quiz
        id="quiz-2"
        prompt-text="What country won the most soccer world cups?"
        endpoint="https://amp.js.cn/documentation/examples/components/amp-story-interactive-poll/results"
        class="center"
        prompt-size="large"
        option-1-text="Spain"
        option-2-text="Brazil" option-2-correct option-2-confetti="⚽"
        option-3-text="Uruguay"
        option-4-text="Germany">
      </amp-story-interactive-quiz>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

让我们再做一个，以训练肌肉记忆。

例如，在提示背景中添加渐变是增强元素视觉效果的好方法。

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

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

<amp-story-page id="page-quiz-3">
  <amp-story-grid-layer template="fill">
    <amp-img
      layout="fixed" width="1600" height="1200"
      src="https://images.unsplash.com/photo-1531266752426-aad472b7bbf4?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-quiz
         id="quiz-3"
         prompt-text="Where are FIFA headquarters?"
         endpoint="https://amp.js.cn/documentation/examples/components/amp-story-interactive-poll/results"
         class="center"
         prompt-size="large"
         option-1-text="Germany"
         option-2-text="USA"
         option-3-text="Switzerland" option-3-correct option-3-confetti="🌐"
         option-4-text="Spain">
      </amp-story-interactive-quiz>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

链接到结果

我们必须为 amp-story-interactive-results 中的每个状态配置阈值。这使其能够计算并显示用户从测验选择中获得的结果。

当用户回答测验时，内部状态会保存正确答案的百分比，并检查哪个 results-threshold 适合计算出的百分比。然后，它会显示计算状态的类别、描述和图像。

如果您返回到其他页面并回答测验（在下面的 story 中），您将看到当您返回到结果页面时，结果状态和显示的百分比会如何变化。这里我们创建了 2 个状态：“专家”表示所有问题都正确回答的用户，“粉丝”表示错过一个或多个问题的用户。尝试在下面的 story 中正确回答所有问题，并查看元素如何更改以显示“专家”类别。

您可以在 amp-story-interactive-results 元素上添加最多 4 个状态，并为不同的状态包含图像。有关带有图像的结果元素的示例，请查看有关如何制作带有投票的 Web Story的指南

<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-1527871369852-eb58cb2b54e2?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 soccer"
         option-1-results-category="Fan" option-1-text="You might not be the most knowledgeable, but enjoy watching games every now and then" option-1-results-threshold="0"
         option-2-results-category="Expert" option-2-text="You know everything about soccer, be proud of it!" option-2-results-threshold="80">
      </amp-story-interactive-results>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

带有结果的互动测验

简介

概述

定义测验

链接到结果

更多资源