Rotating images with jspsych

[DavidMagas]

Hi,

My question is whether there is a plugin or plugin parameter that can change the orientation of a
displayed image?

[ChristopheBossens]

I don't think this is a parameter that is natively supported by the plugin. In the past we had to do something similar and we used a quick and dirty approach by changing the code within the plugin itself that displays the image. For example, the jsPsychImageButtonResponse was used by setting the render_on_canvas property to false.

let trial = {
        type: jsPsychImageButtonResponse,
        stimulus: 'images/60cwfc.jpg',
        choices: ['Happy', 'Sad'],
        prompt: "<p>Is this person happy or sad?</p>",
        render_on_canvas: false
    };

Within the code of the plugin we adjusted line 208, by adding a style parameter with the desired rotation (using jsPsych 7.3). We also had to include additional margins because as a consequence of the rotation the image starts to overlap with content shown below.

html = '<img src="' + trial.stimulus + '" id="jspsych-image-button-response-stimulus" style="transform: rotate(45deg); margin-bottom: 150px;">';

If you want to control the rotation with a parameter in your trial definition, you can look at how the existing parameters are defined at the beginning of the class, and adjust one of these definitions to add the rotation parameter. Let me know if you need help with this.

Note that jsPsych has two ways of rendering the image: as an html img element or drawn on a canvas. Since adjusting the html img element code seemed more straightforward to us we used that approach, and that's why you need to set the render_on_canvas property to false.