はじめに
前章では jsPsych について簡単に触れてみました。本章からはフランカー課題の作成を題材に jsPsych を用いた心理実験の作成に取り組みます。この章では，複数の文字刺激を素朴に系列提示できるようにします。
フランカー課題とは
フランカー課題は注意の選択や反応の競合が関わる課題です。この記事 にもう少し詳しい説明や図があります。刺激として今回は <<<<<, >>>>>, <<><<, >><>> の４つを使用します。真ん中の記号がターゲット刺激で，左右の残りの記号がフランカー刺激です。参加者はターゲット刺激が<ならfキー，>ならjキーを押すこととします。
チュートリアルを通して，このような課題が完成します。
刺激を一つ提示する
flanker.html というファイルを新しく作成し，前回の復習も兼ねて<<<<<を画面に表示するコードを書いてみてください（ほとんどコピペで大丈夫です）。
コード例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="../jspsych/dist/jspsych.js"></script>
<script src="../jspsych/dist/plugin-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../jspsych/dist/jspsych.css" />
</head>
<body></body>
<script>
const jsPsych = initJsPsych();
const trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<',
};
jsPsych.run([trial]);
</script>
</html>
特定のキー入力のみを受け付ける
さて，現状ではすべてのキー入力が許容されます。今回のフランカー課題ではfとjの２つだけが参加者の反応キーとして使用されるので，それらだけを受け付けるように試行変数の設定を変更します。具体的には以下のようにchoicesという項目を追加します。ついでにpost_trial_gapという設定も追加しています。この設定はキー入力とは関係ありませんが，のちのちのコードの動作確認をしやすくするために導入しています。
const trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<',
choices: ['f', 'j'], // f, jだけを受け付ける
post_trial_gap: 500, // 試行終了後，500ミリ秒の空白を設ける
};
choicesにはキーに対応する文字列を配列[]で指定します。今回のように 2 つ以上のキーを指定する際にはカンマ,で区切ります。
post_trial_gapは試行終了後の空白時間を制御しています。単位はミリ秒です。後の説明や演習で行った編集がわかりやすいように追記しました。前回のコードには書かれていませんでしたが，以降のわかりやすさために追加しておいてください。
演習 1
- 提示する刺激を変えてみよう
演習 1 のコード例
choicesで複数キーを許容するときと同様に，jsPsych.run([])に試行変数を複数指定する際にも変数名をカンマ,で区切ります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="../jspsych/dist/jspsych.js"></script>
<script src="../jspsych/dist/plugin-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../jspsych/dist/jspsych.css" />
</head>
<body></body>
<script>
const jsPsych = initJsPsych();
const trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '>>>>>', // ここを変更する
choices: ['f', 'j'],
post_trial_gap: 500,
};
jsPsych.run([trial]);
</script>
</html>
刺激の系列提示
jsPsych (ver. 7.0 以降) では， 最後の行に書かれている jsPsych.run() に入れる配列によって試行の実施順を制御することができます。
jsPsych.run([trial]); // []に並べられた順に試行を実行する
ここでは，[trial] が試行変数の配列で，ここに格納されている順に試行が実施されます。
配列（array）は，上の choices でも出てきましたが，文字や数値や変数を入れることのできる容器のようなものです。要素をカンマで区切って[]で括れば，配列を作ることができます[1]。choicesの時は文字列のみから構成される配列，jsPsych.run()には試行変数の配列が指定されています。
したがって，例えば同じ試行を繰り返す時は，
jsPsych.run([trial, trial]);
とすればよいわけです。
異なる刺激で複数試行実施する
上の節では，同じ刺激が複数回提示されるようにしました。今度は，異なる刺激が提示されるような試行系列を作成してみましょう。例えば，最初のコードを以下のように編集します。
const jsPsych = initJsPsych();
const trial1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<',
choices: ['f', 'j'],
post_trial_gap: 500,
};
const trial2 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '>>>>>',
choices: ['f', 'j'],
post_trial_gap: 500,
};
jsPsych.run([trial1, trial2]);
ここでは，trial1とtrial2という 2 つの試行変数を作成しています。それぞれの設定項目はほとんど同じですが，stimulusが異なっています。作成した 2 つの試行変数をjsPsych.run([])に入れています。
演習 2
- 4 つの刺激がそれぞれ 1 回ずつ提示されるようにしてみよう
- いろんな提示順序を試してみよう
演習 2 のコード例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="../jspsych/dist/jspsych.js"></script>
<script src="../jspsych/dist/plugin-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../jspsych/dist/jspsych.css" />
</head>
<body></body>
<script>
const jsPsych = initJsPsych();
const trial1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<',
choices: ['f', 'j'],
post_trial_gap: 500,
};
const trial2 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '>>>>>',
choices: ['f', 'j'],
post_trial_gap: 500,
};
const trial3 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<<><<',
choices: ['f', 'j'],
post_trial_gap: 500,
};
const trial4 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '>><>>',
choices: ['f', 'j'],
post_trial_gap: 500,
};
jsPsych.run([trial1, trial2, trial3, trial4]);
</script>
</html>
おわりに
本章では試行を複数実施する方法を解説しました。演習 2 では 4 種類のフランカー刺激を 1 回ずつ提示するというコードを書きました。しかし，4 つの変数の設定はstimulus以外共通なため，コードの冗長になってしまっています。また，この章のコードではそれぞれの刺激が常に同じ順序で・1 回だけ提示されるようになっています。実際のフランカー課題では，それぞれの刺激がランダムな順序で・複数回提示されるはずです。次章ではこれらの問題に対処します。
-
配列の中身は必ずしも 1 個以上である必要はありません。要素のない空配列を作ることもできます。 ↩︎