Merge pull request #361 from harshpareshbhaigosalya/updates

Geography Quiz Game Feature Update
iamrahulmahato · Oct 5, 2024 · 997ba04 · 997ba04
2 parents 0bf9e7a + ae2b16f
commit 997ba04
Show file tree

Hide file tree

Showing 5 changed files with 305 additions and 0 deletions.
diff --git a/assets/image/geography.png b/assets/image/geography.png
diff --git a/index.html b/index.html
@@ -428,6 +428,16 @@ <h3 class="card-heading">TRIVIA</h3>
                     </p>
                 </div>
             </a>
+            <a href="./projects/geography quiz/index.html" class="card">
+                <div class="card-cover">
+                    <img src="./assets/image/geography.png" alt="wordle logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">GeoQuest</h3>
+                    <p class="card-description">
+                        Explore the World, One Challenge at a Time!                    </p>
+                </div>
+            </a>
         </div>
     </section>
     <!-- ====================== Scroll to top ======================== -->

diff --git a/projects/geography quiz/index.html b/projects/geography quiz/index.html
@@ -0,0 +1,18 @@
+<head>
+    <title>The Geography Game</title>
+    <link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+
+    <div id="box" class="quiz-container" >
+      <h1>WELCOME TO THE GEOGRAPHY QUIZ</h1>
+      <h2>What quiz would you like to play?</h2>
+      <button onclick="capitals()"> Capitals </button>
+      <button onclick="flags()"> Flags </button>
+      <button onclick="populationNumber()"> Population </button>
+    </div>
+    <div id="previousAnswer">
+    </div>
+  </body>
diff --git a/projects/geography quiz/script.js b/projects/geography quiz/script.js
@@ -0,0 +1,203 @@
+let dataBase = [], QN = 0, correctAnswers = 0, t = 0, limit = 4;
+let i, cities, correct, flag, countries, population;
+let box = document.getElementById("box")
+let prev = document.getElementById("previousAnswer")
+
+fetch("https://restcountries.com/v2/all?fields=name,capital,population,flag")
+  .then(handleErrors)
+  .then(data => data.json())
+  .then(result => { dataBase = result })
+  .catch((error) => {
+    prev.innerHTML = error + " <br> Please try again later"
+    console.log(error)
+});
+
+function handleErrors(response) {
+    if (!response.ok) {
+      console.log(response.statusText)
+        throw Error(response.statusText);
+    }
+    return response;
+}
+
+function rmv() {
+  box.innerHTML = ""
+}
+
+function correctAudio() {
+  new Audio("https://www.raphburk.com/wp-content/uploads/2020/03/message.wav").play()
+}
+
+function wrongAudio() {
+  new Audio("https://www.raphburk.com/wp-content/uploads/2020/03/thunder.wav").play()
+}
+
+function finishAudio () {
+  new Audio("https://www.raphburk.com/wp-content/uploads/2020/03/checkpoint.wav").play()
+}
+
+function capitals() {
+  rmv()
+  QN++
+  i = Math.floor(Math.random() * dataBase.length)
+  if (dataBase[i].capital === "") {
+    cities = ["N/A"]
+    correct = "N/A"
+  } else {
+    cities = [dataBase[i].capital]
+    correct = dataBase[i].capital
+  }
+
+
+  while (cities.length < limit) {
+    let choice = dataBase[Math.floor(Math.random() * dataBase.length)].capital
+    if (!cities.includes(choice) || !cities.includes("N/A")) { 
+      if(choice === "") {
+        cities.push("N/A")
+      } else {
+        cities.push(choice)
+      }
+    }
+  }
+
+  cities.sort()
+
+  box.innerHTML += `
+    <h1>Question number: ${QN}</h1>
+    <h2>What is the capital of <b>${dataBase[i].name}?</b></h2>
+    <div id="buttons"></div>`
+
+  cities.map(city => {
+    document.getElementById("buttons").innerHTML += `
+      <button onclick="testcapital(\`${city}\`)">${city}</button>` 
+  })
+}
+
+function testcapital (el) {
+  rmv()
+  if (el == correct){
+    correctAudio()
+    prev.innerHTML = `<h2 class="correct"> PREVIOUS QUESTION : <br>
+                      YES! the Capital of <b>${dataBase[i].name}</b> is <b>${correct}</b>!</h2>`
+    correctAnswers ++
+    if(QN % 10 != 0){ capitals() } 
+    else { finish() }
+  } else {
+    wrongAudio()
+    prev.innerHTML = `<h2 class ="wrong"> PREVIOUS QUESTION : <br>
+                      NO, the Capital of <b>${dataBase[i].name}</b> is <b>${correct}</b></h2>`
+    if(QN % 10 != 0){ capitals() } 
+    else { finish() }
+  }
+}
+
+function flags () {
+  rmv()
+  QN++
+  i = Math.floor(Math.random() * dataBase.length)
+  countries = [dataBase[i].name]
+  correct = dataBase[i].name
+
+  while (countries.length < limit) {
+    let choice = dataBase[Math.floor(Math.random() * dataBase.length)].name
+    if (!countries.includes(choice)) { countries.push(choice) }
+  }
+
+  countries.sort()
+
+  box.innerHTML += `
+    <h1>Question number: ${QN}</h1>
+    <h2>What country does this flag belongs to?</h2>
+    <img src="${dataBase[i].flag}">
+    <div id="buttons"></div>`
+
+  countries.map(country => {
+    document.getElementById("buttons").innerHTML += `
+      <button onclick="testflag(\`${country}\`)">${country}</button>`
+  })
+}
+
+function testflag (el) {
+  rmv()
+  if (el == correct){
+    correctAudio()
+    prev.innerHTML = `
+      <h2 class="correct"> PREVIOUS QUESTION : <br>
+      YES! it is the flag of <b>${dataBase[i].name}</b>!</h2>
+      <img class="mini" src ="${dataBase[i].flag}"></img>`
+    correctAnswers ++
+    if(QN % 10 != 0){ flags() } 
+    else { finish() }
+
+  } else {
+    wrongAudio()
+    prev.innerHTML = `
+      <h2 class ="wrong"> PREVIOUS QUESTION : <br>
+      NO, it was the flag of <b>${dataBase[i].name}</b></h2>
+      <img class="mini" src ="${dataBase[i].flag}"></img>`
+    if(QN % 10 != 0){ flags() } 
+    else { finish() }
+  }
+}
+
+function populationNumber() {
+  rmv()
+  QN++
+  i = Math.floor(Math.random() * dataBase.length)
+  population = [`${Math.round(dataBase[i].population / 1000000).toLocaleString('en')}`]
+  correct = `${Math.round(dataBase[i].population / 1000000).toLocaleString('en')}`
+
+  while (true) {
+    let idx = Math.floor(Math.random() * dataBase.length)
+    let choice = `${Math.round(dataBase[idx].population / 1000000).toLocaleString('en')}`
+    if (population.length == limit) { break }
+    if (!population.includes(choice)) { population.push(choice) }
+  }
+
+  population.sort()
+
+  box.innerHTML += `
+    <h1>Question number: ${QN}</h1>
+    <h2>What is the population of ${dataBase[i].name}?<br>Rounded in millions</h2>
+    <div id="buttons"></div>`
+
+  population.map(pop => {
+    document.getElementById("buttons").innerHTML += `
+    <button onclick="testpopulation(\`${pop}\`)">${pop}</button>` 
+  })
+}
+
+function testpopulation(el) {
+  rmv()
+  if (el == correct){
+    correctAudio()
+    prev.innerHTML = `
+      <h2 class="correct"> PREVIOUS QUESTION : <br>
+      YES! The population of <b>${dataBase[i].name} is ${dataBase[i].population.toLocaleString('en')}</b>!</h2>`
+    correctAnswers ++
+    if (QN % 10 != 0) { populationNumber() } 
+    else { finish() }
+
+  } else {
+    wrongAudio()
+    prev.innerHTML = `
+      <h2 class ="wrong"> PREVIOUS QUESTION : <br>
+      NO, it was the flag of <b>${dataBase[i].name} is ${dataBase[i].population.toLocaleString('en')}</b></h2>`
+    if (QN % 10 != 0) { populationNumber() } 
+    else { finish() }
+  }
+}
+
+function finish() {
+  finishAudio()
+  box.innerHTML += `
+    <h1>Bravo!<br>
+    You finished the test!</h1>
+    <h2>Your Score is <b>${correctAnswers}/${QN}</b></h2>
+    <h3>Are you ready for 10 more questions?</h3>
+    <button id="capitals" onclick="capitals()">Capitals</button>
+    <button id="flags" onclick="flags()">Flags</button>
+    <button id="population" onclick="populationNumber()">Population</button>`
+  prev.innerHTML = ``
+
+}
diff --git a/projects/geography quiz/style.css b/projects/geography quiz/style.css
@@ -0,0 +1,74 @@
+body {
+  background-color: rgb(0, 188, 161);
+  background-size: cover;
+  width: auto;
+    height: fit-content;
+    margin: 100px auto;
+    text-align: center;
+    font-size: 20px;
+    font-family: 'Dosis', cursive; 
+}
+.quiz-container {
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 15px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+  max-width: 700px;
+   margin: 100px auto; 
+  padding: 30px;
+  text-align: center; 
+  animation: fadeIn 1s ease-in-out;
+}
+img {
+  width : 300px;
+  border : 2px solid black;
+}
+
+.mini {
+  width : 100px;
+  border : 1px solid black;
+}
+#questionNumber {
+    font-family: inherit;
+    margin : 10px;
+    text-align: center;
+}
+
+#question {
+    font-family: inherit;
+    margin : 10px;
+    text-align: center;
+}
+
+#previousAnswer {
+  width: auto;
+  height: fit-content;
+  margin: 100px auto;
+  text-align: center;
+  font-size: 20px;
+  font-family: inherit; 
+}
+
+button {
+  background-color: #e7e7e7; 
+  color: black;
+  border: none;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
+
+.correct {
+  border : 2px solid green;
+  border-radius : 30%;
+}
+
+.wrong {
+  border : 2px solid red;
+  border-radius : 30%;
+}
+
+