目的

単純再認1(刺激のcsvインポート) はCanvasコンポーネントを使って単純再認課題を作成しましたが,HTML Pageコンポーネントを使っても作成してみます。画面への描画速度が重要でない場合には,HTML Pageコンポーネントを使った方が後々の拡張性は高いと思うので,記憶実験の場合はこちらがよいかもしれません。ただし,HTMLを書かないといけないので難易度はやや高くなります。なお,刺激セットのランダム割り当ては省略しますので,単純再認4(刺激セットのランダム割り当て追加) を参照してください。

lab.js Builderでの作成

実験の構成

構成は単純再認1(刺激のcsvインポート) と同様に学習段階,妨害課題,再認テスト段階とします。以下のようなコンポーネントを組み合わせることにします。

学習段階

では,まず,学習段階を作成します。サイドペインの「+」をクリックし,Page(HTML)を選んでください。続いて,「Page」という初期名を「item」に変更しましょう。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fda88281-1041-4b44-98bb-b468e2d68a73/_2021-04-19_15.18.07.png

続いて,Contentに文字を配置しますが,最初に表示されているText/Instructionsは削除します(右側のゴミ箱をクリック)。消したら,Content内のグレーの「+」をクリックして,「Raw HTML」を選んでください。「Raw HTML」はHTMLを直接記述するという書き方です。ここに以下のようなHTMLを書いてください。ボタン表示を消す(「Show submit button」を「Hide submit button」に変更する)のもお願いします。

<div class = "content-horizontal-center content-vertical-center">
  ${this.parameters.item}
</div>

classについての細かい解説はボックスをご覧ください。ここでは,itemというパラメータに格納された値(${this.parameters.item})を画面中央に表示するという記述になっています。後ほどLoopを作成し,Loopのparametersを読み込んで,呈示する単語を変化させるため,現時点ではitemパラメータの値は設定されていません。そのため,動かしても何も画面には表示されません。

<aside> 💡 lab.jsには画面配置のためのclassセレクタがいくつか用意してありますが,よく使うものは以下の4つです。space-betweenとspace-aroundは要素ごとなので,<span></span>などで均等に並べたい要素を分ける必要があります。

content-horizontal-center:水平方向に中央揃え content-vertical-center:垂直方向に中央揃え content-horizontal-space-between:中央方向に左右の余白も含めて均等配置 content-horizontal-space-around:中央方向に均等配置

</aside>

次に,単語を1秒呈示するため,「Behavior」を選び,「Timeout」に「1000」と入力してください。ついで,注視点とブランクもそれぞれHTMLで作成しましょう。注意点は単語と同様にHTML Pageコンポーネントを追加し,${this.parameters.item}の代わりに「+」と書いてください。注視点,単語,ブランクを1つにまとめるため,Sequenceを追加します。Sequenceは「learningTrial」に名前を変更しておきます。その中にfixation, word, blankを入れてください。以下のような構造です。

次に単語を切り替え表示するために,Loopコンポーネントを追加し,その下に「learningTrial」をネストさせます。名前は「learningPhase」としましょう。そして,「learningPhase」のContentに学習刺激をパラメータとして設定していきます。今回は学習刺激として「リンゴ」,「バッタ」を入れてください。

ここまでで以下の画像のようになります。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/597b3d33-bf8f-45fb-b5f3-0e1d32b3d7e3/_2021-04-19_15.43.35.png

Powered by Fruition