JavaScriptで三択クイズ
2019/07/15

この記事を書いている人 - WRITER -
http://mukuchan.com/dotinstall/js/quiz/
3つの選択肢から1つを選ぶクイズ。できることだけ覚えておいて、何かプログラムをつくるときにコピーして改造したいと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Quiz</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <p id="question"></p> <ul id="choices"></ul> <div id="btn" class="disabled">Next</div> <section id="result"> <p></p> <a href="">Replay?</a> </section> </div> <script src="main.js"></script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
'use strict'; { const question = document.getElementById('question'); const btn = document.getElementById('btn'); const choices = document.getElementById('choices'); const result = document.getElementById('result'); const scoreLabel = document.querySelector('#result > p'); const quizSet = [ // {q: 'What is A?', c: ['A0', 'A1', 'A2']}, // {q: 'What is B?', c: ['B0', 'B1', 'B2']}, // {q: 'What is C?', c: ['C0', 'C1', 'C2']}, {q: '世界で一番大きな湖は?', c: ['カスピ海', 'カリブ海', '琵琶湖']}, {q: '2の8乗は?', c: ['256', '64', '1024']}, {q: 'いま、何問目?', c: ['3問目', '4問目', '5問目']}, ]; let currentNum = 0; let isAnswered; let score = 0; function shuffle(arr) { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[j], arr[i]] = [arr[i], arr[j]]; } return arr; } function checkAnswer(li) { if (isAnswered) { return; } isAnswered = true; if (li.textContent === quizSet[currentNum].c[0]) { li.classList.add('correct'); score++; } else { li.classList.add('wrong'); } btn.classList.remove('disabled'); } function setQuiz() { isAnswered = false; question.textContent = 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.textContent = choice; li.addEventListener('click', () => { checkAnswer(li); }); choices.appendChild(li); }); 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.add('show'); } else { currentNum++; setQuiz(); } }); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
body { background: #efdec1; font-size: 14px; font-family: Verdana, sans-serif; } .container { width: 400px; margin: 8px auto; background: #fff; 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 0 2px rgba(0, 0, 0, 0.5); /* top: 50px; */ top: -500px; left: 0; right: 0; margin: 0 auto; border-radius: 3px; text-align: center; transition: 0.4s ease-out; } #result.show { top: 50px; } #result > p { font-size: 24px; } #result > a { display: block; text-decoration: none; } |
この記事を書いている人 - WRITER -