Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding or updating the resize plugin for mobile devices #3395

Open
WilliamNgiam opened this issue Sep 6, 2024 · 2 comments
Open

adding or updating the resize plugin for mobile devices #3395

WilliamNgiam opened this issue Sep 6, 2024 · 2 comments

Comments

@WilliamNgiam
Copy link

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
Copy link

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
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants