このページでは，配列とif文を使って，複数の文字「S」の中に，文字「H」を1つ配置する方法を学びます。

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

7. 文字をランダムな位置に並べてみよう

1. ランダムな位置に5つの文字を描く

前のページでは，次のコードを使って，3行×3列の9か所からランダムに5か所を選び，文字「H」を描画しました。

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++) {
    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: 'H', fill: 'black',
        fontSize: 48, fontFamily: 'sans-serif'
    });
}

実行すると，3行×3列のランダムな位置に，5つの文字「H」が表示されます。

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

次に，5つの刺激のうち，1つだけを文字「H」とし，残りの4つを文字「S」に変更します。

2.1. 表示する文字を指定する

今回は，for文の1回目に文字「H」を描画し，2回目から5回目までは文字「S」を描画します。

表示する文字を保存するため，次の変数を使用します。

• stimText：表示する文字

次に，5つの刺激のうち，1つだけを「H」他を「S」に変更します。

let stimText;

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

iの値は0から始まるため，i == 0はfor文の1回目を表します。

2.2. 表示する文字を描画に反映する

textプロパティにstimTextを指定します。