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