Poll

Introduction

This is a sample template for a poll in AMP. After selecting one of the answers, you will see the percentage of chosen answers.

Setup

Import the additional AMP components. This sample uses amp-form to accept poll responses.

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

This sample uses mustache templates to format poll results

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

Poll

We use amp-form to implement a poll. To avoid multiple votes by the same user, we need to identify which users have already voted. We use a cookie called POLL_USER_ID to identify the user. Given that in Safari the default behavior is to block third-party cookies from sites that have not been previously visited, this approach may not work if the page is visited via the AMP Cache. In this case we fallback to checking for duplicate entries via the CLIENT_ID.

The CLIENT_ID is a unique identifier for the user when accessing a specific origin, for example the original page or the cached version of it. This means that the same user will generate two different values when accessing different origins. That's why we use a custom cookie to track cross origin access to the poll page.

Read more about variable substitution. Currently, HTML tables are not supported in form responses, so we'll use CSS to layout the result data.

Read more about variable substitution.

In order to submit the form as soon as the user picks an option, we will add an

on attribute to each <input>, that will submit the poll on change.

<form id="sample-poll" method="post" action-xhr="https://amp.dev/documentation/examples/interactivity-dynamic-content/poll/submit-poll" target="_blank">
      <input name="clientId" type="hidden" value="CLIENT_ID(POLL_USER_ID)" data-amp-replace="CLIENT_ID">
      <h3>What is your favorite flightless bird?</h3>
      <p>Choose your favourite flightless bird and you will discover what other users have chosen.
      If you have already voted, your answer will be overwritten.</p>
      <label>Penguins <input type="radio" value="0" name="answer" on="change:sample-poll.submit"></label>
      <label>Ostriches <input type="radio" value="1" name="answer" on="change:sample-poll.submit"></label>
      <label>Kiwis <input type="radio" value="2" name="answer" on="change:sample-poll.submit"></label>
      <label>Wekas <input type="radio" value="3" name="answer" on="change:sample-poll.submit"></label>
      <div submit-success>
        <script type="text/plain" template="amp-mustache">
          <p>{{Message}}</p>
          <p>Here are the results:</p>
          <table>
            {{#PollEntryResults}}
            <tr>
              <td>
                {{Answer}}
              </td>
              <td>
                {{Percentage.length}}%
              </td>
              <td>
                {{Votes}}
              </td>
              <td>
                {{#Percentage}}<span class="one-pc-fixed"></span>{{/Percentage}}
              </td>
            </tr>
            {{/PollEntryResults}}
          </table>
        </script>
      </div>
      <div submit-error>
        Error! Looks like something went wrong with your vote, please try to submit it again. {{error}}
      </div>
</form>

Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow

Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub

Written by @aghassemi