前のパートに戻る 完了して次のパートへ  

  3-2 入力文字の判定

キー入力が判別できたら、1文字目、2文字目..と「タイプした文字が一致するか」を判定する必要があります。

現在は「abc」と表示されているので、1文字目は「a」、2文字目は「b」、3文字目は「c」が正解の文字となります。

このロジックを実装していきます。

HTMLを確認します。

1文字ずつ <p> タグに入れています。

idをchar-{n}というように連番にしているところがポイントです。

jQueryでは、$("#id名")で指定したID属性を持つ要素を選択できるので、以下のように文字を取得できるようになります。

参考) #id名(ID属性)


1文字 → $('#char-1').text(); = 「a」

2文字 → $('#char-2').text(); = 「b」

3文字 → $('#char-3').text(); = 「c」


はじめは「#char-1」から取得して、正解だったら +1 をして、#char-2 #char-3と次の文字を取得していけばよいでしょう。

以下のようにchar-{n}の{n}にあたる部分を変数 char_index として宣言します。 (1を初期値とする)

*var、let、constでは違いがありますので、下記リンクを参考にして理解しておきましょう。

【参考】 var,let,constの違いは、ブロックスコープと巻き上げ

現在位置の文字を $('#char-'+char_index); というように呼び出せます。

target という変数に入れておきます。 (後ほどクラスの変更をしたり利用します)

text() で文字を取得できるので、 入力キーである e.key と比較しましょう。

【参考】textメソッド


▼ソースコード全体

ここまで書いて、「a」を入力した時に「正解!」とアラートが出たらOKです。

(一度表示結果部分をクリックしてから)

文字を判定できたら、①文字の色を変える、②次の文字を判定、をしたいですね。

①文字の色を変える → "correct"クラスを付与する

addClass('クラス名') でクラスを追加できます。 また、removeClass('クラス名') で該当クラスを削除できます。

if (e.key === char) の後に、以下の処理を追記しましょう。

【参考】addClass('class名')

【参考】removeClass('class名')

②次の文字の判定 → 現在の文字位置に +1 をする

char_indexに+1を加えればOKなので、 char_index++とすれば完了です。

【参考】インクリメント演算子(加算子)「++」

以下のようになります。

▼ソースコード全体

ここまで書いて、「a」を入力した後に「a」の色が黒に変わったらOKです。 (一度表示結果部分をクリックしてから)

議論

0 質問

このコースの評価は?