jsPsych

jsPsychで作成した実験を、Qualtricsに埋め込んで実行する方法の紹介です。既に小林さんが「jsPsychの実験をQualtricsに貼り込む」という記事を作成されており、殆どはそちらと同じです。そちらを自分なりにまとめ直した半分備忘録です。 こちらだけでも完結しますが、以下の記事に依拠する部分が多いので、下記サイトのアクセスアップに貢献してから、こちらを御覧ください。 独自のポイントとしては、GitHubではなく「自サーバー（レンタルサーバー）でも動作する」の確認を行った点と「Rによるデータ読み込み方法」の2点。 必要なモノ・全体の流れ jsPsychのHTMLファイルを編集・分割 サーバーにアップロード Qualtrics上の設定 大きく分けてやらなければならないことは上記の3つ。まずjsPsychのファイルを抽出し分割します。ここで必ず作成しなければならないのが「main.js」ファイルと呼ばれる実験のコアとなる部分。これと画像などをサーバーにアップロードし、jsPsychのプラグインやCSSをQualtricsで呼び出すための設定を行えば完成。 既にRMarkdownなどでjsPsychのHTMLファイルの作成が終了しているものとして話を進めます。 実験プログラムをQualtrics様に編集する main.jsの作成 RMarkdownで作成しknitした、「experiment.html」というファイルが作成されている状態からスタートします。 VSCodeなどお好みのエディタで、新規に「main.js」というファイルを作成します。main.jsにjsPsychのJavascriptの部分、上記がexperiment.htmlファイルだとすると、「！ここから！」から「！ここまで！」に相当する部分をコピペします。「&lt;script type="text/javascript"&gt;」タグのうち、「jsPsych.init」を除く部分まで全てになります。 main.jsの画像のパスを変更 次に、main.js内の画像のパスを変更します。main.js内に画像のファイルを置いたURLを変数名として保存。一番上に上の一行を追加しましょう。自サーバーに保存する場合とGitHubにアップする場合でそれぞれ上のリンクは改変してください。 main.js内にある画像を、さっき設定した変数名を含む形へ、つまり画像のリンクを の様に設定しなおしましょう。 experiment_updated.htmlの作成 experiment.htmlを複製し、「experiment_updated.html」というファイルを作成します。experiment_updated.htmlから、先程main.jsでコピーした部分を削除します。上の記述をそのファイルのjsPsychを読み込んでいる部分に追加します。 ここでローカルでexperiment_updated.htmlをダブルクリックして問題なく実験を行うことができればOK。これはあくまでmain.jsが動作するかどうかを確認するためのファイル。データが保存されているかどうかは気にしなくて大丈夫です。 jsPsychの実験をサーバーに置く ここまで来たらサーバーにファイルを設置します。main.jsとjsPsych本体、画像をFTPクライアントなどを使ってアップロードします。アクセスできれば自分が運営しているWordPressをインストールしているサーバーにサブドメインなどを作ってそこにおいてしまうのもいいでしょう。 Qualtrics.jsの準備 新規ファイルとして「qualtrics.js」というファイルを作成し、task_githubの部分は適宜、自分がファイルを置くリンクの場所に変更してください。これは後でQualtrics上にコピペします。 内容については上のサイトで詳しく紹介されています。 Qualtrics上での設定 新しい質問を作成し、質問タイプを「テキスト/グラフィック」にします。テキストを編集画面に切り替え、リッチコンテンツエディターからhtmlの編集モードに切り替えます。 そしてそこに上記の内容をペースト。一番上のリンクは自分のものに合わせて改変しましょう。 後は、横にある歯車アイコンをクリックし、「javascriptを追加」を選択、 中身をすべて消しqualtrics.jsで記述した内容をコピペすればOK。 アンケートフローの設定 アンケートフローをクリックし、IATのブロックの下に「埋め込みデータ」を追加します。「新しいフィールド名を定義するか、ドロップダウンから選択」に「datajs」と入力し保存します。 これでQualtrics上でIATを実行できるようになります。 GitHubに置く場合 自前のレンタルサーバーではなく、GitHubにおいて実行する場合、該当レポジトリのSetting→Option→GitHub Pageの部分を上記のように設定しておかないと、設定したリンクにファイルをおいても実行されないので注意が必要です。 ちなみにこの記事で紹介していたmain.jsなどの「https://自サーバー」の部分は「https://ユーザー名.github.io/レポジトリ名/」に変更する必要があります。 Rでデータを分析する Qualtricsに保存されたデータでは基本的に、csvのファイルの一つのセルの中に参加者のjsPsychのデータすべてが保存されます。そのため普通にcsvファイルを読み込んでも操作出来ません。 そのため、参加者一人ずつ、csvの中のdatajsのセルをテキストファイルに抽出し、jsonliteパッケージを用いて読み込み、R上で全参加者を結合するという手順を踏む必要があります。

jsPsych

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

jsPsychで「参加者の名前」を刺激として利用した潜在連合テスト（Implicit Association Test）を実装する

jsPsychで作成した実験をQualtricsに埋め込んでWebで実行する方法・Rによるデータ読み込み