ABC News created an Adventr which allows viewers to answer a quiz in realtime. With our Realtime Player API, the page can be made to display instantly updated results, showing how other viewers have interacted or chosen. Play the Adventr below and see the page auto-update and react as you do.
If you want to peek under the hood on how this specific example was made, scroll down to read the tutorial.
C. Donald Trump
A. Chicken Wing – Pizza Combo
In this tutorial, I’ll show you how to use the Adventr Realtime Player API to show real-time quiz results as a viewer engages with an Adventr-powered quiz.
For the demo, we are simply saving the aggregate totals of each response, but you could also easily store responses along with user IDs to track each individual user’s responses in a quiz or survey.
We are going to listen for viewer choices and then save them to an external data source, and then display the aggregate results back to the viewer.
It might help to view the source of this page to follow along.
We start with a standard Adventr iframe embed and then add some divs to the HTML that will eventually display our questions and results (one div per question). They look like the following (with incrementing IDs (e.g.
<div class="results" id="results_1"> <h3 class="question"></h3> <p class="correct-answer"><strong>A. Seven</strong></p> <ul class="answers"> <li class="A">A <span class="count"></span></li> <li class="B">B <span class="count"></span></li> <li class="C">C <span class="count"></span></li> <li class="D">D <span class="count"></span></li> </ul> </div>Code language: HTML, XML (xml)
We have CSS that ensures these divs are hidden until they’re ready (look in the page source for the
For this example, we are using Airtable for our results data, since it provides an easy-to-use API for storing and retrieving data.
We are also using jQuery for Ajax requests and DOM manipulation, but you can easily use other libraries if you prefer.
Since we are only listening for user choices in the Adventr player, it’s overkill to use the player.js library. Instead, we start with a simple listener so we can trigger events based on choices within the Adventr. We are also going to listen for
play events and for responses to
getCurrentClip (which we use to identify where we are within the Adventr).
The following code is all you need to listen for choices from the Adventr player and can trigger any behavior you might imagine:
We have a helper function being called on the play event. This calls the Adventr API getCurrentClip method. Here’s that function:
You’ll also see that when we receive a
postMessage that’s in the right format and has
event=='choice', we pass the choice’s label to a function called
updateAirTable(). That function handles most of the rest of the behavior.
Before we define that function we define some variables we’ll be using:
We also need a function that obtains the state of the Airtable data when the page loads. This function uses Ajax to request the Airtable API and then copies the data into our
Now, let’s come back to our main function of
updateAirTable(). Most of this function is handling the DOM manipulation to change the values and appearance of hidden HTML already on the page. Depending on your design, much of this could be very different.
I recommend viewing the source of the page to see the HTML that is being manipulated.
As you can see, the majority of the code here is modifying the DOM and customizing how we display the data. The actual listening for choice events and doing something with those events is fairly simple.
We’d love to see what you create with the API. Please post in the forums if you have something you want to show off!