☆HTML☆ 三択クイズ

三択クイズ

三択クイズを作りました。

正解だと思う解答を選んで下さい。

正解ならcorrect!、不正解ならwrong!と表示されます。

Nextボタンで次の問題に進めます。

最後に結果が表示されます。

Next
☆CSS☆ h1{ text-align: center; padding-top: 30px; padding-bottom: 30px; font-weight: bold; background: rgb(235, 148, 35); margin: 0; } body{ background: #efdec1; font-size: 14px; font-family: Verdana,sans-serif; } div{ font-weight: bold; padding-top: 30px; padding-bottom: 30px; padding-left: 37%; line-height: 10px; } .container{ width: 400px; margin: 8px auto; background: white; border-radius: 4px; padding: 16px; position: relative; } #question{ margin-bottom: 16px; font-weight: bold; } #choices{ list-style: none; padding: 0; margin-bottom: 16px; } #choices > li{ border: 1px solid #ccc; border-radius: 4px; padding: 10px; margin-bottom: 10px; cursor: pointer; } #choices > li:hover{ background: #f8f8f8; } #choices > li.correct{ background: #d4edda; border-color: #c3e6cb; color: #155724; font-weight: bold; } #choices> li.correct::after{ content: ' ...correct!'; } #choices > li.wrong{ background: #f8d8da; border-color: #f5c6cb; color: #721c24; font-weight: bold; } #choices> li.wrong::after{ content: ' ...wrong!'; } #btn,#result > a{ background: #3498db; padding: 8px; border-radius: 4px; cursor: pointer; text-align:center; color:#fff; box-shadow:0 4px 0 #2880b9; } #btn.disabled{ background: #ccc; box-shadow:0 4px 0 #bbb; opacity: 0.7; } #result{ position: absolute; width: 300px; background: #fff; padding: 30px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); top: 50px; left: 0; right: 0; margin: 0 auto; border-radius: 4px; text-align: center; transition: 0.4s; } #result.hidden{ transform: translateY(-600px); } #result > p{ font-size: 24px; } #result > a{ display: block; text-decoration: none; } ☆JavaScript☆ 'use strict'; { const question = document.getElementById('question'); const choices = document.getElementById('choices'); const btn = document.getElementById('btn'); const result = document.getElementById('result'); const scoreLabel = document.querySelector('#result > p') const quizSet = shuffle([ { q: '2の8乗はどれ?', c: ['256', '1024', '128'] }, { q: '揮発性の記憶媒体はどれ?', c: ['SRAM', 'USBメモリ', 'DVD'] }, { q: 'OSSであるWebブラウザはどれ?', c: ['Firefox', 'Linux', 'Google Chrome'] }, ]); let currentNum = 0;//今何問目のクイズを解いているかを把握するための変数 let isAnswered = 0;//解答を一回のみにする変数 let score = 0; function shuffle(arr) { //let i = arr.length - 1;//ランダムに選ぶ範囲の終点のインデックスをiで定義 for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1));//ランダムに選ぶ要素のインデックスをjで定義 [arr[j], arr[i]] = [arr[i], arr[j]];//入れ替えのプログラム、分割代入 } return arr;//シャッフルされた値を返す。 }//選択肢をシャッフルするために設定した関数。パワポで詳細説明。 function checkAnswer(li) { if (isAnswered === true) { return; } isAnswered = true; if (li.textContent === quizSet[currentNum].c[0]) { li.classList.add('correct');//正解ならli要素にcorrectクラスを追加 score++; } else { li.classList.add('wrong'); } btn.classList.remove('disabled');//次の問題に行く為に、選択肢を選んだらbtnからdisabledクラスを外す }//正誤判定の関数 function setQuiz() { isAnswered = false; question.textContent = quizSet[currentNum].q;//問題文のテキストの設定、quizSet配列のcurrentNum番目のqが問題文になるように設定している。 while (choices.firstChild) { choices.removeChild(choices.firstChild); }//次の問題に行く前に選択肢を全て消す文 const shuffledChoices = shuffle([...quizSet[currentNum].c]); shuffledChoices.forEach(choice => { const li = document.createElement('li');//li要素の作成 li.textContent = choice; li.addEventListener('click', () => { checkAnswer(li); }); choices.appendChild(li);//liをchoices要素に追加する為、appendChildを使用 });//foeEachメソッドの使用,choise要素の中のli要素にquizSetで指定した選択肢を埋め込んでいく。 if (currentNum === quizSet.length - 1) { btn.textContent = 'Show Score'; } }//クイズ画面描画の関数 setQuiz(); btn.addEventListener('click', () => { if (btn.classList.contains('disabled')) { return; } btn.classList.add('disabled'); if (currentNum === quizSet.length - 1) { console.log(`Score:${score}/${quizSet.length}`); scoreLabel.textContent = `Score:${score}/${quizSet.length}`; result.classList.remove('hidden'); } else { currentNum++; setQuiz(); } });//Nextボタンの設定 }