実験作成 | kscscr

jsPsych ver8を、Qualtricsに埋め込んで、実験を実施する方法です。Qualtricsの新しいアンケート回答エクスペリエンスにも対応しています。Codexと議論をしながら、新しく作成してみました。 以前、執筆した「jsPsychで作成した実験をQualtricsに埋め込んでWebで実行する方法・Rによるデータ読み込み」は、jsPsych ver6でしか動作しませんでしたが、今回はjsPsych ver8でも動作するようにしています。 基本的な実装方法は、jsPsych ver6時代と同じです。変更点はQualtricsに実装するJavaScriptコード部分になります。 【要注意】jsPsychをQualtricsの「新しいアンケート回答エクスペリエンス」で使う際の注意点：埋め込みデータの扱いやサイズに注意 上の記事で紹介している注意点にも気をつけてください。 （同じ）必要なモノ・全体の流れ jsPsychのHTMLファイルを編集・分割 サーバーにアップロード Qualtrics上の設定 大きく分けてやらなければならないことは上記の3つ。まずjsPsychのファイルを抽出し分割します。ここで必ず作成しなければならないのが「main.js」ファイルと呼ばれる実験のコアとなる部分。これと画像などをサーバーにアップロードし、jsPsychのプラグインやCSSをQualtricsで呼び出すための設定を行えば完成。 （同じ）実験プログラムをQualtrics様に編集する main.jsの作成 RMarkdownで作成しknitした、「experiment.html」というファイルが作成されている状態からスタートします。 VSCodeなどお好みのエディタで、新規に「main.js」というファイルを作成します。main.jsにjsPsychのJavascriptの部分、上記がexperiment.htmlファイルだとすると、「！ここから！」から「！ここまで！」に相当する部分をコピペします。 （同じ）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の準備：jsPsych ver8用 適宜自分のサーバーリンクやプラグインに置き換えて使用してください。自分で修正すべきポイントとしては、サーバーのリンク、プラグインのリンク、ignoreやfilterColumnsで保存するデータ列の選択です。 Qualtricsの新しいアンケート回答エクスペリエンスには、20KB制限があります。以下のコードでは、一つの埋め込みデータに収まるようにignoreやfilterColumnsでデータサイズを小さくしています。データサイズを一切小さくしたくない場合は、分割して保存することもできます。 新規ファイルとして「qualtrics.js」というファイルを作成し、task_githubの部分は適宜、自分がファイルを置くリンクの場所に変更してください。これは後でQualtrics上にコピペします。 変更点としては、jsPsych.init() を initJsPsych() + jsPsych.run() に変更したり、main.js の読み込みタイミングを変更したり、変更を加えています。 また、適宜コメントアウトを参照し、新アンケート回答エクスペリエンスか、旧アンケート回答エクスペリエンスかによって、データ保存部分は修正してください。 （変更）Qualtrics.jsの準備：jsPsych ver6用 適宜自分のサーバーリンクやプラグインに置き換えて使用してください。自分で修正すべきポイントとしては、サーバーのリンク、プラグインのリンク、ignoreやfilterColumnsで保存するデータ列の選択です。 Qualtricsの新しいアンケート回答エクスペリエンスには、20KB制限があります。以下のコードでは、一つの埋め込みデータに収まるようにignoreやfilterColumnsでデータサイズを小さくしています。データサイズを一切小さくしたくない場合は、分割して保存することもできます。 （変更）Qualtrics上での設定 新しい質問を作成し、質問タイプを「テキスト/グラフィック」にします。テキストを編集画面に切り替え、リッチコンテンツエディターからhtmlの編集モードに切り替えます。 そしてそこに上記の内容をペースト。一番上のリンクは自分のものに合わせて改変しましょう。 ※また、Qualtricsの仕様として、"link href~~~"から始まるcss読み込みのコードは、再度編集画面を開くと削除される仕様になっています。jsPsych.cssの中身を丸ごとコピペして、"/* ↓jsPsych.cssの中身を以下に貼り付ける↓ */"の下に貼り付けておいてください。 後は、横にある歯車アイコンをクリックし、「javascriptを追加」を選択、 中身をすべて消しqualtrics.jsで記述した内容をコピペすればOK。 アンケートフローの設定 アンケートフローをクリックし、IATのブロックの下に「埋め込みデータ」を追加します。「新しいフィールド名を定義するか、ドロップダウンから選択」に「datajs」と入力し保存します。 これでQualtrics上でIATを実行できるようになります。 GitHubに置く場合 自前のレンタルサーバーではなく、GitHubにおいて実行する場合、該当レポジトリのSetting→Option→GitHub Pageの部分を上記のように設定しておかないと、設定したリンクにファイルをおいても実行されないので注意が必要です。 ちなみにこの記事で紹介していたmain.jsなどの「https://自サーバー」の部分は「https://ユーザー名.github.io/レポジトリ名/」に変更する必要があります。

jsPsych（ver6/ver8対応版）で作成した実験をQualtricsに埋め込んでWebで実行する方法：新しいアンケート回答エクスペリエンスにも対応