jsPsych は、何もせずとも、一応スマートフォンで動きます。ただし文字のサイズが非常に小さく、使いづらいです。そのため、スマートフォンで動かすためのCSSファイルを作成しました。GitHubからダウンロードできます！
ですが、あまりこだわりがなければ、ヘッダーに次の１文を加えるだけで十分です。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
でもこれだけだと、文字サイズをもう少し大きくしたいというような要望を満たせないので、CSSファイルを作成しました。上記のGitHubから、smartphone.css をダウンロードして、jspsych.cssと同様に読み込んでください。
<link rel="stylesheet" href="jspsych.css"></link>
<link rel="stylesheet" href="smartphone.css"></link>
smartphone.cssは、必要に応じて、みなさんが自由に書き換えることができます。
jspsych-survey-likert-sample1.html
こちらのファイルは、本家が公開している examples/jspsych-survey-likert.html を少し変更したものになります。先述の viewportの行を加えるだけでもOKなのですが、scale_width: 500 が大きすぎてスクリーンをはみ出します。smartphone.cssを適用させるといい感じで収まります。!importantを指定してスケールの幅を調整しているため、スマートフォンではscale_widthの指定が無効になります。幅を調整したいときは、smartphone.cssを直接編集してください。
jspsych-survey-likert-sample2.html
こちらのファイルでは、questionsのpromptで指定した文字のサイズを大きくする方法を紹介しています。少々面倒なのですが、 → <span class="prompt1">を使うのがポイントです。prompt1の詳細については、smartphone.cssの中で明記しています。!importantを指定することでこの問題を回避できました！
注意点
- スマートフォンかどうかの判別は、画面の幅が480ピクセルより小さいかどうかで行っています。ピクセル数は、smartphone.cssで直接編集可能です
- CSSファイルはキーボード入力を可能にするわけではありません
-
survey-likertプラグインの
scale_widthや、html-slider-responseプラグインのslider_widthは、スマートフォンでは無効になります。変更したいときは、smartphone.cssを直接編集してください - スマートフォンのブラウザで、画面を下に引っ張るとページが更新される Pull-to-Refresh は、大部分の実験で弊害になると思うので無効にしています。有効にしたいときは、
overscroll-behavior: none;を削除してください - 現時点でのCSSファイルは、動作確認が不十分なので、実際に使われるときはいろんな端末での表示をご確認ください
参考資料
- jsPsychのCSSについて、TODAさんが丁寧に解説しています。
- 私は使ったことがないのですが、oyamaさんがsurvey関係の便利そうなプラグインを紹介しています。