2021/09/24

本チュートリアルの記事の内容を修正等したものを https://zenn.dev/snishiyama/books/jspsych-tutorial でオンラインブックとしてまとめ直しました。最新のjsPsychにも対応していますので，ぜひリンク先の書籍をご覧ください。なお，本記事はjsPsych v6.2.x系まででの実験作成チュートリアルとしてそのまま残しておきます。

はじめに

本記事は，「jsPsych による心理学実験作成チュートリアル」の第 3 回の記事です。第 2 回では for 文を利用した刺激の系列提示の方法を紹介しました。今回は，刺激の提示位置の変更方法について解説します。詳細は右側の見出しリストをご覧ください。

このチュートリアルシリーズの目的・概要等が気になった方はこちらの全体のまとめをご一読ください。

刺激の提示位置を変更する

さて，さっそく素朴に刺激の提示位置を変更してみましょう。これまで提示する文字列を指定する際にstimulus: 'L' stimulus: 'hello, world'のように，提示したい文字列を指定してきました。そして，このために，html-keyboard-responseというプラグインを使用してきました。実はこのプラグイン名にもあるように，stimulus:にhtml の構文を記述することができます¹。htmlの構文で提示刺激の位置を調整します。

以下のコードをコピペして実行してみてください。

change_position.html

<!DOCTYPE html>
<html>
<head>
  <script src="../jspsych.js"></script>
  <script src="../plugins/jspsych-html-keyboard-response.js"></script>
  <link rel="stylesheet" href="../css/jspsych.css"></link>
</head>
<body></body>
<script>

  var trial_L = {
    type: 'html-keyboard-response',
    stimulus: '<div style="position: absolute; left: 40%; top: 50%">L</div>',
    trial_duration: 1000,
  }

  var trial_R = {
    type: 'html-keyboard-response',
    stimulus: '<div style="position: absolute; right: 40%; top: 50%">R</div>',
    trial_duration: 1000,
  }

  var trials = [trial_L, trial_R]
  trials = jsPsych.randomization.repeat(trials, 2);

  jsPsych.init({
    timeline: trials,
  });
</script>

</html>

いい感じに刺激を左右に提示することができたのではないでしょうか。この例では，<div style="position: absolute; left: 40%; top: 50%">文字</div>というように，スタイルを記述した<div>タグというもので提示したい文字列を挟んで位置を調整します。styleで指定している項目はそれぞれ，

position: absolute: 絶対位置を用いる。ここでの絶対位置とは，ブラウザの上下左右の端を0とした位置のこと。
left: 40%: 左から40%の位置（右端が100%）
top: 50%: 上から50%の位置（下端が100％）

となります。left, top以外にも，right, bottomも使用することができます。上の例でも，Rを提示する際にはright: 40%と指定しています。また，位置の単位には%以外にもピクセルpxを用いることができます。基本的には%でいいでしょう。

positionについては他にもstatic, relative, fixedと指定することができます。詳しい説明は，google先生に任せることにしますが，文字列の位置を変更する場合に限ってはabsoluteを使えばいいでしょう。

<div>タグについてもgoogle先生を参照してください。

styleを別で作っておく

位置の変更は<div>タグを使いつつ，style=...で指定すればよいことがわかりました。しかし，位置を指定したせいでstimulus:の部分がかなり読みにくくなってしまいました。例えば，どこが実際に提示したい刺激なのかパッとわかりにくいです。位置の指定のために，styleの部分に様々な設定項目が並んでいるのが読みにくさ一因のような気がします。なんとか位置に関する設定を<div>タグの外側に書くことができれば，もう少し読みやすくなりそうです。

HTMLでは，<div style="...">で指定していたstyleを，<head>タグの部分で，名前をつけて用意しておくことができます。具体的には，以下のようにします。

change_position.html

<!DOCTYPE html>
<html>
<head>
  <script src="../jspsych.js"></script>
  <script src="../plugins/jspsych-html-keyboard-response.js"></script>
  <link rel="stylesheet" href="../css/jspsych.css"></link>
  <style>
    .text_left {
      position: absolute;
      left: 40%;
      top: 50%;
    }
    .text_right {
      position: absolute;
      right: 40%;
      top: 50%;
    }
  </style>
</head>
<body></body>
<script>

  var trial_L = {
    type: 'html-keyboard-response',
    stimulus: '<div class="text_left">L</div>',
    trial_duration: 1000,
  }

  var trial_R = {
    type: 'html-keyboard-response',
    stimulus: '<div class="text_right">R</div>',
    trial_duration: 1000,
  }

  var trials = [trial_L, trial_R]
  trials = jsPsych.randomization.repeat(trials, 2);

  jsPsych.init({
    timeline: trials,
  });
