Displaying text with keypress and then image with slider

[amunn]

I would like to have a trial that works in the following way:

Participants read some text on the screen, press a key to continue, at which point an image is displayed with a slider response. I would like the text to remain on the screen as well as the image.

Currently if I use HtmlKeyboardResponse and then ImageSliderResponse, the text displayed obviously disappears.

Is there any way to do this with existing plugins?

[ChristopheBossens]

I used the jsPsychHtmlSliderResponse to solve this, as it gives more flexibility on how to format your text/image:

    var trial = {
        type: jsPsychHtmlSliderResponse,
        stimulus: '<p>Hello world</p><img id="trial-image" src="https://www.jspsych.org/latest/img/jspsych-logo.jpg">',
        labels: ['happy', 'sad'],
        require_movement: true,
        on_load: function () {
            document.querySelector(".jspsych-html-slider-response-container").style.visibility = 'hidden';
            document.getElementById("trial-image").style.visibility = 'hidden';

            document.addEventListener('keydown', handleKeyEvent);
        },
        on_finish: function(){
            document.removeEventListener('keydown', handleKeyEvent);
        }
    };

    function handleKeyEvent(event) {
        if (event.key == 'k') {
            document.querySelector(".jspsych-html-slider-response-container").style.visibility = '';
            document.getElementById("trial-image").style.visibility = '';
        }
    }

The magic happens in the on_load function. It uses selectors to get the image and the container of the slider and sets the css visibility style to hidden. This will ensure that the content is not visible, but will still take up the space as if it were visible. This ensures that your content does not jump when you make the item visible again.

The second part adds an event listener. This is a function that gets executed when you press a key. In this function you can see that when the 'k' key is pressed it will reset the visibility field to an empty string, effectively making the stimulus and slider appear.

In the on_finish function I remove the event listener again so that it does not interfere with other parts of your experiment.

Hope this helps, and let me know if you have any further questions!