What should I use
@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap’);
*{
box-sizing: border-box;
}
body{
background-color: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7f7 100%);
font-family: ‘Poppins’, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.quiz-container{
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 600px;
overflow: hidden;
}
.quiz-header{
padding: 4rem;
}
h2{
padding: 1rem;
text-align: center;
margin: 0;
}
ul{
list-style-type: none;
padding: 0;
}
ul li{
font-size: 1.2rem;
margin: 1rem 0;
}
ul li label{
cursor: pointer;
}
button{
background-color: #03cae4;
color: #fff;
border: none;
display: block;
width: 100%;
cursor: pointer;
font-size: 1.1rem;
font-family: inherit;
padding: 1.3rem;
}
button:hover{
background-color: #04adc4;
}
button:focus{
outline: none;
background-color: #44b927;
}
const quizData = [
{
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 answerEls = document.querySelectorAll(‘.answer’)
const questionEl = document.getElementById(‘question’)
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’)
const submitBtn = document.getElementById(‘submit’)
let currentQuiz = 0
let score = 0
loadQuiz()
function loadQuiz() {
deselectAnswers()
const currentQuizData = quizData[currentQuiz]
questionEl.innerText = currentQuizData.question
a_text.innerText = currentQuizData.a
b_text.innerText = currentQuizData.b
c_text.innerText = currentQuizData.c
d_text.innerText = currentQuizData.d
}
function deselectAnswers() {
answerEls.forEach(answerEl => answerEl.checked = false)
}
function getSelected() {
let answer
answerEls.forEach(answerEl => {
if(answerEl.checked) {
answer = answerEl.id
}
})
return answer
}
submitBtn.addEventListener(‘click’, () => {
const answer = getSelected()
if(answer) {
if(answer === quizData[currentQuiz].correct) {
score++
}
currentQuiz++
if(currentQuiz < quizData.length) {
loadQuiz()
} else {
quiz.innerHTML = `
You answered ${score}/${quizData.length} questions correctly
`
}
}
})
Comments Off on Quiz