With this callback, you can check the value of an element before the user can continue to the next step.

You can also use Actions to Go to a Step, Go to a Topic or Deactivate the topic when an element is visible or not.

Implementing the callback

Using this callback requires jQuery. Developers can prepare a function that will be within the application source code. Here we have defined imSkipElement function, which can be called as my_callbacks.imSkipElement from within the Authoring tool.

window.my_callbacks = {
    imSkipElement: function(player, topic_id, step_id, custom_data) {
      var element = custom_data.element;
      var op = custom_data.op; // visible, hidden
      var step = parseInt(custom_data.step);
      if (jQuery(element).is(":visible") && op == 'visible') {
        player.goToStep(step);
      }
      else if (jQuery(element).is(":hidden") && op == 'hidden') {
        player.goToStep(step);
      }
    }
}

Using the function in the Authoring tool

In the Authoring tool, you can re-use the callback wherever necessary.

In the Authoring tool:

1. Within the Callbacks panel, add a callback my_callbacks.imSkipElement in On active section.
2. Click + under Custom data tab.
3. Provide names element, op, and step and values the selector of the element, visible or hidden, and the step number to jump to.
4. The example below will check if the selected element is visible. If it is, it will jump to the 6th step.

In case you want to skip a step if the element is there but not visible or element is not there at all, change the else if line to:

else if ((jQuery(element).is(":hidden") || jQuery(element).length == 0) && op == 'hidden') {

so the result will be:

window.my_callbacks = {
    imSkipElement: function(player, topic_id, step_id, custom_data) {
      var element = custom_data.element;
      var op = custom_data.op; // visible, hidden
      var step = parseInt(custom_data.step);
      if (jQuery(element).is(":visible") && op == 'visible') {
        player.goToStep(step);
      }
      else if ((jQuery(element).is(":hidden") || jQuery(element).length == 0) && op == 'hidden') {
        player.goToStep(step);
      }
    }
}