Image appearing intermittently as a video is playing? For an experiential sampling setup

[revatis2]

Hi!

I'm really grateful for the jspsych community. I have coded 5 experiments so far, without a hitch. Great work!
I am coding a new experiential sampling experiment where participants watch a video and as they are watching it, a probe appears which indicates they have to make a keyboard response. The probe appears randomly in the middle of the screen. Maybe overlapping on the video. I am not sure how to go about such a simultaneous presentation of stimuli. Any help is appreciated!

I also wanted to know if there was a way to record continuous responses (apart from setting up consecutive trials). I wanted participants to keep a key pressed when doing X and change keys when doing Y.

Thanks!

[becky-gilbert]

Hi @revatis2! Sorry for the delay getting back to you. A colleague of mine has a custom plugin that does this, though it's fairly complicated and might be overkill for what you need. In this version, the images are placed on either the left or right side of the page, or bilaterally, and when the image appears, the participant has to make a keyboard response indicating whether it is left/right/bilateral. You could make some changes to this plugin so that it always presents a single image in the middle of the screen while the video is playing, and so that there's only one key press option.

I'm not sure what you mean about your second question. You want to record the duration of the key press? That's definitely possible but you'll need to modify the plugin. See this Discussion post for more info: #805

[Cluster-Bomb]

Hi there,

Is there any chance I could get a copy of that custom plugin? I'm trying to put a line above and below a video stimulus - and vary the line position up and down.

Cheers

[becky-gilbert]

Yes! So sorry that I forgot about this, and thanks for following up. I've attached the plugin that adds images on top of a video at specific positions and for specific durations. I've also included an HTML file so that you can see how the trials/parameters are set up.

Cam_Trip_keyboard_discrimination.zip

As I said I think this plugin is probably overkill. But hopefully you'll be able to see the general method and pull out the relevant bits of code. Our general approach was to set up and play the video, and set up a series of setTimeout calls that show and remove the images at specific times. To present an image over the video, we created an image element (stimulus1 = document.createElement("img");), then gave it a bunch of attributes and CSS (including some absolute positioning), and then appended the image element to the display (display_element.querySelector("#unilateral-stimuli-id").append(stimulus1);). To remove the image after a specific duration, we set up another timer that removed it with display_element.querySelector("#" + stimulus1.id).remove();.

Part of what makes this plugin code confusing is that we have different types of images (targets and non-targets, presented on the left, right or both sides), and these have different correct responses. And we needed to allow and score responses after the image was removed. So if that stuff isn't relevant for you, you can try to ignore it in the code.

I hope this helps! Let us know if you have trouble with your implementation, and we'll do what we can to help.