Forum Discussion

MarianneSeid410's avatar
MarianneSeid410
Community Member
8 months ago

Exit a web object in Storyline 360?

Hello! What are some ways to get the user to exit from a web object in Storyline? We would like them to return to Storyline for course completion.

storyline 360
  • MarianneSeid410's avatar
    MarianneSeid410
    Community Member
    8 months ago

    Thanks, Phil, I didn't see the code in the video. I'd love to see how that would work.

  • Nedim's avatar
    Nedim
    Community Member
    8 months ago

    Phil is correct.

    In Rise:
    Create a button to signify the end of the course. I've entered 'next' as the button text, but feel free to use any text you prefer. We'll utilize its "aria-label" attribute later to distinguish this button in Storyline. For example, if you enter "NEXT", the "aria-label" will match this value. Publish to Web. Edit index.html located in your published folder and copy and paste the script bellow at the end of the body element: 



    <script>

          let player = parent.GetPlayer();
          function findRiseBtn() {
            let riseBtn = document.querySelector('[aria-label="next"]');
            if (riseBtn) {
                // If Rise btn is found, attach the event listener
                riseBtn.addEventListener('click', function() {
                    console.log('clicked');
                    player.SetVar('complete', true)
                });
            } else {
                // If Rise btn is not found, wait for a short period and then try again
                setTimeout(findRiseBtn, 100); // Retry after 100 milliseconds
            }
        }

          // Start searching for Rise btn
          findRiseBtn();
        </script>


    Note: This button won't be visible in Rise immediately upon launching the Rise course. Therefore, I've implemented functionality in JavaScript to continually search for it until it becomes visible. Once found and clicked, it will trigger a function to modify the variable value in Storyline.

     
    In Storyline:
    Create a T/F variable "complete" (or what ever you prefer, just make sure it matches the variable in the script above), and set it to "false". Insert a WebObject and choose the folder where the index.html of the published Rise course is located. Triggers in SL:



    You can customize triggers as necessary. For example, display a popup message when the learner closes the Rise course before reaching the last block with a button, while the "complete" variable is still set to "false", or something similar. Please find the attached .story file that I used for testing purposes.

Related Content