This article will go through the different options that you can build with the code block.
Building the first polls with the code block
Copy the necessary code if you want to create a classical poll with a header like the example below.
This is the necessary code for this poll. Feel free to change the questions and the poll answers.
<div class="w-full h-full flex justify-center">
<amp-story-interactive-poll
id="poll-result1"
theme="light"
endpoint="https://stories.tappable.link/interactive/poll"
prompt-text="Pick a Country"
option-1-text="Belgium" option-1-results-category="Belgian"
option-2-text="Italy" option-2-results-category="Italian"
option-3-text="Greece" option-3-results-category="Greek"
option-4-text="Spain" option-4-results-category="Spannish"
class="text-sm"
style="
--interactive-prompt-background: #f44336;
--interactive-prompt-text-color: #ffffff;
--interactive-prompt-alignment: center
">
</amp-story-interactive-poll>
</div>
Setting up the first poll
For the Story to calculate the end result you must give each poll answer a value.
option-1-text="Belgium" option-1-results-category="Belgian"
option-2-text="Italy" option-2-results-category="Italian"
option-3-text="Greece" option-3-results-category="Greek"
option-4-text="Spain" option-4-results-category="Spannish"
These values have to be the same across the Story.
Remember when creating a poll with the code block, you should really pay attention to the id= ! The id should be unique for each of the polls that you create. Try to name the id in a descriptive way to avoid having duplicates.
⚠️ A duplicate id will give you false poll results.
Building the second poll with the code block
Copy the necessary code if you want to create a classical poll with a header like the example below.
This is the necessary code for this poll. Feel free to change the questions and the poll answers.
<div class="w-full h-full flex justify-center">
<amp-story-interactive-poll
id="poll-result2"
theme="light"
endpoint="https://stories.tappable.link/interactive/poll"
prompt-text="Pick a dish"
option-1-text="Pizza" option-1-results-category="Italian"
option-2-text="Tapas" option-2-results-category="Spannish"
option-3-text="Fries" option-3-results-category="Belgian"
option-4-text="Musaka" option-4-results-category="Greek"
class="text-sm"
style="
--interactive-prompt-background: #f44336;
--interactive-prompt-text-color: #ffffff;
--interactive-prompt-alignment: center
">
</amp-story-interactive-poll>
</div>
Setting up the second poll
Here again, you see that we have added each of the poll answers a value. You will see the values are the same as in the first poll.
option-1-text="Pizza" option-1-results-category="Italian"
option-2-text="Tapas" option-2-results-category="Spannish"
option-3-text="Fries" option-3-results-category="Belgian"
option-4-text="Musaka" option-4-results-category="Greek"
Building the additional polls with the code block
The logic will remain the same for all the other polls. Here is a little example for fun and giggles.
With the code
<div class="w-full h-full flex justify-center">
<amp-story-interactive-poll
id="poll-result3"
theme="light"
endpoint="https://stories.tappable.link/interactive/poll"
prompt-text="Pick a flag"
option-1-text="🇬🇷" option-1-results-category="Greek"
option-2-text="🇪🇸" option-2-results-category="Spannish"
option-3-text="🇮🇹" option-3-results-category="Italian"
option-4-text="🇧🇪" option-4-results-category="Belgian"
class="text-sm"
style="
--interactive-prompt-background: #f44336;
--interactive-prompt-text-color: #ffffff;
--interactive-prompt-alignment: center
"
>
</amp-story-interactive-poll>
</div>
Visualizing the results
Here is how the results could look like
And here is the code block for the results.
<div class="w-full h-full flex justify-center">
<amp-story-interactive-results
id="results-1"
option-1-results-category="Italian"
option-1-text="Welcome to Italy"
option-1-image="https://cdn.tappable.io/rFuREun0/i/ild0Fo3yNsFZ_NABDxLU6.o.jpeg"
option-2-results-category="Greek"
option-2-text="Welcome to Greece"
option-2-image="https://cdn.tappable.io/rFuREun0/i/i2dICPn7Rck2873CSh0nd.o.jpeg"
option-3-results-category="Spannish"
option-3-text="Welcome to Spain"
option-3-image="https://cdn.tappable.io/rFuREun0/i/Tgm8qqbG_HtDT8bAkJjDd.o.jpeg"
option-4-results-category="Belgian"
option-4-text="Welcome to Belgium"
option-4-image="https://cdn.tappable.io/rFuREun0/i/t2W0nSsXiU6K0hS4TgUYO.o.jpeg"
class="text-base"
theme="dark"
style="
--interactive-accent-color: #ff0000;
--interactive-prompt-text-color: #065f46;
--interactive-prompt-background: #d1fae5
">
</amp-story-interactive-results>
</div>
Setting up the results
We have specified option-{1/2/3/4}-results-category on all the polls without any immediate effect, but here is where they come into play.
An internal state saves the user's poll selections. The amp-story-interactive-results element reads each poll's state and calculates the results. It then displays the category, description, and image of the calculated state.
Calculating the results
The result shown will be the one with more options selected, prioritizing the states configured first in this case option-1-results-category="Italian". If no options are selected, it will then show the option-1 state by default.
Some design options are offered to you.
These are a few changes that you can do in the code above.
Change the theme by changing it to dark.
theme="light"
Change the size of the prompt text
You can change the size of the prompt text right here.
class="text-sm"
You can play around with the size of the text to suit your desired design. Here is the list of the different sizes.
"text-xs"
"text-sm"
"text-base"
"text-lg"
"text-xl"
Change the accent color around the image
Play around with the following line of code and add your preferred color.
--interactive-accent-color: #ffd700;
Remove the image
If you want a more pure look while keeping the interactivity you can remove the images.
Simply remove
option-1-image
option-2-image
option-3-image
option-4-image