１３．画像を提示（jspsych@7.0.0）
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>
<head>
<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="packages/jspsych/css/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
【目次】