クイズの正解率を集計して、スコアを表示しよう
解答結果を保持する
現在表示されているラジオボタンの値と解答した問題の情報をセットに保存するという流れを作ります。
この情報を配列で保存しておき、後で正解情報と照らし合わせて計算することにします。
コンソールで確認すると、各問題の解答が表示されていますね。
では、やってみましょう。
赤字が追記、修正した箇所です。
| nextStep() { this.addResult(); if(this.isLastStep()){ this.displayResultView() }else{ this.gameStatus.step++; this.displayQuestionView(); } } | addResultという新しいメソッドを追加しました。 |
| addResult(){ const checkedElm = this.rootElm.querySelector(‘input[name=”choice”]:checked’); const answer = checkedElm ? checkedElm.value :”; const currentQuestion = this.quizData[this.gameStatus.level][`step${this.gameStatus.step}`]; this.gameStatus.results.push({ question: currentQuestion, selectedAnswer: answer }); console.log(`解答結果: ${answer}`); } | addResultメソッドは、画面に表示されているchoiceのラジオボタンからチェックされているElementを取得し、そのvalueをanswer変数に代入しています。選択されていない場合には空の文字列(”)が入ります。 this.gameStatus.results.push～ではanswerと現在の設問の情報( currentQuestion)とを組み合わせて解答情報オブジェクトを作成し、gameStatus.resultsの配列に追加しています。 コンソールで確認できるようにしました。 尚、[`step${this.gameStatus.step}`]と(`解答結果: ${answer}`)の「`」は「@」キーにてSHIFT + 「@」ですので注意！！ |
| resetGame(){ this.gameStatus.level = null; //選択されたレベル this.gameStatus.step = 1; // 現在表示している問題の番号 this.gameStatus.results = [];//プレイヤーの解答結果 } | プレイヤーの解答結果オブジェクトを保存しておくため、gameStatusに新しくresultsプロパティを追加しました。 |
それでは改めて、「ブラウザ以外でのJavaScriptの実行」をしていきましょう。
ターミナルから「http-server」コマンドを実行
そうすると以下のようにサーバーアプリケーションの情報がターミナルに表示されます。
この表示されているどちらかの情報のURLをブラウザのアドレスバーにコピペしてみましょう。quizフォルダからQuizGame.htmlファイルを選択すると下記の画面が表示され、難易度を選択するとクイズが表示されます。
チェックボックスを選択して解答ボタンをクリックしていくと、解答結果がコンソールに表示されることが確認できると思います。
お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。
この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。
わからないことはプロフェッショナルから学ぶのが一番
キャリアアップに必要なスキルを取得しよう。
オンラインで受講ができるスクールですので、全国どこからでも。
就職・転職支援
