效果图
代码
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!嘿嘿~