How to incorporate visual feedback in code using the video-keyboard-response plugin

[mlmleung]

Hi!

I am working on an experiment where participants will be asked to provide multiple keyboard responses during video stimuli. I adapted the video-keyboard-response plugin to record multiple user responses during a single stimulus, but am wondering if it would be possible to have some sort of visual indicator/feedback that a user response has been recorded (e.g. have an image of a blue circle on the screen below the video that would switch briefly to an image of an orange circle when the user enters a keyboard response). I am open to any sort of visual indicator--changing the background color or having a border around the video stimulus appear and then disappear, etc. [Using v6.3.0]

Below is part of the main code that references the video-keyboard-response plugin.

var trial_1 = {
    type: 'video-keyboard-response',
    stimulus: [movies[0]],
    prompt: "<p>Please press the space bar when a change in event occurs.</p>",
    width: 600,
    height: 600,
    autoplay: true,
    choices: jsPsych.ALL_KEYS,
    response_allowed_while_playing: true,
    response_ends_trial: false,
    trial_ends_after_video: true,
  }

For reference, I followed the suggestions in this discussion -- #1302 -- to adapt the video-keyboard-response plugin to record multiple responses during a single stimulus.

My first thought was to do something with the fact that after a valid response, the stimulus has the CSS class 'responded'. I was thinking that I might have to add some modifications to var after_response in the plugin, but I am not entirely sure.

Does anyone have any thoughts? Thanks!!