quiz-simplify.html

1234567891011
<!DOCTYPE html> <html>  <head> <link rel="stylesheet" href="quiz-simplify.css" /> <script src="quiz-simplify.js"></script> </head> <body onload="onReady()"> <div class="wrapper" id="id-wrapper"></div> </body> </html>

quiz-simplify.css

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
body { margin: 0; } .wrapper { width: 100%; height: 100vh; float: left; } /* WELCOME SCENE - START */ .welcome { width: 960px; height: 540px; margin: auto; border: 1px solid #eee; background-color: #0ad; box-sizing: border-box; padding: 50px; text-align: center; } .welcome h1, .welcome p { color: #fff; } .welcome button { color: #0ad0ad; background: #fff; border: 1px solid #0ad0ad; padding: 20px 40px; font-weight: bold; margin-top: 30px; } /* WELCOME SCENE - END */ /* GAME SCENE - START */ .game { width: 960px; height: 540px; margin: auto; border: 1px solid #0ad; box-sizing: border-box; padding: 50px 200px; background-color: #0ad; } .game p { font-size: 2rem; color: #fff; text-align: center; } .game li { color: #fff; } .game button { color: #0ad0ad; background: #fff; border: 1px solid #0ad0ad; padding: 20px 40px; font-weight: bold; margin: 0 10px; } /* GAME SCENE - END */ /* RESULT SCENE - START */ .result { width: 960px; height: 540px; margin: auto; border: 1px solid #0ad; box-sizing: border-box; padding: 50px 200px; background-color: #0ad; text-align: center; } .result h1, .result p { color: #fff; } .result button { color: #0ad0ad; background: #fff; border: 1px solid #0ad0ad; padding: 20px 40px; font-weight: bold; margin-top: 30px; } /* RESULT SCENE - END */

quiz-simplify.js

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
var quiz = [ { question: "Nước biển mặn vì đâu?", answers: [ "A. Từ đáy đại dương.", "B. Từ trong nước.", "C. Từ núi.", "D. Do đổ muối vào.", ], key: 2, }, { question: "Vì ... nên núi bạc đầu, biển lay bởi gió, hoa sầu vì mưa?", answers: ["A. Anh", "B. Em", "C. Sương", "D. Tuyết"], key: 2, }, { question: "www là viết tắt của?", answers: [ "A. Word wide website.", "B. World wide web.", "C. what why when", "D. Viết lộn ngược của mmm.", ], key: 1, }, { question: "Tìm số tiếp theo của dãy số: 13; 8; 14; 9; 15", answers: ["A. 11", "B. 10", "C. 13", "D. 7"], key: 1, }, { question: "Có bao nhiêu quân cờ trên bàn cờ vua?", answers: ["A. 16", "B. 24", "C. 8", "D. 32"], key: 3, }, ]; var answers = []; function onReady() { renderWelcome(); } function addAnswers(answer) { answers.push(answer); } function getAnswers() { let answers = sessionStorage.getItem("answers"); if (answers === null) answers = []; else answers = JSON.parse(answers); return answers; } function countCorrectAnswers() { if (answers == null || answers.length == 0) return 0; let count = 0; for (let i = 0; i < answers.length; i++) if (answers[i] === quiz[i].key) count++; return count; } function renderWelcome() { let welcome = document.createElement("div"); welcome.setAttribute("class", "welcome"); let h1 = document.createElement("h1"); h1.innerHTML = "CHÀO MỪNG ĐẾN VỚI QUIZ"; welcome.appendChild(h1); let p = document.createElement("p"); p.innerHTML = "Trả lời 5 câu hỏi lựa chọn và trở thành người chinh phục!"; welcome.appendChild(p); let button = document.createElement("button"); button.innerText = "BẮT ĐẦU"; button.onclick = () => { renderGame(0); }; welcome.appendChild(button); let wrapper = document.getElementById("id-wrapper"); wrapper.appendChild(welcome); } function renderGame(id) { if (id == 5) { renderResult(); return; } let game = document.createElement("div"); game.setAttribute("class", "game"); let p = document.createElement("p"); p.innerHTML = quiz[id].question; game.appendChild(p); let ul = document.createElement("ul"); for (let i = 0; i < quiz[id].answers.length; i++) { let li = document.createElement("li"); li.innerText = quiz[id].answers[i]; ul.appendChild(li); } game.appendChild(ul); for (let i = 0; i < quiz[id].answers.length; i++) { let answerText = ["A", "B", "C", "D"]; let button = document.createElement("button"); button.innerText = answerText[i]; button.onclick = () => { console.log(i); addAnswers(i); renderGame(id + 1); }; game.appendChild(button); } let wrapper = document.getElementById("id-wrapper"); wrapper.innerHTML = ""; wrapper.appendChild(game); } function renderResult() { let result = document.createElement("div"); result.setAttribute("class", "result"); let h1 = document.createElement("h1"); h1.innerHTML = "CÁM ƠN BẠN ĐÃ THAM GIA QUIZ!"; result.appendChild(h1); let p = document.createElement("p"); p.innerHTML = "Bạn đã trả lời được " + countCorrectAnswers() + "/5 câu hỏi!"; result.appendChild(p); let button = document.createElement("button"); button.innerText = "BẮT ĐẦU LẠI"; button.onclick = () => { answers = []; renderGame(0); }; result.appendChild(button); let wrapper = document.getElementById("id-wrapper"); wrapper.innerHTML = ""; wrapper.appendChild(result); }