Please enable JavaScript to view this site.

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:


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.


Fires when a slide is about to begin moving – before the beginning of an animation.

Code example:

xplain.addEventListener('onmoving', function (index, count) {
 alert('onmoving event - we are about to move to slide: '+ (index+1) + ' of ' + count);


Fires when the transition between two slides is complete – when the new slide has been reached.

Code example:

xplain.addEventListener('onmoved', function (index, count) {
 alert('onmoved event, new slide has been reached: '+ (index+1) + ' of ' + count);


Fires when the next slide has been chosen (similar to onmoving) but also accepts a return value, which will be passed to the following slide.

Code example:

xplain.addEventListener('onnextslide', function (index) {
 alert('onnextslide event, our next slide will be: '+ (index+1));
  if (index == 2) {
    alert('But in this case, we will not move to slide #3, but go back to the first slide');
    return 0;


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 ('none') {

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


Interrupts the current play animation. Has the same effect as the user clicking on the Stop control. This takes no parameters.

Starts or restarts the play animation. Has the same effect as the user clicking on the Play control.

slide: Number

The number of the slide you want to go to. Optional. If you use it it will go to the specified slide and start playing from there. If you leave it out this method will simply start or restart playing at the current slide.


Go to a specific slide with or without animation. This only goes to the slide. It does not activate play. If you want to go to a slide and activate play at the same time use (see above).

slide: Number

The number of the slide you want to go to. Required.

animation: Boolean

Enable or disable animation. Required. Just type true or false if you are not using a variable.


Go to the next or previous slide with animation. Takes no parameters.


Returns TRUE if the current play animation is running, and FALSE if not. This function relates to the commands xplain.start() and xplain.stop() and takes no parameters.


Returns TRUE if audio is currently on (not muted), and FALSE if audio is muted.


Returns the play duration of the current slide in seconds.

xplain.enableaudio(enable:Boolean, volume:Number)

Enables or disables audio and changes the audio volume.

enable: Boolean

This parameter is required. True unmutes (enables) audio, false mutes audio.

volume: Number

This parameter is optional. It changes the volume between 0 and 1 in decimal steps. A value of 0.5 sets the volume to 50% of current user audio volume.


Enable or disable loop playing in the current Xplain.

enable: Boolean

Enter true to enable, false to disable