難易度選択に応じたクイズを表示する処理
クイズの内容については前もって作ったこちらのJSONファイルがあります。
開始画面のスタートボタンをクリックして画面が移行する際に、まずはコンソールにクイズの「難易度のプロパティの値」が出力されていることを確認する。
しっかりと先のJSONデータから選択したプロパティの値が出力できていますね。
それでは早速、やってみましょう。
赤字が追記、修正した箇所です。
| class WordQuiz { constructor(rootElm) { this.rootElm = rootElm; // ゲームのステータス this.gameStatus = { level: null // 選択されたレベル }; }// constructor ・・・ | クイズを表示する上で、開始画面で選択された難易度をクラス内で持っておく必要があります。 ゲームのプレイ状況を集約するためのオブジェクト（gameStatus）をプロパティとして追加し、難易度はその中で管理することにします。 |
| 中略 | |
| displayStartView(){ const levelStrs = Object.keys(this.quizData); this.gameStatus.level = levelStrs[0]; const optionStrs = []; for (let i =0; levelStrs.length >i; i++){ optionStrs.push(`<option value=”${levelStrs[i]}” name=”level”>難易度${i + 1 }</option>`); } const html =` <select class=”levelSelector”> ${optionStrs.join(”)} </select> <button class=”startBtn”>START</button> `; const parentElm = document.createElement(‘div’); parentElm.innerHTML = html const selectorElm = parentElm.querySelector(‘.levelSelector’); selectorElm.addEventListener(‘change’, (event) => { this.gameStatus.level = event.target.value; }); const startBtnElm = parentElm.querySelector(‘.startBtn’); startBtnElm.addEventListener(‘click’, () =>{ this.displayQuestionView(); }); this.replaceView(parentElm) } //displayStartView | 開始画面が表示された際、ブラウザ上のセレクトボックスはlevelStrsの先頭の値を選択しています。それに合わせてgameStatus.levelの初期値としてlevelStrsの先頭の値を指定しています。 そしてセレクトボックスに変更が生じたタイミングで、選択された難易度に対応した値がlevelプロパティにセットされるようにイベントリスナを追加します。 |
| displayQuestionView(){ console.log(`選択中のレベル:${this.gameStatus.level}`); const html = ` <p>ゲームを開始します</p> <button class=”retireBtn”>ゲームを終わる</button> `; const parentElm = document.createElement(‘div’); parentElm.className =’question’; parentElm.innerHTML = html; const retireBtnElm = parentElm.querySelector(‘.retireBtn’); retireBtnElm.addEventListener(‘click’, () =>{ this.displayResultView(); }); this.replaceView(parentElm); } //displayQuestionView | 開始画面のスタートボタンをクリックしてプレイ画面に移行する際に、コンソールにlevelプロパティにの値が出力されていることを確認します。 |
それでは改めて、「ブラウザ以外でのJavaScriptの実行」をしていきましょう。
ターミナルから「http-server」コマンドを実行
そうすると以下のようにサーバーアプリケーションの情報がターミナルに表示されます。
この表示されているどちらかの情報のURLをブラウザのアドレスバーにコピペしてみましょう。そしてquizフォルダからQuizGame.htmlファイルを選択すると➀の画面が表示されます。
➀
お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。
この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。
わからないことはプロフェッショナルから学ぶのが一番
キャリアアップに必要なスキルを取得しよう。
オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.
就職・転職支援
