Guess The Country Game Free Script Code
6 months ago - Updated
Guess The Country Game Free Script Code
<!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 Quiz</title>
<!-- Bootstrap CSS -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css"
rel="stylesheet"
/>
<!-- SweetAlert2 CSS -->
<link
href="https://unpkg.com/[email protected]/dist/sweetalert2.min.css"
rel="stylesheet"
/>
<style>
body {
background: linear-gradient(135deg, #1e3c72, #2a5298);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: "Arial", sans-serif;
}
.container {
background: rgba(0, 0, 0, 0.85);
padding: 30px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
width: 90%;
max-width: 500px;
}
#flag {
width: 220px;
height: auto;
margin: 20px auto;
display: block;
border: 4px solid #ffffff;
border-radius: 10px;
}
.option-btn {
margin: 10px 0;
width: 100%;
font-weight: bold;
border-radius: 50px;
transition: transform 0.2s ease-in-out;
}
.option-btn:hover {
transform: scale(1.05);
opacity: 0.9;
}
.progress-bar {
background-color: #4caf50;
transition: width 0.4s ease;
}
.score {
font-size: 1.2rem;
margin: 10px 0;
}
.btn-custom {
background-color: #ffffff;
color: #4caf50;
}
.btn-custom:hover {
background-color: #f57c00;
color: #ffffff;
}
</style>
</head>
<body>
<div class="container">
<h1>🌍 Guess the Flag Quiz</h1>
<p class="score" id="score">Score: 0 | Total: 0</p>
<div class="progress my-3">
<div
class="progress-bar"
role="progressbar"
id="progress-bar"
style="width: 0%"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<img id="flag" src="" alt="Country Flag" class="img-fluid" />
<div id="options" class="mt-3"></div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.min.js"></script>
<script>
const countries = {
AF: "Afghanistan",
AL: "Albania",
DZ: "Algeria",
AS: "American Samoa",
AD: "Andorra",
AO: "Angola",
AI: "Anguilla",
AQ: "Antarctica",
AG: "Antigua and Barbuda",
AR: "Argentina",
AM: "Armenia",
AW: "Aruba",
AU: "Australia",
AT: "Austria",
AZ: "Azerbaijan",
BS: "Bahamas",
BH: "Bahrain",
BD: "Bangladesh",
BB: "Barbados",
BY: "Belarus",
BE: "Belgium",
BZ: "Belize",
BJ: "Benin",
BM: "Bermuda",
BT: "Bhutan",
BO: "Bolivia",
BA: "Bosnia and Herzegovina",
BW: "Botswana",
BR: "Brazil",
IO: "British Indian Ocean Territory",
BN: "Brunei Darussalam",
BG: "Bulgaria",
BF: "Burkina Faso",
BI: "Burundi",
CV: "Cabo Verde",
KH: "Cambodia",
CM: "Cameroon",
CA: "Canada",
KY: "Cayman Islands",
CF: "Central African Republic",
TD: "Chad",
CL: "Chile",
CN: "China",
CO: "Colombia",
KM: "Comoros",
CG: "Congo",
CD: "Congo (DRC)",
CK: "Cook Islands",
CR: "Costa Rica",
HR: "Croatia",
CU: "Cuba",
CY: "Cyprus",
CZ: "Czech Republic",
DK: "Denmark",
DJ: "Djibouti",
DM: "Dominica",
DO: "Dominican Republic",
EC: "Ecuador",
EG: "Egypt",
SV: "El Salvador",
GQ: "Equatorial Guinea",
ER: "Eritrea",
EE: "Estonia",
SZ: "Eswatini",
ET: "Ethiopia",
FJ: "Fiji",
FI: "Finland",
FR: "France",
GA: "Gabon",
GM: "Gambia",
GE: "Georgia",
DE: "Germany",
GH: "Ghana",
GR: "Greece",
GD: "Grenada",
GT: "Guatemala",
GN: "Guinea",
GW: "Guinea-Bissau",
GY: "Guyana",
HT: "Haiti",
HN: "Honduras",
HK: "Hong Kong",
HU: "Hungary",
IS: "Iceland",
IN: "India",
ID: "Indonesia",
IR: "Iran",
IQ: "Iraq",
IE: "Ireland",
IL: "Israel",
IT: "Italy",
JM: "Jamaica",
JP: "Japan",
JO: "Jordan",
KZ: "Kazakhstan",
KE: "Kenya",
KI: "Kiribati",
KP: "North Korea",
KR: "South Korea",
KW: "Kuwait",
KG: "Kyrgyzstan",
LA: "Laos",
LV: "Latvia",
LB: "Lebanon",
LS: "Lesotho",
LR: "Liberia",
LY: "Libya",
LI: "Liechtenstein",
LT: "Lithuania",
LU: "Luxembourg",
MG: "Madagascar",
MW: "Malawi",
MY: "Malaysia",
MV: "Maldives",
ML: "Mali",
MT: "Malta",
MH: "Marshall Islands",
MR: "Mauritania",
MU: "Mauritius",
MX: "Mexico",
FM: "Micronesia",
MD: "Moldova",
MC: "Monaco",
MN: "Mongolia",
ME: "Montenegro",
MA: "Morocco",
MZ: "Mozambique",
MM: "Myanmar",
NA: "Namibia",
NR: "Nauru",
NP: "Nepal",
NL: "Netherlands",
NZ: "New Zealand",
NI: "Nicaragua",
NE: "Niger",
NG: "Nigeria",
MK: "North Macedonia",
NO: "Norway",
OM: "Oman",
PK: "Pakistan",
PW: "Palau",
PS: "Palestine",
PA: "Panama",
PG: "Papua New Guinea",
PY: "Paraguay",
PE: "Peru",
PH: "Philippines",
PL: "Poland",
PT: "Portugal",
QA: "Qatar",
RO: "Romania",
RU: "Russia",
RW: "Rwanda",
WS: "Samoa",
SM: "San Marino",
ST: "Sao Tome and Principe",
SA: "Saudi Arabia",
SN: "Senegal",
RS: "Serbia",
SC: "Seychelles",
SL: "Sierra Leone",
SG: "Singapore",
SK: "Slovakia",
SI: "Slovenia",
SB: "Solomon Islands",
SO: "Somalia",
ZA: "South Africa",
ES: "Spain",
LK: "Sri Lanka",
SD: "Sudan",
SR: "Suriname",
SE: "Sweden",
CH: "Switzerland",
SY: "Syria",
TW: "Taiwan",
TJ: "Tajikistan",
TZ: "Tanzania",
TH: "Thailand",
TL: "Timor-Leste",
TG: "Togo",
TO: "Tonga",
TT: "Trinidad and Tobago",
TN: "Tunisia",
TR: "Turkey",
TM: "Turkmenistan",
TV: "Tuvalu",
UG: "Uganda",
UA: "Ukraine",
AE: "United Arab Emirates",
GB: "United Kingdom",
US: "United States",
UY: "Uruguay",
UZ: "Uzbekistan",
VU: "Vanuatu",
VA: "Vatican City",
VE: "Venezuela",
VN: "Vietnam",
YE: "Yemen",
ZM: "Zambia",
ZW: "Zimbabwe",
};
let currentCountryCode;
let correctCount = 0;
let totalCount = 0;
function loadProgress() {
correctCount = parseInt(getCookie("correctCount")) || 0;
totalCount = parseInt(getCookie("totalCount")) || 0;
updateUI();
}
function saveProgress() {
setCookie("correctCount", correctCount, 7);
setCookie("totalCount", totalCount, 7);
}
function startGame() {
const countryCodes = Object.keys(countries);
currentCountryCode =
countryCodes[Math.floor(Math.random() * countryCodes.length)];
// Show SweetAlert loading while the flag is loading
Swal.fire({
title: "Loading...",
text: "Please wait while we load the flag.",
showConfirmButton: false,
didOpen: () => {
Swal.showLoading();
},
});
// Directly use the provided URL for the flag image
const flagImage = document.getElementById("flag");
flagImage.src = `https://openapibox.com/api/countryflagapi/7TE4P3Y5781ZW6EZH/get?country=${currentCountryCode}`;
flagImage.onload = () => {
Swal.close(); // Close the loading screen when the image has loaded
generateOptions(currentCountryCode);
};
}
function generateOptions(correctCode) {
const optionsContainer = document.getElementById("options");
optionsContainer.innerHTML = "";
const correctAnswer = countries[correctCode];
const countryCodes = Object.keys(countries);
const options = new Set([correctAnswer]);
while (options.size < 4) {
const randomCountry =
countries[
countryCodes[Math.floor(Math.random() * countryCodes.length)]
];
options.add(randomCountry);
}
const shuffledOptions = Array.from(options).sort(
() => Math.random() - 0.5
);
shuffledOptions.forEach((option) => {
const button = document.createElement("button");
button.textContent = option;
button.className = "btn btn-custom option-btn";
button.onclick = () => checkAnswer(option, correctAnswer);
optionsContainer.appendChild(button);
});
}
function checkAnswer(selected, correct) {
totalCount++;
if (selected === correct) {
correctCount++;
Swal.fire({
icon: "success",
title: "Correct!",
text: `You guessed right! It's ${correct}.`,
timer: 2000,
showConfirmButton: false,
}).then(() => {
startGame(); // Start the next game after the message is closed
});
} else {
Swal.fire({
icon: "error",
title: "Wrong!",
text: `The correct answer was ${correct}.`,
timer: 2000,
showConfirmButton: false,
}).then(() => {
startGame(); // Start the next game after the message is closed
});
}
saveProgress();
updateUI();
}
function updateUI() {
document.getElementById(
"score"
).textContent = `Score: ${correctCount} | Total: ${totalCount}`;
// Update progress bar based on the score
const progress = (correctCount / totalCount) * 100;
const progressBar = document.getElementById("progress-bar");
progressBar.style.width = `${progress}%`;
progressBar.setAttribute("aria-valuenow", progress);
}
// Helper functions to manage cookies for progress tracking
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
function getCookie(name) {
const decodedCookie = decodeURIComponent(document.cookie);
const cookieArray = decodedCookie.split(";");
for (let i = 0; i < cookieArray.length; i++) {
let cookie = cookieArray[i].trim();
if (cookie.indexOf(name + "=") === 0) {
return cookie.substring(name.length + 1, cookie.length);
}
}
return "";
}
// Start the game when the page loads
window.onload = () => {
loadProgress();
startGame();
};
</script>
</body>
</html>
17 Views
Please sign in to like or unlike the article.
Writer
.jpg)
Zihadur Rahman
Article Tags
Free Scripts By Zihadur Rahman
Zihadur Rahman Dev
OpenAPI Box
Country API
Country Flag
Guess The Flag
Comments (0)