Variables and Dynamic Annotations are an advanced set of capabilities which allow you to create interactive videos that modify the viewing experience based on how the viewer interacts. You can dynamically set any javascript variable when a viewer clicks.

Variables allow you to personalize the viewing experience. There are two primary functions:

  • Customizing text shown in an annotation, e.g:
  • Using with Display Rules to control whether or not future annotations are displayed.

There are three types of variables:

  1. OnClick variables: Variables explicitly set when an annotation is clicked.
  2. Quiz variables: Variables automatically created by quiz annotations.
  3. Environment variables: Variables passed to HapYak from an external system.

OnClick Variables

Variable name must begin with a letter, _ or $. Use = for assignments, and double quotes for quoted strings. Delimit multiple variables with a comma.

example: product_id=256231, customer_type="lead"
example: learner_section=88090
example: choice="yes"

You can make the video pause or play when the viewer clicks, using these variables.

player.pause()
player.play()

Here's an example.

Quiz Variables

Every question defined in a Quiz annotation will automatically create two variables.

  1. The value of the answer provided by the viewer.
  2. Whether the answer provided by the viewer was correct.

These variables are automatically created and listed anywhere you can select a variable.

For reference they are named: 

quiz_[annotation-id]_[question-index]

example: quiz_123_1 is the answer to the first question in the quiz with id 123.

To indicate a correct answer add correct 

example: quiz_123_1_correct

To indicate an incorrect answer add ! 

example: !quiz_123_1_correct

To only show an annotation if an incorrect answer is given use this for your display rule.

example: quiz_123_1 && !quiz_123_1_correct

Here is an example video of how to do that...

Environment Variables

Developers using the HapYak Embed API can directly provide a JSON object when the player is instantiated that defines variables to be used by annotations.

Example:

hapyak.viewer({
   player: ytPlayer,
   playerType: "youtube",
   css: "http://modernizr.com/i/css/modernizr-2.1.1.css?v=1",
   width: 640,
   height: 360,
   trackId: 640,
   autoplay: true,    
   variables: {“my_name”:”Kyle”,”my_company”:”HapYak”}
});

Adding and Testing Variables

You can type a variable directly into your annotation. Here's an example in a text annotation.

To test it out, simply click "View Test Preview Page" then at the end of the URL add a query parameter that sets the variable. Make sure to prepend the variable with "hapyak_".

ex/ http://www.hapyak.com/portal/viewer/c0848b7cacc1e82dda1d3113b0ffcd06?hapyak_first=Diego

When you play the video the variables will dynamically populate.

Did this answer your question?