クイズの正解率を集計して、スコアを表示しよう
正解率の計算ロジックを書く
前回ではプレイヤーの解答結果を管理するためのプロパティが追加できたので、ここでは正解率の計算処理を作っていきましょう。
赤字が追記、修正した箇所です。
| calcScore(){ let correctNum = 0; const results = this.gameStatus.results; for (const result of results){ const selected = result.selectedAnswer; const correct = result.question.answer; if(selected === correct){ correctNum++; //正解数 } } //for return Math.floor((correctNum / results.length) * 100); } //calcScore | 新たにcalcScoreメソッドを追加して、正解率を計算します。 gameStatus.resultsプロパティ内の解答情報オブジェクトから順に「解答」（ const selected）と正解（ const correct）を取得し、正解した数だけ correctNumの値を増やしていきます。result.question.answerでは解答した設問情報であるquestionから正解であるanswerを取り出しています。この情報はこちらに格納されている設問情報です。 return Math.floor((correctNum / results.length) * 100)では「（正解数 / 問題数） * 100」にて正解率を求めています。正解率の計算結果をMath.floorメソッドに引数として渡すことで、小数点が切り捨てられ整数として正解率が返却されます。 |
| displayResultView() { const score = this.calcScore(); const html = ` <h2>ゲーム終了</h2> <p>正解率: ${score}%</p> <button class=”resetBtn”>開始画面に戻る</button> `; ・・・以下省略・・・ | このメソッド内でconst score = this.calcScore();にてcalcScoreメソッドを実行し、正解率を表示しています。 |
それでは改めて、「ブラウザ以外でのJavaScriptの実行」をしていきましょう。
ターミナルから「http-server」コマンドを実行
そうすると以下のようにサーバーアプリケーションの情報がターミナルに表示されます。
この表示されているどちらかの情報のURLをブラウザのアドレスバーにコピペしてみましょう。quizフォルダからQuizGame.htmlファイルを選択すると下記の画面が表示され、難易度を選択するとクイズが表示されます。
チェックボックスを選択して解答ボタンをクリックしていくと、正解率が終了画面に表示されることが確認できると思います。
お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。
この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。
わからないことはプロフェッショナルから学ぶのが一番
キャリアアップに必要なスキルを取得しよう。
オンラインで受講ができるスクールですので、全国どこからでも。
就職・転職支援