</script>

</html>

ポイントは2点です。

<head>の中に<style>というタグを新しく用意して，その中に<div style=...>で指定していた内容を書き写し，text_leftやtext_rightという名前をつけています。
stimulusのもともと<div style="設定項目">だった部分を，<div class="スタイル名">として，その名前のstyleを読み込んでいます。

2で述べたように，事前に設定したスタイルをclass=スタイル名で読み込むように変更することで，stimulusの部分がかなり見やすくなりました。また，<style>タグ内でスタイルを作成する際には，;で改行して，設定項目を縦に並べることができるため，何をどのように設定しているのかについても見やすくなりました。

提示位置の確認

位置を変更することができましたが，私の拙いHTMLの知識ではこれで正しいの不安になるところです。もともとstimulus:に文字列だけ指定していたときには，jsPsychのおかげで画面中央に刺激が提示されるようになっていました。もし，先程の例での位置の指定方法に問題がないのであれば，stimulus:に文字だけ指定したときと上下の位置に違いはないはずです。trial_L, trial_Rのどちらか一方のstimulus:を文字列だけの指定に戻して，上下の位置が一致しているかどうかを確認してみましょう。コード例ではRの提示位置の指定をなくしています。

コード例

check_position.html

<!DOCTYPE html>
<html>
<head>
  <script src="../jspsych.js"></script>
  <script src="../plugins/jspsych-html-keyboard-response.js"></script>
  <link rel="stylesheet" href="../css/jspsych.css"></link>
  <style>
    .text_left {
      position: absolute;
      left: 40%;
      top: 50%;
    }
    .text_right {
      position: absolute;
      right: 40%;
      top: 50%;
    }
  </style>
</head>
<body></body>
<script>

  var trial_L = {
    type: 'html-keyboard-response',
    stimulus: '<div class="text_left">L</div>',
    trial_duration: 1000,
  }

  var trial_R = {
    type: 'html-keyboard-response',
    stimulus: 'R',
    trial_duration: 1000,
  }

  var trials = [trial_L, trial_R]
  trials = jsPsych.randomization.repeat(trials, 2);

  jsPsych.init({
    timeline: trials,
  });
</script>

</html>

実際に確認してみると，私の方法で位置を調整したLが明らかにRよりも低い位置に提示されていることがわかります。すべての刺激に対して同じ指定方法top: 50%を用いれば，刺激間で上下の提示位置に差はないため，実験結果に影響はないと思われますが，jsPsychの「中央」からずれているのはすこし気持ちが悪いです。これを修正する方法を考えていきましょう。

何の位置が調整されているのか

positionでの位置指定がどのよう行われているのかを理解するために，簡単な実験をしてみましょう。2つの刺激の内，一方の刺激は元の通りtop:50%で上から50%の位置に提示されるようにし，もう一方の刺激はbottom: 50%で下から50％の位置に提示されるようにしましょう。素朴にはどちらも同じ位置を指定しているように思われます。

コード例

change_position.html

<!DOCTYPE html>
<html>
<head>
  <script src="../jspsych.js"></script>
  <script src="../plugins/jspsych-html-keyboard-response.js"></script>
  <link rel="stylesheet" href="../css/jspsych.css"></link>
  <style>
    .text_left {
      position: absolute;
      left: 40%;
      top: 50%;
    }
    .text_right {
      position: absolute;
      right: 40%;
      bottom: 50%;
    }
  </style>
</head>
<body></body>
<script>

  var trial_L = {
    type: 'html-keyboard-response',
    stimulus: '<div class="text_left">L</div>',
    trial_duration: 1000,
  }

  var trial_R = {
    type: 'html-keyboard-response',
    stimulus: 'R',
    trial_duration: 1000,
  }

  var trials = [trial_L, trial_R]
  trials = jsPsych.randomization.repeat(trials, 2);

  jsPsych.init({
    timeline: trials,
  });
</script>

</html>

しかし，試してみると，異なる位置に刺激が提示されたと思います。なぜこのようなことが起こるのでしょうか。実は，topやbottomで提示刺激（HTMLの要素）のどの部分を上から・下から50%の位置に持ってきているのかが異なります。

topは提示刺激の上端が上から50%の位置に来るように調整します。
bottom は提示刺激の下端が下から50%の位置に来るように調整します。

