带结果的互动测验

简介

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

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

<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 适合计算出的百分比。然后，它会显示计算出的状态的类别、描述和图像。

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

您可以在 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>

带结果的互动测验

简介

概述

定义测验

链接到结果

更多资源