kunjgit · kunjgit · Aug 10, 2024 · Aug 9, 2024 · Aug 9, 2024 · Aug 9, 2024
diff --git a/Games/Harry_Potter_Wizard_Quiz/README.md b/Games/Harry_Potter_Wizard_Quiz/README.md
@@ -0,0 +1,38 @@
+# **Harry_Potter_Wizard_Quiz** 
+
+---
+
+<br>
+
+## **Description 📃**
+This game is a quiz that asks a series of 10 questions related to the Harry Potter book series.
+- 
+
+## **functionalities 🎮**
+This is a quiz game.
+- 
+<br>
+
+## **How to play? 🕹️**
+We just have to click on the start button and the game will start playing automatically.
+- 
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+![Screenshot 2024-08-09 145254](https://github.com/user-attachments/assets/1062e08e-10c2-4201-b8b7-f71f29f4bf5d)
+
+![Screenshot 2024-08-09 141828](https://github.com/user-attachments/assets/781ade96-b615-48a3-abb0-f39e8cef365f)
+
+![Screenshot 2024-08-09 144901](https://github.com/user-attachments/assets/be252ff9-c94e-432f-a745-212aa05f8ca8)
+
+
+<br>
+
+## **Working video 📹**
+
+https://github.com/user-attachments/assets/fee060d2-bed3-46d9-b694-10564e3636db
+
+
diff --git a/Games/Harry_Potter_Wizard_Quiz/background.mp4 b/Games/Harry_Potter_Wizard_Quiz/background.mp4
diff --git a/Games/Harry_Potter_Wizard_Quiz/fonts/HarryP-MVZ6w.ttf b/Games/Harry_Potter_Wizard_Quiz/fonts/HarryP-MVZ6w.ttf
diff --git a/Games/Harry_Potter_Wizard_Quiz/index.html b/Games/Harry_Potter_Wizard_Quiz/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Harry Potter Wizard Quiz Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <video autoplay muted loop id="background-video">
+        <source src="background.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+    <div class="container">
+        <h1>Harry Potter Wizard Quiz Game</h1>
+        <div id="question-container">
+            <p id="question"></p>
+            <div id="answers"></div>
+        </div>
+        <div class="status">
+            <p>Score: <span id="score">0</span></p>
+            <p>Time Left: <span id="timer">30</span> seconds</p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Harry_Potter_Wizard_Quiz/script.js b/Games/Harry_Potter_Wizard_Quiz/script.js
@@ -0,0 +1,121 @@
+// Example data
+const questions = [
+  {
+    question: "How many people transformed into Harry Potter in the last book when Harry needed to be moved to the Weasley's house?",
+    answers: ["Seven", "Five", "Three", "Nine"],
+    correct: "Seven",
+  },
+  {
+    question: "What was the prize money of the Triwizard Tournament when Harry took part in it?",
+    answers: [ "500 Galleons", "2000 Galleons","1000 Galleons", "750 Galleons"],
+    correct: "1000 Galleons",
+  },
+  {
+    question: "Who gifted Harry his very first broomstick?",
+    answers: [ "Hagrid","Sirius Black", "Professor McGonagall", "Dumbledore"],
+    correct: "Sirius Black",
+  },
+  {
+    question: "What animal did the imposter Mad-Eye Moody convert Malfoy into?",
+    answers: ["Rat", "Cat", "Toad","Ferret" ],
+    correct: "Ferret",
+  },
+  {
+    question: "What was the first name of Professor Flitwick?",
+    answers: ["Filius", "Severus", "Albus", "Gilderoy"],
+    correct: "Filius",
+  },
+  {
+    question: "What was the favourite animal of Dolores Umbridge?",
+    answers: ["Owl","Cat",  "Rabbit", "Snake"],
+    correct: "Cat",
+  },
+  {
+    question: "What kind of creature was Professor Firenze?",
+    answers: [ "Goblin", "Elf","Centaur", "Werewolf"],
+    correct: "Centaur",
+  },
+  {
+    question: "What was James Potter's Animagus form?",
+    answers: ["Stag", "Dog", "Wolf", "Bear"],
+    correct: "Stag",
+  },
+  {
+    question: "What was the color of Harry Potter's eyes?",
+    answers: [ "Blue", "Brown","Green", "Gray"],
+    correct: "Green",
+  },
+   {
+    question: "What is the name of Harry Potter's pet owl?",
+    answers: ["Hedwig", "Scabbers", "Crookshanks", "Fawkes"],
+    correct: "Hedwig",
+  },
+
+
+];
+
+let currentQuestionIndex = 0;
+let score = 0;
+let timer;
+const timeLimit = 150;
+
+document.addEventListener("DOMContentLoaded", () => {
+  startGame();
+});
+
+function startGame() {
+  score = 0;
+  currentQuestionIndex = 0;
+  document.getElementById("score").textContent = score;
+  startTimer();
+  showQuestion();
+}
+
+function showQuestion() {
+  const question = questions[currentQuestionIndex];
+  document.getElementById("question").textContent = question.question;
+  const answersContainer = document.getElementById("answers");
+  answersContainer.innerHTML = "";
+  question.answers.forEach((answer) => {
+    const button = document.createElement("div");
+    button.textContent = answer;
+    button.classList.add("answer");
+    button.addEventListener("click", () => checkAnswer(answer));
+    answersContainer.appendChild(button);
+  });
+}
+
+function checkAnswer(selectedAnswer) {
+  const correctAnswer = questions[currentQuestionIndex].correct;
+  if (selectedAnswer === correctAnswer) {
+    score += 10;
+    document.getElementById("score").textContent = score;
+    // Add a sound effect or animation here
+  } else {
+    // Add a different sound effect or animation for incorrect answers
+  }
+  currentQuestionIndex++;
+  if (currentQuestionIndex < questions.length) {
+    showQuestion();
+  } else {
+    endGame();
+  }
+}
+
+function startTimer() {
+  let timeLeft = timeLimit;
+  document.getElementById("timer").textContent = timeLeft;
+  timer = setInterval(() => {
+    timeLeft--;
+    document.getElementById("timer").textContent = timeLeft;
+    if (timeLeft <= 0) {
+      clearInterval(timer);
+      endGame();
+    }
+  }, 1000);
+}
+
+function endGame() {
+  document.getElementById("question").textContent = "Game Over!";
+  document.getElementById("answers").innerHTML = "";
+}
diff --git a/Games/Harry_Potter_Wizard_Quiz/start.html b/Games/Harry_Potter_Wizard_Quiz/start.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Harry Potter Wizard Quiz Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <video autoplay muted loop id="background-video">
+        <source src="background.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+    <div class="startup-container">
+        <h1>Welcome to the Harry Potter Wizard Quiz Game!</h1>
+        <button id="start-button">Play</button>
+    </div>
+    <script>
+        document.getElementById('start-button').addEventListener('click', () => {
+            window.location.href = 'index.html'; // Redirect to the quiz game
+        });
+    </script>
+</body>
+
+</html>
diff --git a/Games/Harry_Potter_Wizard_Quiz/styles.css b/Games/Harry_Potter_Wizard_Quiz/styles.css
@@ -0,0 +1,103 @@
+@font-face {
+    font-family: HarryP-MVZ6w;
+    src: 
+         url('fonts/HarryP-MVZ6w.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+
+/* General Body Styles */
+body {
+    font-family:HarryP-MVZ6w, Arial, sans-serif;
+    background-color: #2e2e2e;
+     font-size: 18px;
+    color: #f0f0f0;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+/* Styles for Background Video */
+#background-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1; /* Place the video behind other content */
+}
+
+/* Styles for Startup Page */
+.startup-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    z-index: 1; /* Ensure the content is above the video */
+}
+
+#start-button {
+    padding: 15px 30px;
+    font-size: 1.2em;
+    color: #fff;
+    background-color: 	#c39a1c; /* Bright color to stand out */
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
+}
+
+#start-button:hover {
+    background-color: #e6b800; /* Slightly darker shade on hover */
+}
+
+#start-button:active {
+    transform: scale(0.98); /* Slightly shrink the button when clicked */
+}
+
+/* Styles for Quiz Page */
+.container {
+    max-width: 600px;
+    margin: auto;
+    padding: 20px;
+    background-color: #717679;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+h1 {
+    color:#641e1e;
+}
+
+#question {
+    font-size: 1.5em;
+    margin-bottom: 20px;
+}
+
+#answers {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.answer {
+    background-color: #444;
+    border: 1px solid #555;
+    border-radius: 5px;
+    padding: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.answer:hover {
+    background-color: #555;
+}
+
+.status {
+    margin-top: 20px;
+    font-size: 1.2em;
+}
diff --git a/README.md b/README.md
@@ -357,6 +357,7 @@ This repository also provides one such platforms where contributers come over an
 | [Am_I_the_number](https://github.com/kunjgit/GameZone/tree/main/Games/Am_I_the_number)   |
 
 |[Gem_Cruncher](https://github.com/kunjgit/GameZone/tree/main/Games/Gem_Cruncher)|
+|[Harry Potter Wizards Quiz](https://github.com/kunjgit/GameZone/tree/main/Games/Harry_Potter_Wizards_Quiz)|
 
  </center>
 

diff --git a/assets/images/Harry_Potter_Wizard_Quiz.png b/assets/images/Harry_Potter_Wizard_Quiz.png
diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json
@@ -3216,5 +3216,10 @@
     "gameTitle" : "Block Vault",
     "gameUrl": "Block_Vault",
     "thumbnailUrl": "Block_Vault.png"
+ },
+  "644":{
+    "gameTitle" : "Harry Potter Wizard Quiz",
+    "gameUrl": "Harry_Potter_Wizard_Quiz/start.html",
+    "thumbnailUrl": "Harry_Potter_Wizard_Quiz.png"
  }
 }
diff --git a/assets/js/index.js b/assets/js/index.js
@@ -3,7 +3,7 @@
 const generateLiTags = (gamesData, searchText = "") => {
   const liTags = [];
   searchText = searchText.trim().toLowerCase(); // Trim whitespace and convert to lowercase
-  let lengthOfJson = Object.keys(gamesData).length; // get the no. of games of Json to list them all
+  let lengthOfJson = Object.keys(gamesData).length+10; // get the no. of games of Json to list them all
   for (let tagNumber = 1; tagNumber <= lengthOfJson; tagNumber++) {
     const gameData = gamesData[tagNumber.toString()];