Quiz

By Aug.30, 2022

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; }

Question Text

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

` } } })

Posted in Uncategorized
Leave a comment