いよいよメインの動きの実装になります。

jQueryを使って実装していきましょう。

▼ステップ

Copied!
3-1.キー入力のイベントバインド
3-2.入力文字の判定
3-3.次の問題の表示
3-4.最後の問題の処理 

準備

codepenでjQueryを使えるようにしましょう。

1. JS枠の歯車アイコンをクリック

2. 検索欄に"jquery"を入力して、一番上にくるjQueryを選択（クリック）

3. jQueryが追加されていることを確認して「Save&Close」をクリック

3-1.キー入力のイベントバインド

$(document)=画面全体において、キーボードが入力された（キーが押された)というアクションに対してイベントを付与します。
「キーが押された時」を意味する keypress に対してイベントをバインド（定義）をしましょう。

【参考】 keyPressとkeyDownとkeyUpイベントって結局何が違うんだ

その１： 何のキーが押されたかをalertを出す

以下のコードをJS欄に書いてみましょう。キーが押されたときにそのイベント（引数 e）を取得し、そのイベントのキー名をアラートで表示しています。

javascript
1234567
       
Copied!
$(function() {
  
  $(document).on('keypress', function(e){
    alert('key:'+e.key);
  });
  
});

書いたら一度表示結果(abcなど)をクリックして、適当にアルファベットをタイピングしてみましょう。

「key: a」などのアラートが出ていればOKです。