画像を提示 jsPsych 8.3.0

画像を表示してキー反応を記録。スクリプトを順に読み、実行例で動きを確かめましょう。

jsPsych 8.3.0 · image

画像を提示

画像を表示し、キー入力を記録

実験で提示するサンプル画像 — **画像を提示**
何かキーを押すと次に進みます。

image-keyboard-response を使います。画像のパスを stimulus に指定します。preload を先に実行して画像を読み込んでおくと、提示時の読み込み待ちを減らせます。

auto_preload: true を jsPsychPreload に設定すると、timeline にある画像を自動で探してまとめて読み込めます。手動で images: [...] を書く方法も使えますが、この例では分かりやすさのために明示的に画像パスを指定しています。

サンプルでは付属の ribbon.jpg を使用します。別の画像に替えるときは、ファイルを配置し、preload と stimulus の両方のパスを変更してください。

ブラウザで試す ↗ HTMLを保存

このスクリプトの読み方

ヘッダーでの読み込み
plugin-preload.js / plugin-image-keyboard-response.js

画像を事前に読み込む機能と、画像を表示してキー反応を記録する機能を読み込みます。
初期化
const jsPsych = initJsPsych({ on_finish: () => { jsPsych.data.displayData(); } })

実験を開始する前に jsPsych を初期化します。on_finish は実験全体が終わったときに実行される処理で、ここでは jsPsych.data.displayData() を呼び出して、保存された反応データを画面に表示しています。実験終了時の確認や保存処理を入れる場所として使います。
画像の準備
const preload = {type: jsPsychPreload, images: [...] }

本試行より前に画像を読み込みます。準備画面と提示画面で同じ画像パスを指定します。auto_preload: true を入れると、timeline の画像を自動で見つけて読み込むこともできます。
画像提示
type: jsPsychImageKeyboardResponse / stimulus: 'media/ribbon.jpg'

ribbon.jpgを表示します。HTMLファイルとmediaフォルダは同じ階層に置きます。
画面の案内
prompt: '<p>何かキーを押すと次に進みます。</p>'

画像の下に操作説明を表示します。choices と trial_duration を指定していないので、標準設定ではキー入力を待ちます。
実行順
jsPsych.run([preload, imageTrial])

画像の読み込みが終わってから提示する順番です。終了後は on_finish により反応データを表示します。

サンプルコードを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>画像提示 | jsPsych 8.3.0</title>
    <script src="dist/jspsych.js"></script>
    <script src="dist/plugin-preload.js"></script>
    <script src="dist/plugin-image-keyboard-response.js"></script>
    <link rel="stylesheet" href="dist/jspsych.css">
</head>
<body></body>
<script>
    const jsPsych = initJsPsych({
        on_finish: () => {
            jsPsych.data.displayData();
        }
    });

    const preload = {
        type: jsPsychPreload,
        images: ['media/ribbon.jpg'],
        // auto_preload: true
    };

    const imageTrial = {
        type: jsPsychImageKeyboardResponse,
        stimulus: 'media/ribbon.jpg',
        prompt: '<p>何かキーを押すと次に進みます。</p>'
    };

    jsPsych.run([preload, imageTrial]);
</script>

</html>

教材の目次に戻る ↑