Forum Discussion

GatikDev's avatar
GatikDev
Community Member
5 months ago

course navigation using web object and storyline

Hey everyone, I've recently put together a sample project in Storyline featuring four slides. On the final slide, there's a web object embedded, housing four buttons. The primary button, labeled "...
storyline 360
Nedim's avatar
Nedim
Community Member

What does your HTML code (Web Object) look like? Are you setting any Storyline variables to different values through HTML? You can try the following

In Storyline:
1. create a TF variable, set it to False (ex. isHomeClicked)
2. create a trigger Set "isHomeClicked" to value False when the timeline starts on this slide
3. create a trigger Jump to 'Slide 2' when "isHomeClicked" changes if "isHomeClicked" = value True

In HTML (Web Object):

<script>
  const player = window.parent.GetPlayer();
  document.getElementById('your_button_id').addEventListener('click', function() {
    // Change the value of Storyline variable to true
    player.SetVar('isHomeClicked', true)
  });
</script>

Publish to Review 360 to verify its functionality. It might encounter issues if published to the web and viewed directly due to the CORS mechanism. However, it should work smoothly if you run your story through a local development server (e.g., 127.0.0.1:8080). It will work when published to SCORM. Please refer to the attached video for a brief demonstration.
GatikDev's avatar
GatikDev
Community Member
5 months ago

Hi Nedim, Thanks alot for your guidance. It worked like a charm. I have applied the code and tested on lms and review link. Its working as expected. Have a great day and happy weekend.

Related Content