互動式投票與結果

簡介

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>

總覽

我們將建立互動式體驗，以計算出您是什麼動物。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.dev.org.tw/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.dev.org.tw/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 變數來調整樣式，以符合 story 設計。例如，在提示背景中新增漸層是強化元素視覺效果的好方法。

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

如果您想查看所有可用的樣式，請查看文件或範例 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.org.tw/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 元素會讀取每個投票狀態並計算結果。然後，它會顯示計算狀態的類別、說明和圖片。

如果您回到其他頁面並回答投票（在下方的 story 中），您會看到當您回到結果頁面時，結果如何將狀態變更為另一種動物。

顯示的結果會是選取最多選項的結果，優先顯示最先設定的狀態。如果未選取任何選項，預設會顯示 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>

互動式投票與結果

簡介

總覽

定義投票

連結至結果

更多資源