completed quiz app

tsr-kairi · Jul 14, 2021 · 20d275b · 20d275b
1 parent 667c152
commit 20d275b
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 0 deletions.
diff --git a/Day 46 - Quiz App/app.js b/Day 46 - Quiz App/app.js
@@ -0,0 +1,116 @@
+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: "Cascade style sheets",
+    b: "Color and style sheets",
+    c: "Cascading style sheets",
+    d: "None of the above",
+    correct: "c",
+  },
+
+  {
+    question:
+      "If we want to show an Arrow as cursor, then which value we will use ?",
+
+    a: "pointer",
+    b: "default",
+    C: "arrow",
+    d: "arr",
+    correct: "b",
+  },
+
+  {
+    question:
+      "Which of the following is the correct syntax for referring the external style sheet?",
+
+    a: "<style src = example.css>",
+    b: "<style src = 'example.css' >",
+    c: "<stylesheet> example.css </stylesheet>",
+    d: "<link rel='stylesheet' type='text/css' href='example.css'>",
+    correct: "d",
+  },
+
+  {
+    question: "The CSS property used to control the element's font-size is -",
+
+    a: "text-style",
+    b: "text-size",
+    c: "font-size",
+    d: "None of the above",
+
+    correct: "c",
+  },
+];
+
+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 = `
+        <h2>You answered ${score}/${quizData.length} questions correctly</h2>
+
+        <button onClick="location.reload()">Reload</button>
+        `;
+    }
+  }
+});
diff --git a/Day 46 - Quiz App/index.html b/Day 46 - Quiz App/index.html
@@ -0,0 +1,46 @@
+<!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
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Quiz App</title>
+  </head>
+  <body>
+    <div class="quiz-container" id="quiz">
+      <div class="quiz-header">
+        <h2 id="question">Question text</h2>
+        <ul>
+          <li>
+            <input type="radio" name="answer" id="a" class="answer" />
+            <label for="a" id="a_text"></label>
+          </li>
+
+          <li>
+            <input type="radio" name="answer" id="b" class="answer" />
+            <label for="b" id="b_text"></label>
+          </li>
+
+          <li>
+            <input type="radio" name="answer" id="c" class="answer" />
+            <label for="c" id="c_text"></label>
+          </li>
+
+          <li>
+            <input type="radio" name="answer" id="d" class="answer" />
+            <label for="d" id="d_text"></label>
+          </li>
+        </ul>
+      </div>
+
+      <button id="submit">Submit</button>
+    </div>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/Day 46 - Quiz App/style.css b/Day 46 - Quiz App/style.css
@@ -0,0 +1,70 @@
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+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;
+}
+
+.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;
+}