jsPsychで直前のトライアル（画面）での反応に基づいて何かする方法 #JavaScript

jsPsych (de Leeuw, 2015)は、心理学のオンライン実験を行うときに便利なJavaScriptライブラリです。詳しい使用方法は、@snishymさんのjsPsychによる心理学実験作成チュートリアルまとめをご覧ください。すばらしくまとまっています。

この記事では、実験中の反応に基づいて何かをする方法について解説します。例として、ある画像に対して反応したあとに、その反応時間を参加者にフィードバックすることを考えてみます。

jsPsychのexamplesフォルダにはたくさんのサンプルプログラムが入っていますが、この中のjspsych-image-keyboard-responseを変更してみましょう。このファイルを別名で（同じ場所に）保存します。そして次のオブジェクトを作成してください。

var feedback = {
  type: 'html-keyboard-response',
  stimulus: 'Hello, World!',
  choices: ['space'],
  on_start: function(trial) {
    var all_data = jsPsych.data.get().values();
    console.log(all_data);
  }
}

feedbackは、html-keyboard-responseプラグインを使っているので、冒頭で次のようにしてプラグインを読み込む必要があります。

<script src="../plugins/jspsych-html-keyboard-response.js"></script>

最後に、jsPsych.initの中にあるtimelineを次のように変更します。trial_3をfeedbackと入れ替えています。

timeline: [trial_1, trial_2, feedback],

以上の変更を終えたらサンプルプログラムを動かしますが、ここではコンソールの表示を確認したいので次の手順を行ってくうださい。

Chromeでは，表示　→　開発/管理　→ デベロッパーツール
Firefoxでは，ツール　→　ウェブ開発　→　開発ツールを表示
Safariでは，開発　→　JavaScriptコンソールを表示
Edgeでは，F12キーを押す

プログラムを実行すると、2枚の画像が順番に表示されて、最後に Hello, World! と表示されるはずです。

さらにコンソールでは次のような表示が確認できるはずです。

2試行分の反応時間（rt）や刺激として表示されたファイルの名前（stimulus）が確認できますね。これは、

var all_data = jsPsych.data.get().values();
console.log(all_data);

の結果です。つまり、jsPsych.data.get().values();によって、それまでのすべての結果を得ることができるわけです。all_data[0] とすれば最初に提示された画像に対する結果を、all_data[1] とすれば2番目に提示された画像に対する結果を参照することが可能です。

ではここで、Hello, World! と表示する代わりに、2番目の画像に対する反応時間を画面に表示することを考えてみましょう。

上記のコンソール画面を見ていただくと分かりやすいですが、2番目の画像に対する反応時間は、all_data[1].rtで参照することが可能です。

そして、on_start (event) 関数を使うことで stimulus (Hello, World!) を上書きすることが可能です。ぜひ公式サイトの説明もご覧ください。trialオブジェクトがその試行の刺激や受け付けるキー情報などを持っています。

ということで、on_startを以下のように変更すると、Hello, World! ではなく、2番目の画像に対する反応時間が表示されるようになります。

  on_start: function(trial) {
    var all_data = jsPsych.data.get().values();
    console.log(all_data);
    trial.stimulus = all_data[1].rt;
  }

ちなみに、以下のように書いても挙動は同じです。ただ汎用性が高い書き方は上のほうだと思います（すべての試行のデータにアクセスできるため）。

  on_start: function(trial) {
    var last_trial_data = jsPsych.data.getLastTrialData().values();
    trial.stimulus = last_trial_data[0].rt;
  }

なお、基本的に上に書いたことと同じものですが、こちらの公式フォーラムでのやりとりも参考になると思います。