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