24．画像を提示（jspsych@8.0.2）
https://gyazo.com/cc7c2dd947c0445f20bfb356989a4863
画像を画面の中央に表示するコードです。キーボードが押されるまで表示されたままとします。
まず，書かれている内容はともかくとして，コードの骨格を見ていきます。
fixation.htmlと同様の構造であることを確認してください。<html>，</html>，<head>，</head>，<body>，</body>，<script>~</script>があります。これは，前回のfixation.htmlと同じです。
まず，ヘッダーを見ていきます。
<title>ShowPicture</title> で，今回は画像を提示するコードなのでtitleをShowPictureという名前にでもします。
まず，<script src="dist/jspsych.js"></script>でjsPsychのライブラリーを読み込みます。
次に，画像を読み込むため，<script src="dist/plugin-image-keyboard-response.js"></script>でプラグインを使用します。
これは，画像を提示してキーボードで反応を得るためのプラグインです。
ここで，plugin-preload.jsも読み込んでおきます。
画像や音声，動画は，容量が大きいので読込に時間がかかることがあります。このプラグインを使用することで，先にこれらのファイルを事前に読み込み，遅延を防ぐことができます。
最後に，jsPsychのスタイルシートを読み込みます。
次に<script>です。
var jsPsych = initJsPsychで，jsPsychの変数を定義します。
今回は，on_finish: function を使って，刺激終了後の処理を追加します。
この中に，jsPsych.data.displayData();を入れることで，刺激終了後，刺激の提示結果をブラウザに返します。
次にvar を使ってpreloadという名前の変数を定義します。計測に使用する画像（音声や動画も）を先に読み込むためのものです。type: jsPsychPreloadとします。
ここで， auto_preload: true としておくと，後で使う画像（音声や動画も）指定せずとも自動で読み込んでくれます。
次に画像を提示するため，varを使ってtrialという名前の変数を定義します。
typeは，jsPsychImageKeyboardResponse，
提示する画像は何でもよいのですが，今回は，既にインストール済みの画像，examples/img/ribbon.jpgをstimulusに指定します。
最後に，jsPsych.runにおいてpreload, trialの順番で変数を読み込みます。
code:ShowPicture.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShowPicture</title>
<script src="dist/jspsych.js"></script>
<script src="dist/plugin-image-keyboard-response.js"></script>
<script src="dist/plugin-preload.js"></script>
<link rel="stylesheet" href="dist/jspsych.css">
</head>
<body></body>
<script>
var jsPsych = initJsPsych({
on_finish: function () {
jsPsych.data.displayData();
}
});
var preload = {
type: jsPsychPreload,
auto_preload: true
};
var trial = {
type: jsPsychImageKeyboardResponse,
stimulus: 'examples/img/ribbon.jpg',
};
</script>
</html>
それでは，ShowPicture.htmlをresearchesに保存後，ダブルクリックして実際に動かしてみましょう。
次は，音声を提示する方法を見ていきましょう。
https://gyazo.com/ad42b4e5fba2e91518e9cc11e5c8afe2
【目次】