Forum Discussion
Trouble with Hotspot and Scrolling Panel
Hello! Since Storyline doesn't have a scrolling panel trigger, I'm trying the objects intersect method to make sure users scroll down to the bottom of the page before proceeding.
I've tried both Object intersects and Object intersection ends triggers but both result in a blank slide when I preview them.
- Is there a bug with Object intersects trigger? I'm using the latest version
3.123.37616.0.
- Any other tricks I can try to make sure users scroll to the bottom of the page?
Thank you!
Please find the attached .story file. To keep this script reusable, I recommend naming the button or shape at the bottom of your scrolling panel "marker" each time you use it. To get the data-model-id for your object, select the object, right-click it, choose Copy Object ID icon, and paste the value between the double quotes in the script.
I also recommend creating a Storyline T/F variable (e.g., markerInView) and updating it within the script so it can be used as a condition in any Storyline trigger within this slide. Make sure the variable name in the script matches the name of the variable you created in the Storyline Variables panel.
If you don't want the script to enable the player Next button, simply comment out that line using // or remove it entirely. Do the same for line 2, where the Next button is referenced.
If you remove those lines, you'll need to create a Storyline trigger that changes the state of your Next button (either a custom button or the built-in player button) to Normal when the markerInView variable changes to true.
7 Replies
Here's a trick I've heard of for ensuring someone reaches the bottom of a scrolling panel:
At the bottom of the panel, insert a button with a trigger that enables the Next button.
In addition, I suggest giving that button a Visited state. Then, for the trigger that disables Next when the timeline starts on the slide, add a condition that the button's state ≠ (does not equal) Visited.
I'd also include a message at the top of the scrolling panel, or somewhere else on the slide, that tells the user they have to scroll all the way down and click a button there before they can advance.
*** Additional info added to this reply
The above method works when using a mouse. However, a user could just tab to the button at the bottom of the scroll panel.
The attached file provides a demo.
I’ve run into similar behavior when hotspots overlap or interact with a scrolling panel. Checking the layer order, hotspot states, and panel boundaries would be a good place to start. It may also help to test the interaction in Preview after temporarily simplifying the triggers to identify which element is causing the issue.
I think it would depend on how your triggers are setup. This isn't something I've solved for so I'm not sure how intersection triggers would help, but my first thought was what Judy offered to: design to make scrolling to the bottom required, whether a Next button, an I Agree acknowledgement, or even a link to some resource (whether they use/download it or not).
JudyNollet's solution will definitely work.
You could have Next activated by a JavaScript script that detects (e. g.) an invisible object at the bottom of the page becoming visible. That's presumably what the built-in intersection triggers are trying to do.
If any of the objects used with the intersection event trigger are not inside the scrolling panel, the trigger simply won't work. I'm sure this could be researched and adjusted with JavaScript to make it work, but if JavaScript is an option, there are better and more efficient solution.
The script I used is simple, easy to understand, and completely reusable, as long as the object at the bottom of the scrolling panel is properly referenced/targeted using its model ID. In my case, the code successfully enables the player's Next button when that object comes into view and can also change any Storyline variable to a different value if needed for something else later on.
Example:
At the bottom of the scrolling panel is a Learn More button (an invisible shape can be added instead). When at least 80% of this button becomes visible within the scrolling panel (the threshold is adjustable in the script), the Storyline variable "markerInView" is set to true and the player's Next button is enabled simultaneously within the same code.I can upload my Storyline file and the JavaScript herr for anyone who may be interested in using this solution in the future.
That said, if adding an extra click isn't a big deal for your project, I'd recommend Judy's solution. As always, it's an elegant approach, exactly what we've come to expect from JudyNollet.
This is cool. Could you please share your file?
Please find the attached .story file. To keep this script reusable, I recommend naming the button or shape at the bottom of your scrolling panel "marker" each time you use it. To get the data-model-id for your object, select the object, right-click it, choose Copy Object ID icon, and paste the value between the double quotes in the script.
I also recommend creating a Storyline T/F variable (e.g., markerInView) and updating it within the script so it can be used as a condition in any Storyline trigger within this slide. Make sure the variable name in the script matches the name of the variable you created in the Storyline Variables panel.
If you don't want the script to enable the player Next button, simply comment out that line using // or remove it entirely. Do the same for line 2, where the Next button is referenced.
If you remove those lines, you'll need to create a Storyline trigger that changes the state of your Next button (either a custom button or the built-in player button) to Normal when the markerInView variable changes to true.
