質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

280閲覧

カウントが0になったら残りの問題全てを不正解にしたい

begine

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/07/01 09:08

編集2020/07/01 15:26

前提・実現したいこと

カウントが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;

不正解の数ではなく、質問の数で計算させることにしました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

正解のパーセントはここで計算しているんじゃないの?

javascript

1const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;

見た感じ正解した数(correct)と不正解した数(wrong)しか使ってないので
タイムアウトした場合は当然違ってきますよね。
全3問中1問正解(correct = 1)1問不正解(wrong = 1)だったら
1 / (1 + 1)ですからね。
不正解の数に頼らず「正解の数 / 質問の数」でいいのでは

投稿2020/07/01 14:13

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

begine

2020/07/01 15:22 編集

そうです、仰っている所で%計算をしています。 再度「正解の数 / 質問の数」でコードを書いてみたいと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問