５．画像を提示
https://gyazo.com/cc7c2dd947c0445f20bfb356989a4863
画像を表示するコードです。キーボードが押されるまで表示されたままです。
まず，書かれている内容はともかくとして，コードの骨格を見ていきます。
fixation.htmlと同様の構造であることを確認してください。<html>，</html>，<head>，</head>，<body>，</body>，<script>~</script>があります。これは，前回のfixation.htmlと同じです。
まず，ヘッダーを見ていきます。
<title>ShowPicture</title> で，今回は画像を提示するコードなのでtitleをShowPictureという名前にでもします。
まず，jsPsychのライブラリーを読み込みます。
今回は画像を読み込むので，ヘッダーでjspsych-image-keyboard-response.jsを読み込みます。
ここで，jspsych-preload.jsも読み込んでおきます。
画像や音声，動画は読込に時間がかかるので，遅延を防ぐため，先に読み込むためのプラグインです。
最後に，jsPsychのスタイルシートを読み込みます。
次に<script>です。
var を使ってpreloadという名前の変数を定義します。
ここで， auto_preload: true としておくと，後で使う画像や動画を自動で先に読み込んでくれます。
画像を読み込むため，varを使ってtrialという名前の変数を定義します。
typeは，'image-keyboard-response'，
提示する画像は何でもよいのですが，今回は，既にインストール済みの画像，jspsych-6.3.1/examples/img/ribbon.jpgをstimulusに指定します。
これで，事前に画像ファイルが読み込まれ，timelineに従って計測が進行します。
code: ShowPicture.html
<!DOCTYPE html>
<html>
<head>
<title>ShowPicture</title>
<!-- jsPsychのライブラリーの読み込み -->
<script src="jspsych-6.3.1/jspsych.js"></script>
<!-- 画像の読み込み -->
<script src="jspsych-6.3.1/plugins/jspsych-image-keyboard-response.js"></script>
<!-- preload 画像や動画の読込に時間がかかるので先に読み込む。-->
<script src="jspsych-6.3.1/plugins/jspsych-preload.js"></script>
<!-- jsPsychのスタイルシート。実験画面の見た目を変えるためのもの。linkタグを使って挿入 -->
<link href="jspsych-6.3.1/css/jspsych.css" rel="stylesheet" type="text/css"></link>
</head>
<body></body>
<script>
var preload = {
type: 'preload',
auto_preload: true
}
var trial = {
type: 'image-keyboard-response',
stimulus: 'jspsych-6.3.1/examples/img/ribbon.jpg',
}
jsPsych.init({
});
</script>
</html>
それでは，ShowPicture.htmlをresearchesに保存後，ダブルクリックして実際に動かしてみましょう。
次は，音声を提示する方法を見ていきましょう。
https://gyazo.com/ad42b4e5fba2e91518e9cc11e5c8afe2
【目次】