Advanced users can further customize their HelpXplain infographics with custom JavaScript code. This can be inserted in the Custom Scripts section, accessed in Properties in the File menu.

This reference is for global methods

Note that this information is for scripts attached to your entire Xplain. See Object Scripts for details on scripts attached to individual objects in the Xplain.

How custom scripts are implemented

JavaScript code you enter in the Custom Scripts box is embedded in the HTML page for the HelpXplain infographic. This is placed in a position so that it is read after the main HelpXplain xplain object has already been initialized. This means that your scripts can depend on the xplain object being present and active.

Manipulating objects on the page

Since the script is read after everything on the page has been initialized you have full access to everything in the page DOM with document.getElementById and other similar JavaScript functions. To identify what you can manipulate, simply generate a your Xplain and look at the code in the generated pages.

URL switches to go to a specific slide

You can start your Xplain with a specific slide by adding its number to the end of the URL as the anchor fragment. Like this:

<path>/my_xplain.html#2
<path>/my_xplain.html#17

Note that the first slide is #0, not #1.

Events you can register to execute your animation functions

There are three events you can register to have your functions execute as callbacks at specific points in the animation sequence. They execute functions when slides change, providing the index number of the current slide as a parameter you can pass to your function.

The onnextslide event also accepts a return value, which will then be passed to the next slide. You can use this to conditionally execute a function if the normal slide order changes, for example when the user clicks on a slide or object with a click action that changes the slide order. See the code example below to see how this works.

You can use the onmoving and onmoved events for implementing your own custom animations.

The easiest way to understand these three events is to have a look at the simple demo scripts in the example project eventlistener-with-custom-script.xplain, which you can find in the examples installed with HelpXplain.

Examples:

1) When slide 6 is reached (index == 5), check whether an object is visible and stop autoplay if it is.

xplain.addEventListener('onmoved', function (index, count) {
  if (index==5) {       
    var myobj = document.getElementById('myobject');
    if (myobj.style.display=='none') {
      xplain.stop();
    }
  }
});

2) When slide 4 is reached (index == 3) animate an object. This routine moves three text objects 500 pixels up with an overall animation duration of 1 second. The text1 object is moved all the way up; the text2 object is moved to 50px from the top with 0.3s delay and the text3 object is moved to 100px from the top with 0.6s delay.

xplain.addEventListener('onmoved', function (index, count) {
  if (index==3) {       
    xplain.animateFromTo('#text1', 1, {top: 500}, {top: 0}, 0);
    xplain.animateFromTo('#text2', 1, {top: 500}, {top: 50}, 0.3);
    xplain.animateFromTo('#text3', 1, {top: 500}, {top: 100}, 0.6);
  }
});

HelpXplain methods that you can call

The xplain object exposes the following global methods that you can use in your own scripts. See Object Scripts for the scripts you can apply to individual objects.

Global methods for all animations in the current slide