Forum Discussion
storyline get user click position
Hi,
I want the user to click on any location on the screen and keep that location within a variable. In the next slide I want to place an object in this variable (the position the user clicked on).
Is it possible?
Thank you!
Hi, Robert.
Thank you for reaching out!
While not currently a feature in Storyline, we have a feature request logged to add the ability to recognize click position.
I will update this discussion if I have any news to share or if this request makes it to our feature roadmap.
At breakfast i quickly checked this last one on my mobile and did notice Touchevents were not registered...so it didnot work on Mobile devices.
Fixed that now.
https://360.articulate.com/review/content/a1280461-dbb1-44ee-b644-14a2cde6f8c3/review
Added a function in the code that checks for Touch or Clickevents and then uses the proper syntax to return the clicked position.clientX = getOffsetPosition(e,document.querySelector('body')).x;
clientY = getOffsetPosition(e,document.querySelector('body')).y;function getOffsetPosition(e, parent){let position = {x: (e.targetTouches) ? e.targetTouches[0].pageX : e.clientX,y: (e.targetTouches) ? e.targetTouches[0].pageY : e.clientY};while(parent.offsetParent){position.x -= parent.offsetLeft - parent.scrollLeft;position.y -= parent.offsetTop - parent.scrollTop;parent = parent.offsetParent;}return position;}Now it works nicely on both desktops and mobile devices.Here is the file...
Hi Yotam,
That sounds like some neat interactivity you're creating! I'm not sure if there's a way to track the location of a mouse click, but hopefully someone in the community can offer some tips!
I'm also looking for this feature. We need to display a text box (or highlight) wherever the user clicks, as a kind of annotation interaction like adding a comment in word.
Here's an interesting workaround that takes it somewhat in the right direction, but none of this will work unless Storyline can store the last cursor or click position and make it available as the value of a variable. Storyline - X and Y - Moving Objects Anywhere on Screen in Realtime - YouTube
Any change to storyline in the last few years that would make this easy? I know it's possible to use javascript to grab the cursor position or click position, but would rather not go that route if possible.You can get the x y position of any element in Storyline...so also the Mouse click.
Here is a sample i did for following the mouse position with Javascript.
Im quite sure the Storyline has code to make it possible to get the mouseclick position.
Kind regards,
Math
- Hi Maria,
Thanks for confirming that this is an existing feature request item!As you can see in this quick sample... its easy enough to get the x/y positon of a mouse click. https://360.articulate.com/review/content/aaebbf95-1e39-4b6f-a2a0-8210869cfc6e/review
Actually only that is needed is an eventlistener that captures the click and passes that to a Storyline variable. Like this...
document.querySelector('body').addEventListener('click', updateClick);
function updateClick(e){
player.SetVar("clickedX", e.clientX);
player.SetVar("clickedY", e.clientY);
}Ofcourse you can use any created element in Storyline for that instead of the body. Only thing you have to be aware of is the way SL works with the player. There is difference in the Classic Player vs the Modern Player...and as the Modern Player scales up or down content depending on viewport size you have to tackle that. Not that hard, but good to be aware of.
Here is my sample added.
Thanks, Math. I’d already looked over JS examples in HTML5, but your example puts it in Storyline context, which is helpful.
I'd still like to see this in native Storyline! JS is a bridge too far for most clients. :-)
Again, much appreciated!
Robert
