Interactive components developer preview

[Matias Szylkowski]

Folks,

The Web Stories team and working group is working to increase visibility of upcoming Web Story features and make it easier for publishers, creators and toolmakers to evaluate and adopt new capabilities. 

As a first step, we’d like to give you access to pre-launch developer previews of upcoming features, along with detailed documentation, usage examples and FAQs so you are able to start integrating them into your infrastructure, workflows and UIs even before we announce them on AMP.dev. Beyond this, we will start publishing quarterly roadmaps covering all major upcoming features and capabilities. 

This email list is intended to be low traffic, open to all, and entirely optional. 

The content here will be available on Github as well. We’d love to hear your feedback, thoughts and plans to incorporate these features, but recommend that you continue to use existing bi-directional channels such as Github or Slack (sign up link) to connect.

With that said, here a preview of interactive components to help you build rich quiz and poll experiences in Web Stories: 

Interactive components developer preview - August 2020

We have more detailed documentation here, but to whet your appetite, here are two complete Story examples of what creators can do with these new features (but of course you can also just add a poll or quiz to a single page in a Story). We anticipate fully launching these features in September, and encourage you to use this developer preview to integrate them into your tools in time for the launch.

 

Name that artist (an interactive multi-page quiz within a Web Story)

How much do you know about art? This story contains 4 interactive quizzes about past and present artists showing the capabilities of quizzes. Coupled with a results component and (fake) aggregate data, displays the full experience of a multipage set of quizzes. We also added CSS timers and previous/next arrows for a responsive and fun UX. Warning: you might learn facts about art along the way. https://webstoriesinteractivity-demo.web.app/examples/amp-story/interactives/arts-quizzes.html

 

Which Cute Animal Are You? (a multi-page poll within a Web Story)
Have you ever wondered what your spirit animal is? This story contains 4 interactive polls that will uncover your true animal self. Coupled with a results component and (fake) aggregate data, displays the full experience of a multipage set of polls. https://webstoriesinteractivity-demo.web.app/examples/amp-story/interactives/animals-polls.html

 

Here are copy/paste ready examples that can help you implement these components in your tools https://codepen.io/collection/XjYZMq

You can also take a look at the project roadmap at https://github.com/ampproject/amphtml/projects/110

The full developer preview update covers this and more:

• Details on the new quiz and poll components, as well as quiz and category results

• Code examples to show proper configuration

• API to support a backend and integration details

• Fully functional example Stories demonstrating good usage of these components

• Additional demos for the variety of styling and customization options

• Examples for how you can easily integrate these components into WYSIWYG editors and tools

• Additional explorations and roadmap

• FAQs (please feel free to reach out with other questions & thoughts)

Thank you!

Web Stories team and working group