search

jspsych / jsPsych

Create behavioral experiments in a browser using JavaScript
http://www.jspsych.org
MIT License
1.05k stars 679 forks source link

adding or updating the resize plugin for mobile devices #3395

Open WilliamNgiam opened 2 months ago

WilliamNgiam commented 2 months ago

Hi,

Firstly, thank you for your amazing work with jsPsych! I'm making more of a feature request – maybe with some time, I could try and contribute but it is currently not within my powers.

I'm working on building an experiment that works via browsers on mobile devices, and coming up against issues with how the stimulus is displayed in portrait and landscape mode. Unfortunately, it appears that portrait and landscape are treated differently on different phone systems (iOS and Android). I was hoping a fix would be to use the resize or browser-check plugins but the click-and-drag function (i.e. when matching the rectangle to the credit card) doesn't seem to work on mobile devices.

My idea is to add some sort of plugin that allows the user to simply click rather than drag to resize the rectangle (like they would in resize) to cover most of the screen. This could then maybe set CSS style for the jspsych-display-element or determine a scale-factor, allowing tasks to essentially scale to any mobile device screen regardless of their handheld orientation.

Sorry if this has been brought up elsewhere – I couldn't see to find any related issues on this. In the meantime, I'm happy on restyling the CSS/HTML of my stimulus to make it look okay on devices (hopefully!)

Kindly, William

DominiqueMakowski commented 2 months ago

In case that's helpful, we deal with that by querying the window dimensions at the beginning of each trial and adjusting the stimuli accordingly: https://github.com/RealityBending/FakeFace2/blob/24a66a561b546682a42239d4861fe6b54f4a8170/experiment/fiction.js#L162-L175

WilliamNgiam commented 2 months ago

Thank you @DominiqueMakowski, that is helpful! I'm using canvas-button-response for most of what I am doing – my stimuli has a few moving parts – but I had not thought to use the width and height parameters from browser-check to maybe adjust my canvas. One feature of iPhone devices is that I think the browser full-screen doesn't close or hide the top toolbar – so I'm not sure if the window parameters adjust for that. A thing to try and test in my next study!