css小练习----提问app_weixin_47207556

大大的周 02-07 4409

效果图代码 1.label标签的for属性用来关联同一文档中另一元素的id属性。详见MDN

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回答问题</title> <style> *{ box-sizing: border-box; } body{ background-color: #b8c6db; height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; font-family: 'Poppins', sans-serif; } .quiz-container{ width: 600px; background-color: white; border-radius: 15px; box-shadow: 0 0 10px #cccccc; overflow: hidden; } .header{ padding: 4rem; } h2{ padding: 1rem; text-align: center; } ul{ list-style-type: none; } ul li{ margin: 1rem 0; } ul li label{ font-size: 1.2rem; cursor: pointer; } button{ background-color: #8e44ad; cursor: pointer; border: none; width: 100%; color: white; padding: 1.3rem; font-size: 1.2rem; } </style> </head> <body> <div class="quiz-container" id="quiz"> <div class="header"> <h2 id="question">问题</h2> <ul> <li> <input type="radio" name="choices" class="choices" id="A"> <label for="A" id="a_text"></label> </li> <li> <input type="radio" name="choices" class="choices" id="B"> <label for="B" id="b_text"></label> </li> <li> <input type="radio" name="choices" class="choices" id="C"> <label for="C" id="c_text"></label> </li> <li> <input type="radio" name="choices" class="choices" id="D"> <label for="D" id="d_text"></label> </li> </ul> </div> <button class="submitBtn" id="submitBtn">Submit</button> </div> </body> <script> const data = [ { question: 'Which language runs in a web browser?', A: 'Java', B: 'C', C: 'Python', D: 'JavaScript', correct: 'D' }, { question: 'What does CSS stand for?', A: 'Central Style Sheets', B: 'Cascading Style Sheets', C: 'Cascading Simple Sheets', D: 'Cars SUVs Sailboats', correct: 'B' }, { question: 'What does HTML stand for?', A: 'Hypertext Markup Language', B: 'Hypertext Markdown Language', C: 'Hyperloop Machine Language', D: 'Helicopters Terminals Motorboats Lamborginis', correct: 'A' }, { question: 'What year was JavaScript launched?', A: '1996', B: '1995', C: '1994', D: 'none of the above', correct: 'B' } ] const quiz = document.getElementById('quiz') const question = document.getElementById('question') const choices = document.querySelectorAll('.choices') const submitBtn = document.getElementById('submitBtn') const a_text = document.getElementById('a_text') const b_text = document.getElementById('b_text') const c_text = document.getElementById('c_text') const d_text = document.getElementById('d_text') let currentQuiz = 0 let score = 0 loadQuestion() function loadQuestion() { deSelected() const currentData = data[currentQuiz] question.innerText = currentData.question a_text.innerText = currentData.A b_text.innerText = currentData.B c_text.innerText = currentData.C d_text.innerText = currentData.D } function deSelected() { choices.forEach( choice => { choice.checked = false }) } function getSelect() { let answer choices.forEach( choice => { if (choice.checked){ answer = choice.id } }) return answer } submitBtn.addEventListener('click', ()=> { const answer = getSelect() if (answer){ if (answer === data[currentQuiz].correct){ score++ } currentQuiz++ if (currentQuiz< data.length){ loadQuestion() }else { quiz.innerHTML = ` <h2>你回答对了${score}/${data.length}</h2> <button οnclick="location.reload()">Reload</button> ` } } }) </script> </html>

好久好久没写小练习了，之前跟着网上视频写一个vue小项目，最近又跟着朋友改一个项目。昨天晚上心情很不好，但是今天早上好了。yes！嘿嘿~