フォントのサイズ分だけ刺激の上端と下端の位置は異なるため，結果的に刺激は異なった位置に提示されることになります。

この実験のおかげで，topで指定しているのは刺激の上端の位置であること，そのためtop: 50%と指定しても，刺激は，ウィンドウの縦方向のちょうど真ん中には提示されないということがわかりました。なんとなく，これがjsPsychの標準の処理と違った結果になる原因な気がしてきました。

そして，同じことがleft，rightで横方向の位置を指定したときにも当てはまります。leftは刺激の左端，rightは刺激の右端の位置を調整します。そのため，left: 50%と指定しても，刺激はウィンドウの横方向のちょうど真ん中には提示されませんし，left: 50%, right: 50%ではそれぞれ異なった位置に刺激が提示されます。

この問題を避けて，top: 50%・bottom: 50%（left: 50%・right: 50%）で刺激を縦（横）方向のちょうど真ん中に提示するには，刺激の中心が指定した位置に来るように調整すればよさそうです。

刺激の中心の位置を調整する

指定した位置に刺激の中心を持ってくる方法を考えていきましょう。例えば，これまでのようにtop: 50%, left: 40%とすると，刺激の左上端がブラウザの上端から50%, 左端から40%の位置に来ます。この位置に，刺激の中心を移動させたいのであれば，刺激の高さ（縦の長さ）の半分だけ上側に戻し，幅（横の長さ）の半分だけ左側に戻せばよいです。このページの「6. transform」にある図がわかりやすいです。

これを実現するためには，styleにtransform: translateY(-50%) translateX(-50%);を追加します。translateYは縦方向，translateXは横方向に対応しており，正の値を指定すると下（右）方向に移動し，負の値だと上（左）方向に移動します。

以下の例では，Lを画面左側に提示し，RはjsPsychの標準の処理で画面中央に提示するようにしています。実行して，LとRの縦方向の提示位置がどうなっているのかを確認してみてください。

change_position_transform.html

<!DOCTYPE html>
<html>
<head>
  <script src="../jspsych.js"></script>
  <script src="../plugins/jspsych-html-keyboard-response.js"></script>
  <link rel="stylesheet" href="../css/jspsych.css"></link>
  <style>
    .text_left {
      position: absolute;
      left: 40%;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
      -webkit-transform: translateY(-50%) translateX(-50%);
    }
    .text_right {
      position: absolute;
      right: 40%;
      top: 50%;
      transform: translateY(-50%) translateX(50%);
      -webkit-transform: translateY(-50%) translateX(50%);
    }
  </style>
</head>
<body></body>
<script>

  var trial_L = {
    type: 'html-keyboard-response',
    stimulus: '<div class="text_left">L</div>',
    trial_duration: 1000,
  }

  var trial_R = {
    type: 'html-keyboard-response',
    stimulus: 'R',
    trial_duration: 1000,
  }

  var trials = [trial_L, trial_R]
  trials = jsPsych.randomization.repeat(trials, 2);

  jsPsych.init({
    timeline: trials,
  });
</script>

</html>

どうでしょうか。LとRが同じ高さに表示されていたのではないでしょうか。text_leftのleftを50%に設定すると，LとRが全く同じ位置に提示されます。つまり，今回作成した位置の設定と，jsPsychが標準で処理してくれる位置の設定が同じであるということがわかります。ぜひ確認してみてください。

上の例では使用していませんが，text_rightを使うと，刺激の中心が画面の右側のちょうど40%の位置に提示されます。また，text_rightのtransformをtext_leftと見比べてみるとtranslateXの値の正負が異なっていますが，left:，right:で指定した位置に刺激の中心を持ってくるという点では，どちらもこれで問題ありません。それぞれのtranslateXの正負を反転させたりしていろいろ試してみてください。

おわりに

今回は，提示位置の変更方法を紹介しました。ウェブブラウザを使用するjsPsychでは，位置を変更するためにHTMLタグを触る必要があります。これが曲者で，個人的にはかなり苦戦しました。この記事でみなさんが自在に位置調整できるようになったことを願うばかりです。

次回は，LとRをランダムに左右に提示する方法を紹介します。これまでの例ではLとRの提示位置は固定されていて，Lは左，Rは右にしか提示されていませんでした。次回の内容で，ひとまず，サイモン課題が完成します。引き続きがんばりましょう！

【第4回】キー反応の取得・刺激のランダマイズ

というよりも，単に文字列を入れただけのときでも html として処理されています。 ↩