Responsive design? #792
-
|
Hi Josh and everyone, I'm designing an experiment with jsPsych and it's working great, thanks for developing this tool. I just have one quick question that I haven't been able to figure out yet: what's the best/easiest way to make the experiment adaptive so that users with smartphones or PCs can both participate and have a similar experience? Is this something that can be done within jsPsych or is it pure html+css? Kind regards, |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hi @fmlopezguzman! There's nothing in particular that you would do within jsPsych to make the experiment responsive. The display centers by default, so if you keep the content small enough to display on a mobile device you'll get the same experience on both platforms. If you want to adapt in some other way, like making elements larger on PCs, you could use |
Beta Was this translation helpful? Give feedback.
-
|
That seems about right to me. If you are building an experiment that you'll be running for a while, you might want to embed in React or Bootstrap or React-Bootstrap to make use of existing tools for sizing things nicely. That way, you are outsourcing a lot of the effort to standard libraries. But there is startup cost in learning to use those libraries, so if it's a shorter experiment or something you don't expect to encounter often, @jodeleeuw's solution should work well. You'll want to test it out, though. |
Beta Was this translation helpful? Give feedback.
Hi @fmlopezguzman!
There's nothing in particular that you would do within jsPsych to make the experiment responsive. The display centers by default, so if you keep the content small enough to display on a mobile device you'll get the same experience on both platforms. If you want to adapt in some other way, like making elements larger on PCs, you could use
@mediaqueries in the CSS.