kaal-coder · kaal-coder · Oct 22, 2022 · Oct 22, 2022
diff --git a/Fronted Projects/quiz/gk.js 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 = `
+          <h3> You Scored ${score}/${quizDB.length} </h3>
+          <button class="btn" onclick="location.reload()">Play Again</button>
+          `;
+      showScore.classList.remove("scoreArea");
+    }
+  });
diff --git a/Fronted Projects/quiz/index.html b/Fronted Projects/quiz/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Quiz App</title>
+  </head>
+  <body>
+    <div class="main-div">
+      <div class="inner-div">
+        <h2 class="question">Question</h2>
+        <ul>
+          <li>
+            <input type="radio" name="answer" id="ans1" class="answer" />
+            <label for="ans1" id="option1">Answer Option</label>
+          </li>
+          <li>
+            <input type="radio" name="answer" id="ans2" class="answer" />
+            <label for="ans2" id="option2">Answer Option</label>
+          </li>
+          <li>
+            <input type="radio" name="answer" id="ans3" class="answer" />
+            <label for="ans3" id="option3">Answer Option</label>
+          </li>
+          <li>
+            <input type="radio" name="answer" id="ans4" class="answer" />
+            <label for="ans4" id="option4">Answer Option</label>
+          </li>
+        </ul>
+        <button id="submit">Submit</button>
+        <div id="showScore" class="scoreArea"></div>
+      </div>
+    </div>
+    <script src="gk.js"></script>
+  </body>
+</html>
diff --git a/Fronted Projects/quiz/style.css 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;
+}