クイズゲームのアプリケーションの作成について➆

難易度に応じた問題を、プレイ画面に表示させる

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

前回は開始画面のスタートボタンをクリックして画面が移行する際に、まずはコンソールにクイズの「難易度のプロパティの値」が出力されていることを確認することを行いました。

続いてクイズの問題を表示する流れを作っていきましょう。

level1

level2

level3

先のJSONデータが取得できているのが分かります。

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

quiz.js

displayQuestionView(){ console.log(`選択中のレベル:${this.gameStatus.level}`); const stepkey = ‘step1’; const currentQuestion = this.quizData[this.gameStatus.level][stepkey]; const choiceStrs = []; for (const choice of currentQuestion.choices) { choiceStrs.push(`<label> <input type=”radio” name=”choice” value=”${choice}” /> ${choice} </label>`); } const html = ` <p>${ currentQuestion.word}</p> <div> ${choiceStrs.join(”)} </div> <div class=”actions”> <button class=”nextBtn”>解答する</button> </div> `; const parentElm = document.createElement(‘div’); parentElm.className = ‘question’; parentElm.innerHTML = html; this.replaceView(parentElm); }

const currentQuestion = this.quizData[this.gameStatus.level][stepkey];では、表示する問題情報をquizDataプロパティから取得し、変数 currentQuestionへ代入しています。開始画面で選択した難易度の問題の中から、1問目に該当する情報を取得してます。 const choiceStrs = [];～　では3択として表示する選択肢を作成します。選択肢として表示する情報は、変数 currentQuestionのchoicesになります。中身はこちらのように選択肢文字列の配列が入っています。各選択肢に対してラジオボタンのHTMLを作成し、 choiceStrsに追加します。 ${choiceStrs.join(”)}では前項で作ったchoiceStrsをjoinで文字列に変換し、html変数の中に埋め込んでいます。

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

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

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

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

クイズを順番に表示させる

各難易度の問題には３つの問題が用意されています。 順番に表示させるようにしましょう。

class WordQuiz { constructor(rootElm) { this.rootElm = rootElm; // ゲームのステータス this.gameStatus = { level: null, // 選択されたレベル step:1 //現在表示している問題の番号 }; } // constructor ・・・省略・・・	gameStatusオブジェクトに表示中の問題番号を管理するstepプロパティを追加します。
nextStep() { this.gameStatus.step++; this.displayQuestionView() }	nextStepメソッドは、gameStatusのstepプロパティの値をインクリメント（数値を一つ増やす処理のこと。反対は1つ減らす処理でデクリメント）した後、再度、displayQuestionViewを呼び出しています。これで次の問題が表示される流れができます。
displayQuestionView() { console.log(`選択中のレベル:${this.gameStatus.level}`); const stepKey = `step${this.gameStatus.step}`; const currentQuestion = this.quizData[this.gameStatus.level][stepKey]; ・・・中略・・・ const nextBtnElm = parentElm.querySelector(‘.nextBtn’); nextBtnElm.addEventListener(‘click’, () => { this.nextStep(); }); this.replaceView(parentElm); } // displayQuestionView	gameStatus.stepの値から stepKeyを動的に作成するように変更しています。 const nextBtnElm =～は「解答する」ボタンに対して.nextStepを呼ぶようにイベントハンドラをしています。これで次の問題へ画面移行するようになります。

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

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

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

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

解答ボタンを押すと2問目が表示されます。

解答ボタンを押すと3問面目が表示されます。

こちらのJSONファイルの難易度3の問題3つが順番に表示できました。

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

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

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

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