Merge pull request #1185 from isnehamondal/new

Guess country by flag: Issue no. #895
iamrahulmahato · Oct 15, 2024 · fbce5d1 · fbce5d1
2 parents d88a517 + 631b26c
commit fbce5d1
Show file tree

Hide file tree

Showing 6 changed files with 256 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -1039,6 +1039,18 @@ <h3 class="card-heading">Flashcard Quiz App</h3>
                         </p>
                     </div>
                 </a>
+
+                <a href="./projects/Guess the country by flag/index.html" class="card" target="_blank">
+                    <div class="card-cover">
+                        <img src="./projects/Guess the country by flag/intro.jpeg" alt="Flashcard Quiz App logo">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Guess the country by flag</h3>
+                        <p class="card-description">
+                            A fun flag-guessing game to learn geography through play!
+                        </p>
+                    </div>
+                </a>
 
 
 

diff --git a/projects/Guess the country by flag/bg.jpg b/projects/Guess the country by flag/bg.jpg
diff --git a/projects/Guess the country by flag/index.html b/projects/Guess the country by flag/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>Guess the Flag Game</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
+</head>
+<body>
+    <h1>Guess the Flag</h1>
+    <div class="game-container">
+        <div class="flag-container">
+            <img id="flag" alt="Country flag">
+        </div>
+        <div class="options">
+            <button class="option-button" id="option1"></button>
+            <button class="option-button" id="option2"></button>
+            <button class="option-button" id="option3"></button>
+            <button class="option-button" id="option4"></button>
+        </div>
+        <div id="result"></div>
+        <button id="nextButton">Next Flag</button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/projects/Guess the country by flag/intro.jpeg b/projects/Guess the country by flag/intro.jpeg
diff --git a/projects/Guess the country by flag/script.js b/projects/Guess the country by flag/script.js
@@ -0,0 +1,120 @@
+const flags = [
+    { country: "India", flagUrl: "https://flagcdn.com/w320/in.png" },
+    { country: "Canada", flagUrl: "https://flagcdn.com/w320/ca.png" },
+    { country: "Germany", flagUrl: "https://flagcdn.com/w320/de.png" },
+    { country: "Brazil", flagUrl: "https://flagcdn.com/w320/br.png" },
+    { country: "Japan", flagUrl: "https://flagcdn.com/w320/jp.png" },
+    { country: "Australia", flagUrl: "https://flagcdn.com/w320/au.png" },
+    { country: "United States", flagUrl: "https://flagcdn.com/w320/us.png" },
+    { country: "France", flagUrl: "https://flagcdn.com/w320/fr.png" },
+    { country: "United Kingdom", flagUrl: "https://flagcdn.com/w320/gb.png" },
+    { country: "Italy", flagUrl: "https://flagcdn.com/w320/it.png" },
+    { country: "Russia", flagUrl: "https://flagcdn.com/w320/ru.png" },
+    { country: "South Korea", flagUrl: "https://flagcdn.com/w320/kr.png" },
+    { country: "China", flagUrl: "https://flagcdn.com/w320/cn.png" },
+    { country: "Spain", flagUrl: "https://flagcdn.com/w320/es.png" },
+    { country: "Mexico", flagUrl: "https://flagcdn.com/w320/mx.png" },
+    { country: "Argentina", flagUrl: "https://flagcdn.com/w320/ar.png" },
+    { country: "Egypt", flagUrl: "https://flagcdn.com/w320/eg.png" },
+    { country: "Nigeria", flagUrl: "https://flagcdn.com/w320/ng.png" },
+    { country: "Kenya", flagUrl: "https://flagcdn.com/w320/ke.png" },
+    { country: "Turkey", flagUrl: "https://flagcdn.com/w320/tr.png" },
+    { country: "Saudi Arabia", flagUrl: "https://flagcdn.com/w320/sa.png" },
+    { country: "Indonesia", flagUrl: "https://flagcdn.com/w320/id.png" },
+    { country: "South Africa", flagUrl: "https://flagcdn.com/w320/za.png" },
+    { country: "New Zealand", flagUrl: "https://flagcdn.com/w320/nz.png" },
+    { country: "Sweden", flagUrl: "https://flagcdn.com/w320/se.png" }
+];
+
+let currentFlagIndex = 0;
+let correctCountry = '';
+const flagImg = document.getElementById('flag');
+const optionButtons = Array.from(document.getElementsByClassName('option-button'));
+const resultDiv = document.getElementById('result');
+const nextButton = document.getElementById('nextButton');
+
+// Load and display the flag and options
+function loadFlag() {
+    const currentFlag = flags[currentFlagIndex];
+    flagImg.src = currentFlag.flagUrl;
+    correctCountry = currentFlag.country;
+
+    // Create options array including the correct answer
+    let options = [correctCountry];
+
+    // Add 3 more random countries that are not the correct answer
+    while (options.length < 4) {
+        let randomCountry = flags[Math.floor(Math.random() * flags.length)].country;
+        if (!options.includes(randomCountry)) {
+            options.push(randomCountry);
+        }
+    }
+
+    // Shuffle the options so the correct answer isn't always first
+    shuffleArray(options);
+
+    // Assign options to buttons
+    optionButtons.forEach((button, index) => {
+        button.textContent = options[index];
+        button.disabled = false;
+        button.style.backgroundColor = "#007bff"; // Reset button color
+        button.onclick = () => checkAnswer(button);
+    });
+
+    // Hide result and next button
+    resultDiv.textContent = '';
+    nextButton.style.display = 'none';
+}
+
+// Check the answer and trigger confetti if correct
+function checkAnswer(button) {
+    const selectedCountry = button.textContent;
+    if (selectedCountry === correctCountry) {
+        button.style.backgroundColor = '#28a745'; // Green for correct answer
+        resultDiv.textContent = 'Correct!';
+        triggerConfetti(); // Call confetti effect
+    } else {
+        button.style.backgroundColor = '#dc3545'; // Red for wrong answer
+        resultDiv.textContent = `Oops! Better luck next time. The correct answer is ${correctCountry}.`;
+
+        // Add shake effect to the flag image
+        flagImg.classList.add('shake');
+
+        // Remove the shake effect after animation ends
+        setTimeout(() => {
+            flagImg.classList.remove('shake');
+        }, 500);
+    }
+
+    // Disable buttons after selecting an answer
+    optionButtons.forEach(btn => btn.disabled = true);
+    nextButton.style.display = 'inline-block'; // Show next button
+}
+
+// Trigger confetti effect
+function triggerConfetti() {
+    confetti({
+        particleCount: 100,
+        spread: 70,
+        origin: { y: 0.6 }
+    });
+}
+
+// Load the next flag
+function nextFlag() {
+    currentFlagIndex = (currentFlagIndex + 1) % flags.length;
+    loadFlag();
+}
+
+// Shuffle the options array
+function shuffleArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+}
+
+nextButton.addEventListener('click', nextFlag);
+
+// Load the first flag on page load
+loadFlag();
diff --git a/projects/Guess the country by flag/style.css b/projects/Guess the country by flag/style.css
@@ -0,0 +1,96 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-image: url("bg.jpg");
+    background-repeat: repeat;
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    flex-direction: column;
+}
+
+h1 {
+    margin-bottom: 50px;
+    font-size: 55px;
+}
+
+.game-container {
+    text-align: center;
+}
+
+.flag-container img {
+    width: 300px;
+    height: 200px;
+    border: 2px solid rgb(0, 0, 0);
+    margin-bottom: 20px;
+    border-radius: 10px;
+    box-shadow: 0 8px 0 8px rgba(0, 0, 0, 0.2);
+}
+
+.options {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.option-button {
+    margin: 5px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.option-button:hover {
+    background-color: #0056b3;
+}
+
+#result {
+    font-size: 20px;
+    margin-top: 20px;
+}
+
+#nextButton {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    display: none;
+}
+
+@keyframes shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    25% {
+        transform: translateX(-5px);
+    }
+    50% {
+        transform: translateX(5px);
+    }
+    75% {
+        transform: translateX(-5px);
+    }
+}
+
+.shake {
+    animation: shake 0.5s;
+}
+
+