Developers / How to: Mimic click on an element

How to: Mimic click on an element

To automatically click on an element on behalf of the user:

  1. In the Authoring tool, scroll down to the Actions panel and expand the tab. Now, you see the Actions panel.

  1. Click + Click

  1. Assign element. Click the assign element button and hover over your application to select the desired element. The Authoring Tool will choose the most specific combination of CSS selectors, and the default option is usually the best. However, to manually set the selector, click Expert to edit.
  2. Save changes.

If you still want to use this callback instead, follow the instructions below.

Implementing the callback

Developers can prepare a function that will be within the application source code. Here we have defined imClickMimic function, which can be called my_callbacks.imClickMimic from within the Authoring tool.

window.my_callbacks = {
    imClickMimic: function(player_id, topic_id, step_id, custom_data) {
      console.log("Step #" + step_id + " from topic " + topic_id + " was activated.");
      document.querySelector(custom_data.element).click();
    }
}

Using the function in the Authoring tool

In the Authoring Tool, you can re-use the callback wherever necessary and pass the parameter element.

In the Authoring tool:

  1. Within the Callbacks panel, add a callback my_callbacks.imClickMimic in On before activating section.
  2. Click + under Custom data tab.
  3. Provide name element and value the selector of the element.

  1. This will result in On activate callback being called when the step has been started, and it will pass the custom data to the function itself, making it very flexible and reusable.