はじめに

psyJSアドカレ(https://adventar.org/calendars/6320)
11日目の記事です。

　認知実験では「刺激の感情を評定してください」みたいなことがあったり、なかったりします。そんなときのために既存のpluginを編集、追記してjsPsychでAffect Gridを実装しました。個人用で作ったのですが、もったいないのでplugin化して公開します(ゴリ押し感は否めませんが、動けばいいんです)。

誰かが使ってくれることを祈って使い方をまとめておきます。本プラグインはjsPsych6.3.0のもとで開発しました。ver7.0だと動きません。いつか機能の追加をしたり、最新jsPsychに対応させるかもしれません。

Affect Gridとはなんぞ

端的にいうと主観的な感情評定を行ってもらうためのツールです。感情の円環モデル(circumplex model)で有名なRussellらが開発しました(Russell, Weiss, & Mendelsohn, 1989)。

横軸に快-不快，縦軸に覚醒-睡眠の軸をとるグリッドで，1つのマスを選んでもらうような課題です。

以下がAffect Gridの例です。

実験によってラベルの名称を変えたり，サブラベル(Stress, Excitement, Depression, Relaxation)がなかったりしますが，基本的には快-不快の軸と覚醒-睡眠の軸から構成される9×9のグリッドです。グリッドの中央が平均的，中立的な感情状態を示します。

参加者には「Aの刺激はどのような感情状態か9×9のマスの中から1つ選んでください」というような教示が与えられます。教示をしっかりと行わないと参加者はよくわからないので，実際に使う場合は原著をよく確認してください。

表情刺激を用いた実験などでさくっとオンライン予備実験を行いたい場合に使うと良いかもしれません。

Affect Gridを使うための下準備

下準備というほどのことではないですが，githubからjspsych-affect-grid.jsをダウンロードし，ご自身のpluginディレクトリに置いておいてください。

html-keyboard-response.js といった公式のpluginと同様に読み込んでもらえれば使用できます。

実際に使ってみる

Affect Grid pluginを使用するのに小難しいことは不要です。

var affect_grid={
type: 'affect-grid'
};
timeline.push(affect_grid);

とすれば使えます。
先ほどのAffect Gridの例で示したものが提示されます。81個のマスの中から1つマウスクリックで選択します。

中央のマスをクリックすると
arousal: 5
pleasantness: 5
で出力されます。

左上のマスなら
arousal: 9
pleasantness: 1
と出力されます。

ラベルを変える

ラベルは簡単に編集することができます。日本語でも問題ありません。
custom_labelをtrueにして，label_nameにそれぞれ提示したいものを入力します。

var affect_grid={
    type: 'affect-grid',
    custom_label: true,
    label_name:{
          arousal: "覚醒",
          sleepiness: "睡眠", 
          pleasant: "快", 
          unpleasant: "不快", 
          stress: "緊張", 
          excitement: "興奮", 
          depression: "落ち込み", 
          relaxation: "リラックス"
          }
}

上記にすると以下のようになります。

サブラベルをつけない場合は

var affect_grid={
    type: 'affect-grid',
    custom_label: true,
    label_name:{
          arousal: "覚醒",
          sleepiness: "睡眠", 
          pleasant: "快", 
          unpleasant: "不快"
          }
}

とすると
こんな感じ

グリッドのサイズ調整

1つのマスの1辺をどれくらいのpixel数にするか指定することができます。デフォルトは50pxになっています。
単位を入力する必要はありません。

var affect_grid={
type: 'affect-grid',
grid_square_size: 20
};

などとすれば良いです。スマホ,PCでサイズを変更するなどをしても良いかもしれません。

グリッドの上に刺激を提示する

グリッドの上部に画像や文字を載せることができます。

var affect_grid={
type: 'affect-grid',
rated_stimulus: "<p>怒り</p>"
}

などです。その他のプラグインのときと同様です。
刺激とグリッドの間に距離をとりたい時はmarginで調節すれば良いです。

var affect_grid={
type: 'affect-grid',
rated_stimulus: "<div style = 'margin: 50px;'><img src='irasutoya.png'></div>"
}

終わりに

基本的な利用方法は以上です。主観的評価を行うので，Affect gridはオンライン実験と相性がいいと思います。サイズを調整すれば、スマートフォンやタブレットでも気軽に使えます。誰か使ってくれるのでしょうか。
以下で体験できます。

サンプルコードはこちら。

<!DOCTYPE html>
<html>

<head>
  <title>example</title>
  <script src="/js/jspsych.js"></script>
  <script src="/jspsych-affect-grid.js"></script>
  <script src="../demo/irasutoya.png"></script>
  <link rel="stylesheet" href="/css/jspsych.css">
</head>

<body>
</body>
<script>
  var affect_grid1 = {
    type: 'affect-grid'
  }

  var affect_grid2 = {
    type: 'affect-grid',
    custom_label: true,
    grid_square_size: 30,
    label_name: {
      arousal: "覚醒",
      sleepiness: "睡眠",
      pleasant: "快",
      unpleasant: "不快",
      stress: "緊張",
      excitement: "興奮",
      depression: "落ち込み",
      relaxation: "リラックス"
    }
  }

  var affect_grid3 = {
    type: 'affect-grid',
    custom_label: true,
    grid_square_size: 30,
    label_name: {
      arousal: "覚醒",
      sleepiness: "睡眠",
      pleasant: "快",
      unpleasant: "不快",
      stress: "緊張",
      excitement: "興奮",
      depression: "落ち込み",
      relaxation: "リラックス"
    },
    rated_stimulus: "<p style= 'color: red;'>激おこ</p>"
  }

  var affecr_grid4 = {
    type: 'affect-grid',
    custom_label: true,
    grid_square_size: 30,
    label_name: {
      arousal: "覚醒",
      sleepiness: "睡眠",
      pleasant: "快",
      unpleasant: "不快"
    },
    rated_stimulus: "<div style = 'text-align: center; margin: 100px;'><img src='irasutoya.png' width = 100px></div>"
  };

  jsPsych.init({
    timeline: [affect_grid1, affect_grid2, affect_grid3, affecr_grid4],
    on_finish: function () {
      jsPsych.data.displayData();
    }
  });
</script>

</html>

明日は国里先生の記事です！

引用文献

Russell, J. A., Weiss, A., & Mendelsohn, G. A. (1989). Affect grid: a single-item scale of pleasure and arousal. Journal of personality and social psychology, 57(3), 493.

jsPsychでプラグイン作ってみた(Affect Grid編)