Cute.Guides: オンラインで心理学研究：jsPsychを使ってみよう: アンケートを作ってみる 2

プログラムの中身の設定

前半部分

この部分では基本的な変数の定義と1ページ目の設定を行います。scriptタグの中に以下のコードを書き写してください。コードが何を意味しているのか考えながら写してみましょう。

  <body></body>
  <script>
    var jsPsych = initJsPsych();

    var jouken = jsPsych.randomization.sampleWithReplacement([0,1],1);

    var scale = ["全くそう思わない", "そう思わない", "あまりそう思わない", "どちらともいえない", "少しそう思う", "そう思う", "強くそう思う"];

    var welcome = {
      type: jsPsychHtmlButtonResponse,
      stimulus: '<p>これはスポーツの好みに関するアンケートです。<br>'+
                '次のページの質問文を読み、もっともよく当てはまるものを選択してください。</p>',
      choices: ['アンケートに進む']
    };

5行目...条件のランダム割り当てのための変数joukenを定義しています（本当はconditionとしたいのですが，conditionはシステムの変数名として使われているらしく使えません）。jspsych.randomization.sampleWithReplacement()という関数は，リストから指定した個数をランダムで取り出す働きを持ちます。ここでは，[0, 1]の2つから1つを選ぶという動作をしてくれます。これを使って，参加者を野球条件（0），サッカー条件（1）のどちらかに割り当てます。ちなみに，条件が2つであれば，jspsych.randomization.sampleBernoulli()を使うこともできます（公式サイト）。同関数は，確率pで1を，確率1-pで0を返してくれます（ベルヌーイ試行）。
7行目...リッカート尺度のラベルを定義しています。
9行目...1ページ目をwelcomeという名前で定義しています。ここではhtml-button-responseというプラグインを使うので，type:はjsPsychHtmlButtonResponseとします。html-button-responseプラグインは，表示内容に対してボタン押しでの反応を求めるプラグインです（参考: 公式サイト）。今回は表示内容（stimulus）とボタンの表示（choices）のパラメーターを設定しています。

中盤部分

この部分では条件分岐を設定していきます。条件分岐にはif文を使います。先ほど設定したjoukenが0であればsports_trialという変数として野球のアンケートを定義し，1であればサッカーのアンケートを定義するようになっています。

    if (jouken == 0){
      var sports_trial = {
          type: jsPsychSurveyLikert,
          questions: [
            {prompt: "野球が大好きだ", name: 'S1', labels: scale, required: true},
            {prompt: "野球が無い人生などつまらないものだと思う", name: 'S2', labels: scale, required: true},
            {prompt: "野球をよく観戦する", name: 'S3', labels: scale, required: true}
          ],
          randomize_question_order: true,
          button_label: ['次へ']
      };
    }

    if (jouken == 1){
      var sports_trial = {
          type: jsPsychSurveyLikert,
          questions: [
            {prompt: "サッカーが大好きだ", name: 'S1', labels: scale, required: true},
            {prompt: "サッカーが無い人生などつまらないものだと思う", name: 'S2', labels: scale, required: true},
            {prompt: "サッカーをよく観戦する", name: 'S3', labels: scale, required: true}
          ],
          randomize_question_order: true,
          button_label: ['次へ']
      };
    }

2-11行目...野球条件のアンケートを設定しています。今回はsurvey-likertプラグインを使うので，typeはjsPsychSurveyLikertです。questionsでは3つの質問項目を入れています。randomize_question_orderはtrueとし，質問項目がランダムな順序で表示されるようにしています。また，button_labelは「次へ」とし，日本語のボタンが表示されるようにしています。
15-24行目...サッカー条件のアンケートを設定しています。質問項目の「野球」を「サッカー」とした以外は野球条件と変わりません。

後半部分

この部分では3ページ目の参加者への御礼ページを設定し，プログラムを実行するコードを書いています。

    var finish = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: '<p>これでアンケートは終わりです。<br>'+
                'ありがとうございました。</p>',
      choices: 'NO_KEYS'
    };

    jsPsych.run([welcome, sports_trial, finish]);

  </script>
</html>

1-6行目...finishという名前で回答の御礼ページを設定しています。このページではhtml-keyboard-responseというプラグインを使います。html-keyboard-responseプラグインは，表示されている内容（stimulus）に対してキー押しでの反応を求めるプラグインです（参考: 公式サイト）。今回は最後のページでここから先には進めないようにしたいので，受け付けるキー（choices）は無し（NO_KEYS）としています。
8行目...設定した3つのページ（welcome, sports_trial, finish）をこの順番で実行するように指示しています。

プログラムの実行

走らせてみよう

ここまでで実験プログラムは完成しました。
思っていたより簡単に書くことができたと思います。慣れればGUIよりもこちらの方が早いというのも実感が湧いたのではないでしょうか。

では，作成したtest.htmlをブラウザ（Google Chrome等）から開き，プログラムを実行してみましょう。
前のページで説明した通りに動いたでしょうか。リロードすると条件が割り当て直されるので，何度もリロードしてみて野球とサッカーのアンケートがどちらも表示されるかも確かめてみましょう。うまく動かなかった方は，以下のファイルと照らし合わせて，どこかおかしいところがないか調べてみましょう（txtファイルにしています）。

練習プログラム

実際の実験へ

実際に実験を実施する

練習問題でプログラムの作り方はなんとなく分かっていただいたと思います。
今回扱わなかったプラグインを使いたい場合は公式サイトやExampleフォルダ内のサンプルプログラムで挙動を確かめ，自分の実験に組み込んでいくと良いと思います。

実際にクラウドソーシングで実験を実施するためには，参加者が入力したデータをデータベースに保存するプログラムを組む作業が必要です。
これにはサーバーに関する専門的な知識が必要になるため，本ガイドでは扱いません。

そんなのできないよ...という方にお勧めなのはCognitionというプラットフォームです。
Cognitionでは，jsPsychのコードだけ用意すれば，web上での実験実施，データの保存までを行ってくれます。無料プランだと1タスクごとに60個のデータしか保存できない（2024年3月時点）などの制約はありますが，実験を試してみるくらいのことはできます。
他にも公式サイトでは様々なプラットフォームが紹介されています。

オンラインで心理学研究：jsPsychを使ってみよう: アンケートを作ってみる 2