AMP
英文
德語 法語 阿拉伯語 西班牙語 義大利語 印尼語 日語 韓語 葡萄牙語 俄語 土耳其語 簡體中文 波蘭語 越南語
  • 故事

具有結果的互動式投票

檢視示範 在 Playground 中開啟

簡介

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 設計。例如，將漸層新增至 prompt-background 是增強元素視覺效果的好方法。

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

更多資源

如果您想進一步了解 Web Stories 的所有互動式體驗，請前往文件，或查看關於如何製作包含測驗的 story 的指南。

需要更多說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，以討論您的確切使用案例。

前往 Stack Overflow
未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。

在 GitHub 上編輯範例
  • 由 @mszylkowski 編寫