1. ここまでのコード
2. 複数の画面を設定する
3. 「Sequence」，「Loop」，「Frame 」の追加
4. ターゲット文字の設定
5. 教示と終了画面の追加
6. 反応の正否を結果ファイルに出力する
7. 反応の正否をフィードバックする

1. ここまでのコード

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

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

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

赤色の「A」（ターゲット）を検出するところまでのコードを以下に記します。

var soa = 100;  // 100ms 刺激の呈示時間
var t1pos_pre = [5,6,7,8,9]; // ターゲットの位置は６〜10番目（0から開始）
var t1pos = this.random.choice(t1pos_pre); // １つランダムに選ぶ
var num,moji,mojicolor;
// 元の配列
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 });
// ターゲットの代入
stim[t1pos]="A";

// 色を指定する配列
var stim_color = []; 
for(var i =0; i<20; i++){
	stim_color[i] = "black"; // 黒
}
// ターゲット色の代入
stim_color[t1pos] = "red"; // 赤

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

  // 以下を描き変えてください。-------------------------------

  // 呈示時間
  num = Math.floor(t/soa);
  moji = stim[num];
  mojicolor = stim_color[num];
  // 文字を描画
  yu_fillText(ctx,moji,mojicolor);
  // 画面を書き換える
  this.queueAnimationFrame();
  
}
// 以下に関数化-------------------------------
function yu_fillText(ctx,moji,mojicolor){
  // 文字の情報を指定
  ctx.fillStyle = mojicolor;
  ctx.font = "72px 'sans-serif'";
  ctx.textAlign="center";
  ctx.textBaseline="middle";

  // 文字を描画
  ctx.fillText(moji,0,0,400);
}

2. 複数の画面を設定する

RSVP画面の前後に「注視画面」，「ブランク画面」，「反応画面」を作成します。