LiveLike

The LiveLike Developer Hub

Welcome to the LiveLike developer hub. You'll find comprehensive guides and documentation to help you start working with LiveLike as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Widget Animations Tutorial

Some widgets fire events after a user interacts with them, giving developers the opportunity to add custom feedback depending on the user's interaction.

🚧

Web SDK version 1.8 required

Example

As a first example, we will add a results event listener that plays an animation when someone gets a quiz correct:

const widgets = document.getElementById('widgets')

widgets.addEventListener('results', function (ev) {
  switch (ev.target.widgetPayload.kind) {
    case 'text-quiz':
    case 'image-quiz':
      if (ev.detail.result === 'correct') {
        playCorrectQuizResultAnimation() // Not provided by SDK
      }
      break
  }
})
<livelike-widgets id="widgets" programid={programid}></livelike-widgets>

This works because the quiz widgets emit a results event when the correct answer is revealed. If the user was correct, it plays a custom animation not provided by the SDK.

Supported Widgets

The Text Quiz, Image Quiz, Text Prediction Follow-up, and Image Prediction Follow-up widgets fire events that allow developers to customize the feedback to correct and incorrect answers. The exact list of widget kinds are:

  • text-quiz
  • image-quiz
  • text-prediction-follow-up
  • image-prediction-follow-up

The Results Event

The results event has a detail property containing the result of the user's interaction with the widget. The detail object contains a single property named result that will be either "correct" or "incorrect". The results event will not fire if the user did not interact with the widget.

Updated about a year ago

Widget Animations Tutorial


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.