終了画面へ移行し表示させる

これまでの内容では3問目の解答ボタンを押すと画面は何も進まず、コンソールに下記のようなエラーが出てしまいます。

ちなみにクイズの内容については前もって作ったこちらのJSONファイルがあります。

今回は最後の問題の後は、終了画面へ移行させることを学びましょう。

赤字が追記、修正した箇所です。

quiz.js

・・・前項省略・・・ isLastStep(){ const currentQuestions = this.quizData[this.gameStatus.level]; return this.gameStatus.step === Object.keys(currentQuestions).length }	isLastStepは現在表示している問題が最後の問題か否かを判断するメソッドです。gameStatusのstepプロパティの値と問題数を比較して判断しています。
nextStep() { if(this.isLastStep()){ this.displayResultView() }else{ this.gameStatus.step++; this.displayQuestionView(); } }	nextStepメソッド内では先のisLastStepメソッドを使用し、ifで分岐しています。最後の問題なら終了画面へ移動し、そうでなければgameStatus.stepをインクリメント（数値を一つ増やす処理）して次の問題を表示します。
class WordQuiz { constructor(rootElm) { this.rootElm = rootElm; // ゲームのステータス this.gameStatus = {} this.resetGame(); }	変数を初期状態に戻すもので、コンストラクタで行っていた初期化も同メソッドで代用。
resetGame(){ this.gameStatus.level = null; //選択されたレベル this.gameStatus.step = 1; // 現在表示している問題の番号 }	終了画面から開始画面に移行する際は、再度ゲームのプレイができるようにgameStatusを初期化しておく必要があるので、このresetGameメソッドを追加しました。
displayResultView() { const html = ` <h2>ゲーム終了</h2> <button class=”resetBtn”>開始画面に戻る</button> `; const parentElm = document.createElement(‘div’); parentElm.className = ‘results’; parentElm.innerHTML = html; const resetBtnElm = parentElm.querySelector(‘.resetBtn’); resetBtnElm.addEventListener(‘click’, () => { this.resetGame(); this.displayStartView(); }); this.replaceView(parentElm); } replaceView(elm) { this.rootElm.innerHTML = ”; this.rootElm.appendChild(elm); }	終了画面の「開始画面に戻る」ボタンがクリックされた際にresetGameを呼び出すようにします。

それでは改めて、「ブラウザ以外でのJavaScriptの実行」をしていきましょう。

ターミナルから「http-server」コマンドを実行

そうすると以下のようにサーバーアプリケーションの情報がターミナルに表示されます。

この表示されているどちらかの情報のURLをブラウザのアドレスバーにコピペしてみましょう。quizフォルダからQuizGame.htmlファイルを選択すると下記の画面が表示され、難易度を選択するとクイズが表示されます。

3問目まで表示されました。そして「解答する」ボタンをクリックすると・・・

いままでエラーになっていましたが、ゲーム終了画面に移行できました。そして「開始画面に戻る」をクリックすると・・・

最初の開始画面に戻りました。

お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。

わからないことはプロフェッショナルから学ぶのが一番