Improve support for mobile devices

[becky-gilbert]

Summary

One of the primary reasons for supporting jsPsych experiments is to facilitate CHS experiments that run on mobile devices. Our lookit-jspsych plugins have some mobile-friendly features, like flexbox containers, but they need some more testing and improvements on mobile. Our survey plugins use SurveyJS, which should look ok on mobile out of the box - if not we can augment/override specific parts of their CSS.

To do

• Test all plugins on a standard set of devices/browsers (e.g. desktop chrome/firefox, iPad/iPhone safari, android chrome). Some of this can be done via a desktop browser's mobile emulator tools, but we'll need to test on actual devices as well.
• Adjust formatting as needed. This will probably include more flex CSS, and possibly some CSS media queries, to change the positioning of elements and the relative proportions of text and interactive elements (button, select, input, etc.).
• Check all plugins for response options that might not be mobile-friendly (e.g. free-text responses, keypress responses).
• Check all plugins for the use of any keyboard/mouse event listeners and implement touch event alternatives.