前提・実現したいこと
カウントが0で終了するクイズ問題を作成しています。
条件演算子とテンプレートリテラルを使い、カウントが0になったら残りの問題全てを不正解にしたいと考えているのですが、なかなか思い通りにいきません。
【解決したいこと】
時間切れだった時に残りの問題全てを不正解カウントさせたい。
よろしくお願いします。
発生している問題・エラーメッセージ
時間切れ後の正答率が違う。 (全3問中1問正解だったら正答率が50%となってしまいます。)
該当のソースコード
javascript
1 2 const correctLavel = document.getElementById('correct'); // 正解 3 const wrongLavel = document.getElementById('wrong'); // 不正解 4 5 6 let correct = 0; 7 let wrong = 0; 8 9 10 document.addEventListener('DOMContentLoaded', function() { //画面表示したら以下を発火 11 startTime = Date.now(); 12 countDown(); 13 }); 14 15 function countDown() { 16 timerId = setTimeout (function() { 17 //timerIdをsetTimeoutの返り値として取得 次の処理を指定したミリ秒後に実行(1度だけ) 18 19 timeLeft = timeToCountDown - (Date.now() - startTime); 20 //elapsedTimeは、1度しか使わないので直接代入した↑ 21 22 if(timeLeft < 0){ //残り時間が0より小さくなったらclearTimeoutを呼ぶ(タイマー停止) 23 clearTimeout(timerId); 24 timeLeft = 0; //timeLeftを0にして、updateTimerで更新する 25 updateTimer(timeLeft); 26 27 btn.classList.remove('disabled'); // Nextボタンのdisabledを解除する 28 btn.textContent = '結果発表'; // Nextボタンの表示は「結果発表」にする 29 currentNum = quizSet.length - 1; // 最終問題まで終わったとする 30 isAnswered = true; 31 return; //clearTimeout()したら次のcountDown()を呼び出したくないためreturnする 32 } 33 34 updateTimer(timeLeft); // 呼び出し(渡すミリ秒はtimerLeft) 35 countDown(); //countDownを再帰的に呼び出したいため、ここで呼ぶ。 36 }, 10); 37 } 38 39 40 sbtn.addEventListener('click', function() { //STARTボタンがクリックされたらタイマーON 41 startTime = Date.now(); // 押したときの時刻を取得 42 countDown(); /* カウントダウン機能は setTimeoutを使い再帰的に実行させるため countDown() という名前の別関数にする。*/ 43 }); 44 45 let currentNum = 0; 46 let isAnswered; 47 let score = 0; 48 49 50 function checkAnswer(li) { 51 if (isAnswered) { 52 return; 53 } 54 isAnswered = true; 55 56 if (li.textContent === quizSet[currentNum].c[0]) { 57 li.classList.add('correct'); 58 score++; 59 correct++; 60 } else { 61 li.classList.add('wrong'); 62 wrong++; 63 } 64 65 btn.classList.remove('disabled'); 66 } 67 68 function setQuiz() { 69 isAnswered = false; 70 71 question.textContent = quizSet[currentNum].q; 72 73 while (choices.firstChild) { 74 choices.removeChild(choices.firstChild); 75 } 76 77 const shuffledChoices = shuffle([...quizSet[currentNum].c]); 78 shuffledChoices.forEach(choice => { 79 const li = document.createElement('li'); 80 li.textContent = choice; 81 li.addEventListener('click', () => { 82 checkAnswer(li); 83 if (currentNum === quizSet.length - 1) clearTimeout(timerId); // 最終問題に回答したらタイマー止める 84 }); 85 choices.appendChild(li); 86 }); 87 88 if (currentNum === quizSet.length - 1) { 89 btn.textContent = '結果発表'; 90 } 91 } 92 93 setQuiz(); 94 95 btn.addEventListener('click', () => { 96 if (btn.classList.contains('disabled')) { 97 return; 98 } 99 btn.classList.add('disabled'); 100 101 showResult(); 102 103 function showResult(){ 104 const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100; 105 if (currentNum === quizSet.length - 1) { //最終問題だったらスコアを表示 106 scoreLabel.innerHTML = `${quizSet.length} <br> 107 ${score}<br> 108 ${accuracy.toFixed(2)}%`; 109 result.classList.remove('hidden'); 110 } else { //違ったら次の問題へ 111 currentNum++; 112 setQuiz(); 113 } 114 } 115 }); 116}
補足情報(FW/ツールのバージョンなど)
const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;
不正解の数ではなく、質問の数で計算させることにしました。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/01 15:22 編集