４．fixationを提示
https://gyazo.com/9f118b2a04a2833ec836dc48e1519db1
それでは，認知・心理計測で良く用いられるfixationマーク（固視点）を5秒間表示するコードを見ていきましょう。このページの下にあるfixation.htmlを参照してください。
まず，書かれている内容はともかくとして，コードの骨格，要素を見ていきます。
Hello World!.htmlと同様に，<html>，</html>，<head>，</head>，<body>，</body>があります。
</body>の後には，Hello World!.htmlのところではなかった<script>~</script>が追加されています。
jsPsychの基本は，以下の通りです。
１．ヘッダー（<head>~</head>）で使用するjsファイルを読み込む。
２．<body></body>は，使わない（body内には書き込まない）。
３．<script>~</script>の中に参加者に提示する文字や図形，写真，動画を表示する変数を定義する。
４．この変数を jsPsych.initのtimelineに順番に入れていく。
５． 実験終了後の処理を定義するためjsPsych.initの，on_finishの中に処理方法を定義する。
それでは，細かく見ていきましょう。ただ，それぞれがどの様に働いているかの説明は省きます。
１．ヘッダー（<head>~</head>）で使用するjsファイルを読み込む。
１の説明からです。ヘッダーでは， <title>fixation</title> で，titleをfixationという名前に定義します。
次に， <script src="jspsych-6.3.1/jspsych.js"></script> で，jsPsychのライブラリーを読み込みます。
次に，<script src="jspsych-6.3.1/plugins/jspsych-html-keyboard-response.js"></script>で，テキストを呈示するためのjsファイルを読み込みます。
読込の順番は，必ず，jsPsychのライブラリーを読み込んでから，テキストや画像を呈示するためのjsファイルを読み込みます。
最後に，<link href="jspsych-6.3.1/css/jspsych.css" rel="stylesheet" type="text/css"></link>で，jsPsychのスタイルシートを読み込みます。実験中のウェブページのスタイルを指定します。
code:fixation.html
<!DOCTYPE html>
<html>
<head>
<title>fixation</title>
<script src="jspsych-6.3.1/jspsych.js"></script>
<script src="jspsych-6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
<link href="jspsych-6.3.1/css/jspsych.css" rel="stylesheet" type="text/css"></link>
</head>
<body></body>
<script>
var fixation = {
type: 'html-keyboard-response',
stimulus: '<div style="font-size:60px"> + </div>',
choices: jsPsych.NO_KEYS,
trial_duration: 5000,
};
/* start the experiment */
jsPsych.init({
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>
３．<script>~</script>で参加者に提示する文字や図形，写真，動画を表示する変数を定義する。
次に3番目の説明，<script>~</script>です。
varは変数を定義し、ある値に初期化します。var fiaxationでfixationという名前の変数を定義します。その変数の内容を｛｝内で定義していきます。
typeは，使用するプラグインの種類を指定します。
今回は，便宜上，文字を提示してキーボードの反応をとるというプラグインを使いますので，'html-keyboard-response'を指定します。
stimulusは，提示するテキストを入力します。
fixationとして「＋」を提示します。そのまま'+'としても良いのですが，フォントサイズが小さいので，60ピクセルに指定します。<div>~</div>を使用して，先頭の<div>の中にstyle="font-size:60px"を入れて大きさを定義します。
choicesは，参加者に許可するキーボードの種類を指定します。指定したキーボード以外の反応は取りません（押しても反応しません）。今回は，jsPsych.NO_KEYSとして，どのキーも反応しない様にします，ちなみに，全キーの取得を許可する場合は，jsPsych.ALL_KEYSを使用します。
trial_durationは，指定した文字をどのくらいの長さで提示するのか，m秒単位で指定します（1秒=1000m秒）。今回は，5秒間提示したままにするので，「5000」とします。
最後に，jsPsych.initを使用して計測を開始します。今回は，4と5番目がjsPsych.initの中で処理されます。
４．この変数を timelineに順番に入れていく。
4番目の説明です。timelineは，刺激を提示する順番を指定します。今回は，fixationを提示するだけなので，timelineは，[fixation]のみを入れます。複数の場合は， [trial_1, trial_2, trial_3]の様に記述します。
５．実験終了後のデータ処理方法を定義する。
5番目の説明です。on_finishは，計測終了後の処理を指定します。今回は，jsPsych.data.displayDataを使って，ブラウザ上に計測で収集したデータ全てを表示します。
それでは，fixation.htmlをresearchesに保存後，ダブルクリックして実際に動かしてみましょう。
https://gyazo.com/ad42b4e5fba2e91518e9cc11e5c8afe2
【目次】