2024年12月7日

jsPsychには、マウスの軌跡を記録するマウストラッキング（mouse-tracking）が搭載されています。このマウストラッキング機能と、隠されたコンテンツをマウスホバーで表示するCSSを書いて、要素をどれだけ確認したかを確認する実験プログラムを備忘録的に書いてみました。 「マウスをかざすとでテキストの表示する」のは、jsPsychの機能ではなく、HTMLとCSSで実装できます。 デモ デモはこちらから デモは上記のリンクから mouse-trackingプラグインを使う マウストラッキングを使うにあたり必要なのは、Initialization Parametersの"initJsPsych()"での設定と、Trial Parameters（該当ブロック内）の設定の2つです。 "initJsPsych()"での設定 initJsPsych内に、どれくらいの頻度でマウスイベントを記録するかを設定します。minimum_sample_timeが0の場合、すべてのイベントが記録されます。例えば、ms単位で調整可能で、10ms単位で記録したい場合は、10に設定します。 ざっと使ってみた感じ、0ms設定だと記録されるデータサイズが大きくなるので、Qualtricsなどを使用して実施する場合は注意が必要です。 Trial Parameters（該当ブロック内）の設定 実験のブロック内にも、extensionsを使ってmouse-trackingのプラグインを呼び出します。targetsには、トラックしたいオブジェクトのセレクタを入れます。ここでは、質問文が入っているボックスのtargetタグを指定しています（ただし、target内のボックス外のマウスの動きもトラックしてくれるようです）。 他にも、eventsパラメーターを使って、mousemoveやmouseup, mousedownなどどの動きを測定するかも指定できます。 トラッキングの履歴を表示する 実験ブロックと同じブロックを作成し、"on_load"に追記することで、マウスの軌跡を描画することもできます。JavaScriptを使ってinnerHTMLを使って追記していくという形式になっています。ほとんどサンプルコードをコピペでOKです。 divで入れ子構造を作成した場合は、"var html = "に入れ子の要素を入れておきましょう。 雑感 使うのにちょっとした理解は必要ですが、比較的かんたんにマウストラッキングの機能が実装できるのはありがたいですね。 CSSのhoverとうまく組み合わせることで、参加者の項目の注視時間を計測したり、選択行動の迷いを計測したりするのに良いかもしれません（注視時間を計測するならhoverが動作している時間をJavaScriptで直に計測するコードを書くほうが良いかもしれませんが）。 ただし、上でも書いたように、経過時間が長くなればなるほど、トラッキングの履歴データが増えるので、使用するサービスによってはデータがちゃんと保存されるか気をつけたほうが良さそうです。 コード全部 HTML及びJavaScript

jsPsychでマウスをかざすとテキストの表示する & マウスの軌跡をトラッキングをする