Creating a plugin that supports mouse-hover actions

[chenxuh2]

Hello,

I am wondering if it would be possible to create a plug-in that supports the below features:
A button or several buttons are originally shown as black boxes and some information on the button revels when the participant's mouse hovers over it.

I am hoping to be able to collect data on the mouse trajectory as well as the duration for the mouse hover.

I find this very challenging as I expect that this would require some interaction between JS code and html objects (i.e., the button). I would really appreciate a small example or some guidance on how to do it.

Thank you very much!

[conbainbridge]

Hello,

Yes, this should be doable by customizing a plugin! One way I would tackle this is:

• Start from the html-button-response plugin as a baseline
• Create a span tag around the text label of the buttons that sets style="visibility: hidden" and set it to have a unique ID (you could make use of the i variable in a for loop, as is used in the existing click eventListener, to iterate over each button uniquely)
• Create a mouseover eventListener to update the style visibility to "visible"
• If you want it to change back when not hovered, have another eventListener for mouseout

This resource may be of help as well: https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Hope this helps!

[jodeleeuw]

@chenxuh2 feel free to follow up here as you start working with this for additional help. happy to provide guidance.