JS練習のため簡易クイズアプリを製作しています。
クイズが3問あり、各設問にはradioボタン、”回答する”ボタンがあります。
また最後には”スコアを見る”ボタンがあり合計スコアが表示されると同時に、console.logでコメントが表示されます。
問題点は以下の三つです(他にもありそうですが・・・)
(1)score1, score2, score3を足す計算が上手くいかない。
score1+score2+score3だと例えば1点+1点+0点=2点となる場合もあるが全ての場合において答えが0で計算されてしまう。
(2)radioボタン選択時とbuttonクリック時、各々でconsole.logでコメントを出したいが上手く両立されない(現在はradioボタン選択時のみ正常に動いています)。
"回答する"ボタンを押すと console.log('不正解です。', '現在のトータルスコア:' + score) となるようにしたいが script.js:37 Uncaught ReferenceError: value1 is not defined at answerQuiz1 (script.js:37) at HTMLButtonElement.onclick (index.html:21) といったエラーが出る。
(3)もう少しまとめて短いコードにできる気がするがやり方がわからない。例えば、
JS
1function quiz1() { 2 function selectQuiz1() { 3 ... 4 } 5 function answerQuiz1() { 6 ... 7 } 8}
のように書いて見たがエラーになった。
コードは以下です。
js
1 let score = 0; 2 let score1 = 0; 3 let score2 = 0; 4 let score3 = 0; 5 score = score1 + score2 + score3; //この式が機能していない? 6 7 8 function selectQuiz1() { 9 const quiz_1 = document.getElementById('quiz-1'); 10 const value1 = quiz_1.answer.value; 11 12 switch (value1) { 13 case 'a': 14 console.log('1問目の' + value1 + 'を選択しました') 15 break; 16 case 'b': 17 console.log('1問目の' + value1 + 'を選択しました') 18 break; 19 case 'c': 20 console.log('1問目の' + value1 + 'を選択しました') 21 break; 22 } 23 } 24 25 function answerQuiz1() { 26 switch (value1) { 27 case 'a': 28 score1 = 0; 29 console.log('不正解です。', '現在のトータルスコア:' + score) 30 break; 31 case 'b': 32 score1 = 1; 33 console.log('正解です。', '現在のトータルスコア:' + score) 34 break; 35 case 'c': 36 score1 = 0; 37 console.log('不正解です。', '現在のトータルスコア:' + score) 38 break; 39 } 40 } 41 42 function selectQuiz2() { 43 const quiz_2 = document.getElementById('quiz-2'); 44 const value2 = quiz_2.answer.value; 45 46 switch (value2) { 47 case 'a': 48 console.log('2問目の' + value2 + 'を選択しました') 49 break; 50 case 'b': 51 console.log('2問目の' + value2 + 'を選択しました') 52 break; 53 case 'c': 54 console.log('2問目の' + value2 + 'を選択しました') 55 break; 56 } 57 } 58 59 function answerQuiz2() { 60 switch (value2) { 61 case 'a': 62 score2 = 1; 63 console.log('正解です。', '現在のトータルスコア:' + score) 64 break; 65 case 'b': 66 score2 = 0; 67 console.log('不正解です。', '現在のトータルスコア:' + score) 68 break; 69 case 'c': 70 score2 = 0; 71 console.log('不正解です。', '現在のトータルスコア:' + score) 72 break; 73 } 74 } 75 76 function selectQuiz3() { 77 const quiz_3 = document.getElementById('quiz-3'); 78 const value3 = quiz_3.answer.value; 79 80 switch (value3) { 81 case 'a': 82 console.log('3問目の' + value3 + 'を選択しました') 83 break; 84 case 'b': 85 console.log('3問目の' + value3 + 'を選択しました') 86 break; 87 case 'c': 88 console.log('3問目の' + value3 + 'を選択しました') 89 break; 90 } 91 } 92 93 function answerQuiz3() { 94 switch (value3) { 95 case 'a': 96 score3 = 0; 97 console.log('不正解です。', '現在のトータルスコア:' + score) 98 break; 99 case 'b': 100 score3 = 0; 101 console.log('不正解です。', '現在のトータルスコア:' + score) 102 break; 103 case 'c': 104 score3 = 1; 105 console.log('正解です。', '現在のトータルスコア:' + score) 106 break; 107 } 108 } 109 110 function showScore() { 111 document.getElementById('score-message').innerHTML = score; 112 113 if (score === 3) { 114 console.log('3点:すばらしい!'); 115 } else if (score === 2) { 116 console.log('2点;おしい!'); 117 } else if (score === 1) { 118 console.log('1点;まあまあ'); 119 } else { 120 console.log('0点;残念'); 121 } 122 }
html
1<!DOCTYPE html> 2<html> 3<head> 4<link rel="stylesheet" href="styles.css" /> 5<script src="script.js"></script> 6</head> 7<body> 8<div class="quizzes-container"> 9<h1>Quiz</h1> 10 <div class="quiz-container"> 11 <h2>1問目</h2> 12 <div> 13 <p>モロッコの首都は次のうちのどれ</p> 14 </div> 15 <form id="quiz-1" onclick="selectQuiz1();"> 16 <input name="answer" type="radio" value="a">カサブランカ</input> 17 <!--正解はBのラバト----> 18 <input name="answer" type="radio" value="b">ラバト</input> 19 <input name="answer" type="radio" value="c">マラケシュ</input> 20 </form> 21 <button class="btn" type="button" onclick="answerQuiz1();">回答する</button> 22 </div> 23 <div class="quiz-container"> 24 <h2>2問目</h2> 25 <div> 26 <p>世界でもっとも深い湖は次のうちのどれ</p> 27 </div> 28 <form id="quiz-2" onclick="selectQuiz2();"> 29 <!--正解はAのバイカル湖----> 30 <input name="answer" type="radio" value="a">バイカル湖</input> 31 <input name="answer" type="radio" value="b">カスピ海</input> 32 <input name="answer" type="radio" value="c">ビクトリア湖</input> 33 </form> 34 <button class="btn" type="button" onclick="answerQuiz2();">回答する</button> 35 </div> 36 <div class="quiz-container"> 37 <h2>1問目</h2> 38 <div> 39 <p>絵画「夜警」を描いた画家は次のうちのどれ</p> 40 </div> 41 <form id="quiz-3" onclick="selectQuiz3();"> 42 <input name="answer" type="radio" value="a">フェルメール</input> 43 <input name="answer" type="radio" value="b">カラバッジオ</input> 44 <!--正解はCのレンブラント----> 45 <input name="answer" type="radio" value="c">レンブラント</input> 46 </form> 47 <button class="btn" type="button" onclick="answerQuiz3();">回答する</button> 48</div> 49<div id="score-container"> 50 <button class="btn" type="button" onclick="showScore();">スコアを見る</button> 51 <!--pタグ内にスコアを表示--> 52 <p id="score-message"></p> 53</div> 54</body>
css
1.quizzes-container{ 2 width: 400px; 3} 4 5.quiz-container{ 6 border-bottom:1px solid black; 7 padding-bottom: 20px; 8} 9 10 11#score-container{ 12 border: 1px solid black; 13}
どなたかアドバイス頂けたら幸いです。よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー