How do I add interactions or interactivity to my page? Add links, actions, timed events, animations, hotspots, and image maps.

There are a number of ways to add interactivity to your pages in Claro. Actions can be added to pages (to occur when the page loads) or to elements/buttons (to occur upon a trigger such as clicking the mouse).

Some examples of interactivity are:

  • Clicking a text, shape, or media element to open a file, go to a website, or show/hide other elements on the page (such as shapes, text, and other media).
  • Clicking a part of an image to go to a website or show/hide other elements on the page (such as shapes, text, and other media).
  • Triggering elements to show or hide (with animation effects) after a timed interval, e.g. after 5 seconds.
  • Timing events to points in a media file, such as having pop-ups appear with extra text to explain portions of a video.
  • Hiding the Forward and/or Back buttons on the Player Controls until the learner clicks something on the page.
  • Clicking an element or an area of the page to move forward to the next page or back to the previous page or jump to any other page in the course.

Clicking is not the only trigger available! You can set events to trigger when clicked, when double-clicked, when right-clicked, when mouse rolls over, when mouse rolls off, or when a trigger element shows or hides, or when you submit the last answer to a test. You can also set timed events.

Types of Interactions in Claro

Use Hotspots to add interactivity over a number of elements on your page or on specific areas of text within a phrase. A hotspot is like a transparent element. See Add a hotspot for more information.

Use Actions (click the link to see a YouTube video on Actions) to add interactivity to your page when it loads or to an element on your page (e.g. a button, text element, shape, or media element). For more information, see Insert a buttonAdd an Action and Add Player Controls.

You can use Actions with questions to trigger an event when the learner submits the last question attempt. You can also set different interactions for different responses, such as displaying different images based on whether they answered the question correctly or incorrectly.

You can also use Actions to create Media Events and Interactions (click the link to see a YouTube video on Media Event Actions). Media can be timed to play, pause, toggle, or replay from the beginning after a specific time when the page loads. Other elements can be timed to show or hide (and other actions) at specific points when media plays. For more information, see Media Events and Interactions.

Use Links to add actions to elements to open a URL, File from the Library, or Link to another page in the course. See Link to URL, Link to File, and Link to Page for more information.

Use an Image Map to add interactivity to a part of an image. See Add an Image Map for more information.

Interactivity and Animation

  1. How do I add interactions or interactivity to my page? Add links, actions, timed events, animations, hotspots, and image maps.
  2. How do I insert a Hotspot to add interactions?
  3. How do I add an action to an element that when trigger will Show or Hide or Toggle other elements (mouse event interaction)?
  4. Insert or add a pre-built button to a page (and edit it)
  5. How do I add an Action to Animate elements?
  6. How do I add a Swap Content Action to an element?
  7. How do I add a Light Box Action to an element?
  8. How do I insert a Text Input box on a page that learners can enter text into?
  9. How do I add an Action for Player Controls (Course Player navigation buttons: e.g., Forward, Back, Audio, Transcript buttons)?
  10. Media event actions and interaction (sync or time events to audio and video)
  11. What are the Animate Effects I can apply to element interactions or page actions?
  12. Adding a Link to URL using a modal target does not work for some sites (produces empty box)
  13. How do I add a link or hyperlink to a URL website, email or ftp site?
  14. How do I add a drag and drop interaction to my content page?
  15. How do I create an image with interactive hotspots?
  16. How do I allow the user to print a course page?
  17. How do I edit or remove an Action from an element on my page?
  18. How do I edit, delete, or remove Hotspots (Image Map) from an element?
  19. How do I get audio to play when a Hotspot or Action is triggered?
  20. How do I hide all mouse event targets on the stage? Hide Targets feature
  21. How do I make "hidden" hotspots? How do I hide the pointer hand cursor on a button?
  22. How do I make a page link to another page? How do I make branching interactions?
  23. Page, Jump, and Endscreen Transitions for a course (and Default Effect)
  24. Add an Entrance Effect to elements on a page
  25. How to Disable and Enable the Menu Button
  26. How do I add, edit and remove Actions within text elements?
  27. How do I add, edit and remove Links within text elements?
  28. Can learners search a course for specific content?
  29. What data does the course player search against during a course search?
  30. How do I display variables in my course?
  31. How do I make form fields available as variables?
  32. How do I set a custom variable?
  33. What are some of the Variables available?

Feedback and Knowledge Base