このページでは，配列とランダム関数を使って，複数の文字をランダムに配置する方法を学びます。文字「H」をターゲットとし，それ以外の文字を妨害刺激として表示します。

以下のチュートリアルが終了した状態から始めます。

8. 一部の文字を置き換えよう

1. 「H」を1つだけ呈示し，残りを「S」にする

前のページでは，3行×3列の9か所からランダムに5か所を選び，次の刺激を表示しました。

使用したコードは，次のとおりです。

const xloc = [-300, 0, 300];
const yloc = [-150, 0, 150];
const setSize = 5;

const positionList = [0, 1, 2, 3, 4, 5, 6, 7, 8];
const sampleList = this.random.shuffle(positionList);

for (let i = 0; i < setSize; i++) {
    let stimText;

    if (i == 0) {
        stimText = 'H';
    } else {
        stimText = 'S';
    }

    const position = sampleList[i];
    const xp = position % 3;
    const yp = Math.floor(position / 3);

    this.options.content.push({
        type: 'i-text',
        left: xloc[xp], top: yloc[yp], angle: 0,
        text: stimText, fill: 'black',
        fontSize: 48, fontFamily: 'sans-serif'
    });
}

実行すると，文字「H」が1つ，文字「S」が4つ表示されます。このプログラムでは，文字「H」をターゲット，文字「S」を妨害刺激として使用しています。

image.png

2. 文字をランダムに変える

次に，妨害刺激として「A」「C」「E」「F」「O」「P」「S」のいずれかを表示します。

ターゲットは，これまでと同じ文字「H」です。

2.1. 妨害刺激を配列にまとめる

表示する妨害刺激を，配列distractorsに格納します。

const distractors = ['A', 'C', 'E', 'F', 'O', 'P', 'S'];

配列の値は，次のように対応しています。