1. ここまでのコード
2. 「6番目」にアルファベットを呈示しよう
3. ターゲットの位置をランダムにする
4. ターゲットの色を変える

1. ここまでのコード

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

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

↑ before:prepare に変える点がとても重要です。

数字をランダムに呈示するコードをまずは作成してください。

var soa = 100;  // 100ms 刺激の呈示時間
var num;
// 元の配列
var stim_pre=["0","1","2","3","4","5","6","7","8","9","0","1","2","3","4","5","6","7","8","9"];
// ランダム化後の配列
var stim = this.random.constrainedShuffle(stim_pre,{ maxRepSeries: 1 });

this.options.renderFunction = (t, canvas, ctx, obj) => {
  // このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
  // t: timestamp この関数が呼び出された時刻
  // canvas: canvasオブジェクトへのレファレンス
  // ctx: 描画するコンテンツの情報（一番重要）
  // obj: 現在描画されているcanvasへの参照

  // 以下を描き変えてください。-------------------------------
  // 文字の情報を指定
  ctx.fillStyle = "black";
  ctx.font = "72px 'sans-serif'";
  ctx.textAlign="center";
  ctx.textBaseline="middle";

  // 呈示時間
  num = Math.floor(t/soa)
  // 文字を描画
  ctx.fillText(stim[num],0,0,400);
  // 画面を書き換える
  this.queueAnimationFrame();
  
}

このコードで，10個の数字がランダムな順番で2回呈示されるプログラムが完成しました。

2. 「6番目」にアルファベットを呈示しよう

次は，「6番目」にアルファベットの「A」を呈示するように修正します。

「t1pos」という新たな変数を作成し，「6」を代入します。

var t1pos = 5; // ターゲットの位置は６番目（0から開始）