具有結果的互動式測驗

簡介

amp-story-interactive 元件為 Web Stories 提供可自訂的沉浸式測驗和投票。

在本指南中，我們建立了一個 Web Story，其中包含將答案回報給結果元素的測驗。結果元素根據正確的測驗答案顯示不同的類別。

首先，匯入 amp-story-interactive 以及您的其他 stories 匯入。

<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.dev.org.tw/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.dev.org.tw/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.dev.org.tw/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>

具有結果的互動式測驗

簡介

概觀

定義測驗

連結至結果

更多資源