-
Notifications
You must be signed in to change notification settings - Fork 393
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1185 from isnehamondal/new
Guess country by flag: Issue no. #895
- Loading branch information
Showing
6 changed files
with
256 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
|
||
|