diff --git a/Fronted Projects/quiz/gk.js b/Fronted Projects/quiz/gk.js new file mode 100644 index 00000000..550739e7 --- /dev/null +++ b/Fronted Projects/quiz/gk.js @@ -0,0 +1,97 @@ +const quizDB = [ + { + question: "1.Which one of the following river flows between Vindhyan and Satpura ranges?", + a: "Narmada", + b: "mahanadi", + c: "son", + d: "netravati", + ans: "ans1", + }, + { + question: "2.The Central Rice Research Station is situated in?", + a: "chennai", + b: "cuttack", + c: "banglore", + d: "quilon", + ans: "ans2", + }, + { + question: "3.Who among the following wrote Sanskrit grammar?", + a: "kalidasa", + b: "charak", + c: "panini", + d: "aryabhatt", + ans: "ans3", + }, + { + question: "4. Which among the following headstreams meets the Ganges in last?", + a: "Alaknanda", + b: "Pindar", + c: "Mandakini", + d: "Bhagirathi", + ans: "ans4", + }, + { + question: "5. Which among the following headstreams meets the Ganges in last?", + a: "Yoga sutra", + b: "panchatantra", + c: "brahmasutra", + d: "ayurveda", + ans: "ans1", + }, + ]; + + const question = document.querySelector(".question"); + const option1 = document.querySelector("#option1"); + const option2 = document.querySelector("#option2"); + const option3 = document.querySelector("#option3"); + const option4 = document.querySelector("#option4"); + const submit = document.querySelector("#submit"); + const answers = document.querySelectorAll(".answer"); + const showScore = document.querySelector("#showScore"); + let questionCount = 0; + let score = 0; + + const loadQuestion = () => { + const questionList = quizDB[questionCount]; + question.innerText = questionList.question; + option1.innerText = questionList.a; + option2.innerText = questionList.b; + option3.innerText = questionList.c; + option4.innerText = questionList.d; + }; + + loadQuestion(); + + const getcheckedAnswer = () => { + let answer; + answers.forEach((current) => { + if (current.checked) { + answer = current.id; + } + }); + return answer; + }; + + const deselectAll = () => { + answers.forEach((current) => (current.checked = false)); + }; + + submit.addEventListener("click", () => { + const checkedAnswer = getcheckedAnswer(); + console.log(checkedAnswer); + if (checkedAnswer == quizDB[questionCount].ans) { + score++; + } + questionCount++; + deselectAll(); + if (questionCount < quizDB.length) { + loadQuestion(); + } else { + showScore.innerHTML = ` +

You Scored ${score}/${quizDB.length}

+ + `; + showScore.classList.remove("scoreArea"); + } + }); \ No newline at end of file diff --git a/Fronted Projects/quiz/index.html b/Fronted Projects/quiz/index.html new file mode 100644 index 00000000..d5a8bc98 --- /dev/null +++ b/Fronted Projects/quiz/index.html @@ -0,0 +1,38 @@ + + + + + + + + Quiz App + + +
+
+

Question

+ + +
+
+
+ + + \ No newline at end of file diff --git a/Fronted Projects/quiz/style.css b/Fronted Projects/quiz/style.css new file mode 100644 index 00000000..85a1820c --- /dev/null +++ b/Fronted Projects/quiz/style.css @@ -0,0 +1,85 @@ +@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Exo 2", sans-serif; + font-weight: 300; +} + +html { + font-size: 62.5%; +} + +.main-div { + width: 100vw; + height: 100vh; + display: grid; + place-items: center; + background-color: rgb(174, 255, 255); +} + +.inner-div { + width: 40vw; + background-color: rgb(216, 169, 238); + padding: 3rem 8rem; + border-radius: 1rem; + box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7); + -webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7); + -moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7); +} + +.question { + font-size: 3.5rem; + font-weight: 400; + margin-bottom: 4rem; +} + +.inner-div li { + font-size: 2.5rem; + margin-bottom: 1.5rem; + list-style: none; +} + +input:hover { + cursor: pointer; +} + +#submit, +.btn { + padding: 1rem 3rem; + outline: none; + font-size: 2rem; + font-size: 400; + display: block; + margin: auto; + border: none; + border-radius: 1rem; + text-transform: uppercase; + color: white; + background-color: rgb(122, 122, 255); + margin-top: 4rem; + cursor: pointer; +} + +#submit:hover { + background-color: rgb(78, 78, 255); +} + +#showScore { + background-color: rgb(240, 240, 240); + margin-top: 3rem; + padding: 3rem 4rem; + box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7); + -webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7); + -moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7); +} + +#showScore h3 { + font-size: 3rem; + text-align: center; +} + +.scoreArea { + display: none; +} \ No newline at end of file