course navigation using web object and storyline

Apr 25, 2024

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 "Home," needs to redirect users back to slide 2 within the Storyline presentation. As for the other buttons, they're designed to display their corresponding content within the web object. I'd appreciate any suggestions on how to make this navigation setup work seamlessly. Thanks in advance for your insights!

4 Replies
Gatik Dev

Hi Phil, Thank you for the reply. I am newbie to articualte products. tried some codes given in the community like below. unfortunately its not working. 
https://community.articulate.com/discussions/building-better-courses/linking-from-twine-web-object-to-next-slide-in-course

Any further guidance will be helpful. Thank you 

Nedim Ramic

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.