From 9a25d6022f1d380602c2a5a5a281d0d9dc213fbe Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Tue, 20 Oct 2020 09:28:28 -0400 Subject: [PATCH] Quiz app --- quiz-app/index.html | 39 ++++++++++++++++++ quiz-app/script.js | 98 +++++++++++++++++++++++++++++++++++++++++++++ quiz-app/style.css | 70 ++++++++++++++++++++++++++++++++ 3 files changed, 207 insertions(+) create mode 100644 quiz-app/index.html create mode 100644 quiz-app/script.js create mode 100644 quiz-app/style.css diff --git a/quiz-app/index.html b/quiz-app/index.html new file mode 100644 index 0000000..688716a --- /dev/null +++ b/quiz-app/index.html @@ -0,0 +1,39 @@ + + + + + + + Quiz App + + +
+
+

Question text

+
    +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • +
+
+ +
+ + + diff --git a/quiz-app/script.js b/quiz-app/script.js new file mode 100644 index 0000000..543ee19 --- /dev/null +++ b/quiz-app/script.js @@ -0,0 +1,98 @@ +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

+ + + ` + } + } +}) \ No newline at end of file diff --git a/quiz-app/style.css b/quiz-app/style.css new file mode 100644 index 0000000..2db24b0 --- /dev/null +++ b/quiz-app/style.css @@ -0,0 +1,70 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #b8c6db; + background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 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: #8e44ad; + color: #fff; + border: none; + display: block; + width: 100%; + cursor: pointer; + font-size: 1.1rem; + font-family: inherit; + padding: 1.3rem; +} + +button:hover { + background-color: #732d91; +} + +button:focus { + outline: none; + background-color: #5e3370; +}