Move the document.querySelector() to the latest version

[WenckeG]

Hi everyone!

I am currently programming an online experiment where participants are supposed to click on alternating response buttons. There is also a background image and the response should be placed at the bottom of this image. This is what I am currently working on, I tried this method:

timeline.push({
                type: jsPsychImageButtonResponse,
                stimulus: all_images_random[i],
                stimulus_width: 150,
                stimulus_height: 150,
                prompt: "<p>Is this object edible?</p>",
                choices: buttons.map(button => '<img src="' + button + '" width="100" height="100">'), // just the URL of my image
                on_load: function () {
                setTimeout(function () {
                    var buttonContainer = document.querySelector('.jspsych-html-button-response-button-container');
                    if (buttonContainer) {
                        buttonContainer.style.position = 'absolute';
                        buttonContainer.style.bottom = '60px'; // Adjust the bottom position (e.g., 10px)
                        buttonContainer.style.left = '50%';
                        buttonContainer.style.transform = 'translateX(-50%)';
                    }
                }, 100);
            },
               
    });

Making any changes in the buttonContainer.style.bottom line does not change their positions. This leads me to the guess that document.querySelector('.jspsych-html-button-response-button-container') is not understood correctly and may come from an older version. It also might be possible that I'm wrong and the issue is somewhere else...

I've started programming with jsPsych a couple days ago and cannot find anything on this topic, so I'm very thankful about any kind of help!

Thanks in advance,
Wencke

[jodeleeuw]

Hi @WenckeG,

Here's a screenshot of the elements in the demo task for the plugin using the Chrome developer tools:

It looks like the container element could be selected with document.querySelector("#jspsych-html-button-response-btngroup").

[WenckeG]

Thank you!