Problem with image source for image-button-response

[annaprovorova]

Hello!

I am creating an experiment in which the participant is shown an image and needs to click on all the notes on the image, and we will record the mousebuttondown event coordinates. However, I am having problems with loading the image. In order for the parameters targets to be saved in jsPsychExtensionMouseTracking, I need to insert the stimulus as an HTML element - an image. However, I am unable to do this - the image source is not being recognized.

the image-button-response trial as appearing inside the timeline:

for (var make_trial = 0; make_trial < 150; make_trial++){

  var test = { 
    type: jsPsychImageButtonResponse,
    choices: [img_order[make_trial]],
    stimulus: `<img id="target" src="${img_order[make_trial]}">`,
    button_html: '<button class="jspsych-btn" >Готово!</button>',
    extensions: [
      {type: jsPsychExtensionMouseTracking, params: {targets: ['#target'], events: ['mousedown']}},
    ],
    data: {
      task: 'response',
      image_opt: img_order[make_trial]
    }
  }

When I save the result, stimulus is like this:
"stimulus": "<img id="target" src="img/short_slow/1/1.png">", and the image doesn't show.
Please help me solve this problem.

[Shaobin-Jiang]

If you would care to read the documentation, you would see that the stimulus property of the image-button-response plugin is the path of the image file to be displayed instead of an entire img element.

[annaprovorova]

Thank you for answer!
But what would be target for Mouse Tracking in that case?

[Shaobin-Jiang]

Try #jspsych-image-button-response-stimulus

[annaprovorova]

Great! It worked!
Thank you so much!