Friendly Warning: welcome to developer territory. 

You will have a lot of fun if you are comfortable with HTML, Javascript and CSS, or have a friend / colleague that is. If not, you may have a bad time. 

If you are a real do-it-yourselfer and want to learn yourself, we highly recommend first taking Codeacademy's free HTML/CSS and JavaScript courses. 

Ensuring Viewer Watches all Choices

Works for: In-Video Branching

If you are creating in-video branching you may want to ensure that viewers watch all choices from a particular choice screen to continue in the video. Here's how you can do that.

This technique assumes a standard branching experience where a viewer sees a choice screen, clicks on a specific "choice" annotation, watches the choice part of the video and then is automatically sent back or manually clicks back to the choice screen to select another choice.

  1. Start by adding a chapter annotation to the choice screen and the start of every choice segment of the video.
  2. At the start of the first choice segment add an On Time Annotation. Go to Link / Advanced / JavaScript. Enter choice_1_1 = true .
  3. At the start of each subsequent choice section add another On Time Annotation. Go to Link / Advanced / JavaScript. Enter similar variables: choice_1_2 = true for the second choice, choice_1_3 = true for the third choice, and so on.
  4. Add another On Time Annotation at the same start time as the choice annotations. Set the action that will happen once the viewer clicks all of the choices (for example "Jump to video time" to the closing section of the video. )
  5. Set the Display Rule for that to be for example choice_1_1 && choice_1_2 && choice_1_3. Make sure to include the variable for each of the choices. This annotation is the key. It stays hidden until the viewer has viewed each choice, then it displays, and the next time the viewer reaches the choice screen, the on time action triggers automatically.

Tracking Viewers and Triggering Actions

Works for: In-Video Branching

When creating a branching video in HapYak you may want to keep track of which or how many branches the viewer watches. 

You can use this information to trigger an action (for example: release a gate, display an annotation or not, etc...) based on some viewing pattern (i.e. watched at-least 3 branches, watched branch 2, etc...)

Let's take a simple branching video:

Intro
Branch Point
Branch 1
Branch Point (repeat)
Branch 2
Branch Point (repeat)
Branch 3
Branch Point (repeat)
Branch 4
Branch Point (repeat)
Ending

Track Viewing

To track viewing:

  1. Place an iframe annotation over Branch 1. 
  2. Set the annotation's start time to the first frame of that Branch. 
  3. Set it's duration so that it persists across the entire duration of the Branch. 
  4. Copy and paste Sample Code 1 (found below) into the Editor / HTML tab...
  5. Repeat steps 1-4 for each Branch.

Sample Code 1

<!doctype html>
<html>
  <head>
    <title>branchTracker_030316</title>
    <style type="text/css">
      html, body { margin: 0; padding: 0 }   </style>
  </head>
  <body>
    <!-- HTML code goes here -->

    <script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak-iframe.js"></script>
    <script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.netjs/hapyak.api.js"></script>
    <script type="text/javascript">
      (function () {
        hapyak.context.addEventListener('iframeshow', function (variables) {
          var videoCounter;
          var iframeGuid = window.location.pathname.split('/').pop().replace('.html','');

          if (hapyak.context.env.get(iframeGuid)) {
            return;
          } else {
            hapyak.context.env.set(iframeGuid, true, false, 'track');

            if (hapyak.context.env.get('videoCounter')) {
              videoCounter = hapyak.context.env.get('videoCounter');
            } else {
              videoCounter = 0;
            }

            videoCounter = videoCounter += 1;
            hapyak.context.env.set('videoCounter', videoCounter, false, 'track');
          }
        });
      }());
    </script>
  </body>
</html>

Trigger an Action

You can now trigger an action. For example, stop displaying an annotation after a user views a number of branches.

In this example this particular iframe annotation prevents the viewer from viewing the ending by jumping to a specified time (in this case 10 seconds, the beginning of the first branch point). Once two branches are viewed, this annotation will no longer be active.

  1. Add an iframe annotation.
  2. Set the Start Time to the beginning of the section you want to prevent the viewer from watching. In this case, the Ending.
  3. Copy and paste Sample Code 2 (found below) into the Editor / HTML tab.
  4. Set Display Rule to videoCounter != 2 
  5. Set the var jumpTo in Sample Code 2 to whichever time you like (in seconds).

Sample Code 2

<!doctype html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      html, body { margin: 0; padding: 0; background: yellow }
      background: yellow;
    </style>
    <script>
      var jumpTo = 10;
    </script>
  </head>
  <body>
    <!-- HTML code goes here -->

    <script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak-iframe.js"></script>
    <script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.netjs/hapyak.api.js"></script>
    <script type="text/javascript">
      (function () {
        hapyak.context.addEventListener('iframeshow', function (variables) {
          if (!hapyak.context.player.isEditMode) {
            hapyak.context.player.currentTime = jumpTo;
          }
        });
      }());
    </script>
  </body>
</html>
Did this answer your question?