Scriptsの使い方について

Scriptsの準備

Contentに図形を描画するには

Textを表示してみよう

画像を表示してみよう

AOIを指定してみよう

完成版の「study.json」ファイル

1. Scriptsの使い方について

これまでのチュートリアルでは,出来るだけコードを書かないことを目標としてきましたが,視覚探索課題のように図形をランダムに配置する場合や,注視点から円形に図形を配置する場合には,コードを用いた方が便利です。

「lab.js」では「Scripts」のタブに切り替えることで,「Content」に描画する内容をコードで指定することが出来ます。また,ここで描いた図形の関数を制御するためには,「Javascript」の知識も必要です。サンプルプログラムで使われているコードは「ECMAScript2015(ECMAScript6 ES6)」という新しいJavascriptの書き方で書かれているため,最新のJavascriptの入門書を手元において読む必要があるかもしれません。

「Scripts」での図形の描画方法については,公式のドキュメントが整備されていないため,手探りで書いている部分がありますので,その点はご了承ください。

2. Scriptsの準備

「Builder」で文字を表示するには「Content」のタブに入力をしていきますが,「Canvas」のコードをそのまま入力するためには「Scripts」のタブに変えて入力していきます。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/88115cf7-49fe-4130-976d-1b5538f990a8/Untitled.png

「title」は「draw」に,その横の「event」は「before:prepare」に変更してください。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8b83ac5a-5cd5-46e9-a404-13c1f69c540c/Untitled.png

3. Contentに図形を描画するには

「Scripts」に以下の関数を描き,その中に描画に関するプロパティを追加することで「Content」に刺激を描画することが出来ます。

this.options.content.push({
  // この中に図形のプロパティ情報を追加していきます。

})