Added the files for quiz

You are curious 👀
AvadaKedavra6 · Oct 3, 2023 · ed7040c · ed7040c
1 parent cdb5b48
commit ed7040c
Show file tree

Hide file tree

Showing 4 changed files with 442 additions and 0 deletions.
diff --git a/quiz_hp/css/style.css b/quiz_hp/css/style.css
@@ -0,0 +1,207 @@
+body {
+  background: #008854;
+}
+
+* {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
+}
+
+
+
+.main-section {
+  background: transparent;
+  max-width: 700px;
+  width: 90%;
+  height: 500px;
+  margin: 150px auto;
+  border-radius: 10px;
+}
+
+.quiz-holder {
+  background: #e6e4e4;
+  width: 100%;
+  margin: 30px auto;
+  padding: 10px;
+  border-radius: 5px;
+
+}
+
+.question-counter {
+  font-size: 16px;
+  font-family: sans-serif;
+  float: right;
+  color: #555;
+}
+
+.question {
+  font-size: 20px;
+  font-family: sans-serif;
+  margin: 20px 10px;
+  font-weight: 300;
+  margin-top: 40px;
+  color: #000000;
+  line-height: 33px;
+}
+
+.m-chooses li {
+  list-style: none;
+  padding: 25px 10px;
+  font-size: 16px;
+  font-family: sans-serif;
+  margin: 5px 0px;
+  color: #000000;
+  cursor: pointer;
+  box-shadow: 0 2px 2px 0#ccc, 0 2px 2px 0 #cccc;
+}
+
+.m-chooses li:hover {
+  background: #eee;
+}
+
+.m-chooses li span {
+  font-weight: 600;
+  padding: 0px 10px;
+}
+
+.m-chooses li i {
+  float: right;
+}
+
+.btn-ctrl {
+  margin-top: 50px;
+  padding: 10px 5px;
+}
+
+.btn-ctrl::after {
+  content: '';
+  display: block;
+  clear: both;
+  cursor: pointer;
+}
+
+.btn-ctrl button {
+  padding: 10px 30px;
+  border: none;
+  float: right;
+  background: #007447;
+  color: #fff;
+  border-radius: 5px;
+  font-size: 18px;
+}
+
+.btn-ctrl button:hover {
+  opacity: .9;
+  box-shadow: 0 2px 2px 0#ccc, 0 2px 2px 0 #cccc;
+
+}
+
+/*  good result */
+.g-result h4 {
+  text-align: center;
+  font-size: 35px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 100;
+}
+
+.g-result .g-text {
+  color: #27AE60;
+  font-size: 20px;
+}
+
+.g-circle {
+  width: 300px;
+  height: 300px;
+  color: #27AE60;
+  line-height: 300px;
+  margin: 30px auto;
+  border: 4px solid #27AE60;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 75px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 100;
+}
+
+/*  good ~ bad result */
+.m-result h4 {
+  text-align: center;
+  font-size: 35px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 100;
+}
+
+.m-result .m-text {
+  color: #F39C12;
+  font-size: 20px;
+}
+
+.m-circle {
+  width: 300px;
+  height: 300px;
+  color: #F39C12;
+  line-height: 300px;
+  margin: 30px auto;
+  border: 4px solid#F39C12;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 75px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 100;
+}
+
+/*  bad result */
+.b-result h4 {
+  text-align: center;
+  font-size: 35px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 100;
+}
+
+.b-result .b-text {
+  color: #C0392B;
+  font-size: 20px;
+}
+
+.b-circle {
+  width: 300px;
+  height: 300px;
+  color: #C0392B;
+  line-height: 300px;
+  margin: 30px auto;
+  border: 4px solid #C0392B;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 75px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 100;
+}
+
+footer {
+  width: 100%;
+  background: #e6e4e4;
+  margin: 30px auto;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+footer h2 {
+  color: #777;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 180;
+  text-align: center;
+}
+
+.footer-links {
+  padding: 10px 0px;
+  text-align: center;
+}
+
+.footer-links a {
+  color: #004700;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 400;
+  text-align: center;
+  padding: 0px 5px;
+}
diff --git a/quiz_hp/index.html b/quiz_hp/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Quiz HP</title>
+  <link rel="stylesheet" href="css/style.css" />
+</head>
+
+<body>
+  <div class="main-section">
+    <div class="quiz-holder" id="quizHolder">
+    </div>
+    <footer>
+      <div class="footer-links">
+        <a href="https://github.com/AvadaKedavra6">My Github</a>
+      </div>
+    </footer>
+  </div>
+  <script src="js/data.js"></script>
+  <script src="js/app.js"></script>
+  <script>
+    render(0);
+  </script>
+</body>
+
+</html>
diff --git a/quiz_hp/js/app.js b/quiz_hp/js/app.js
@@ -0,0 +1,114 @@
+var correctAnswer = 0;
+var quizHolder = document.getElementById("quizHolder");
+
+function render(n) {
+  quizHolder.innerHTML = `
+        <span class="question-counter">${data[n].id} of ${
+    data.length
+  }</span>
+        <h4 class="question">${data[n].question}</h4>
+        <ul class="m-chooses">
+          <li onclick="checkAnswer(1, this, ${n})"><span>A)</span> ${
+    data[n].a
+  } <i></i></li>
+          <li onclick="checkAnswer(2, this, ${n})"><span>B)</span> ${
+    data[n].b
+  } <i></i></li>
+          <li onclick="checkAnswer(3, this, ${n})"><span>C)</span> ${
+    data[n].c
+  } <i></i></li>
+          <li onclick="checkAnswer(4, this, ${n})"><span>D)</span> ${
+    data[n].d
+  }  <i></i></li>
+        </ul>
+        <div class="btn-ctrl">
+          <button type="button" onclick="nextQuestion(${n})" id="nextBtn">Next &nbsp;&rsaquo;</button>
+        </div>
+         `;
+}
+
+var cA = 0;
+var userAnswered = false;
+
+function checkAnswer(userAnswer, tag, n) {
+  var nextBtn = document.getElementById("nextBtn");
+  var corectTag;
+  if (cA == 0) {
+    if (userAnswer == data[n].answer) {
+      correctAnswer++;
+      tag.style.background = "#75DDA1";
+      tag.style.color = "#fff";
+      tag.getElementsByTagName("i")[0].innerHTML += "<i>Correct</i>";
+      cA++;
+      nextBtn.style.background = "#4CAF50";
+      userAnswered = true;
+
+      console.log(correctAnswer);
+    } else {
+      tag.style.background = "#F09289";
+      tag.style.color = "#fff";
+      tag.getElementsByTagName("i")[0].innerHTML += "<i>Wrong</i>";
+
+      corectTag = tag.parentElement.getElementsByTagName("li")[
+        data[n].answer - 1
+      ];
+      corectTag.getElementsByTagName("i")[0].innerHTML += "<i>Correct</i>";
+
+      corectTag.style.background = "#75DDA1";
+      corectTag.style.color = "#fff";
+      nextBtn.style.background = "#4CAF50";
+      userAnswered = true;
+      cA++;
+    }
+  }
+}
+
+function nextQuestion(n) {
+  var num = n + 1;
+  var nextBtn = document.getElementById("nextBtn");
+  nextBtn.style.background = "#ccc";
+
+  if (userAnswered == false) return 0;
+  if (num < data.length) {
+    cA = 0;
+    userAnswered = false;
+    render(num);
+  } else {
+
+    // result
+    resultFunc();
+  }
+}
+
+function resultFunc() {
+  if (correctAnswer / data.length >= 3 / 4) {
+    quizHolder.innerHTML = `
+                <div class="g-result">
+                    <h4>Your Result</h4>
+                    <h4 class="g-text">Very Good , you are a big fan of HP !</h4>
+                    <div class="g-circle">
+                    ${correctAnswer} / ${data.length}
+                    </div>
+                </div>
+            `;
+  } else if (correctAnswer / data.length >= 1 / 2) {
+    quizHolder.innerHTML = `
+            <div class="m-result">
+                <h4>Your Result</h4>
+                <h4 class="m-text">Hmm it's good , but go look hp movies and book !</h4>
+                <div class="m-circle">
+                ${correctAnswer} / ${data.length}                
+                </div>
+            </div>
+            `;
+  } else {
+    quizHolder.innerHTML = `
+            <div class="b-result">
+                <h4>Your Result</h4>
+                <h4 class="b-text">Very bad , go to Azkaban >:( </h4>
+                <div class="b-circle">
+                ${correctAnswer} / ${data.length}                
+            </div>
+           `;
+  }
+}