Geography Quiz

Developer
Yang Li
Size
2,136 Kb
Views
87,032
  1. Geography Quiz Previews
  2. Geography Quiz HTML Codes
  3. Geography Quiz CSS Codes
  4. Geography Quiz JS Codes

How do I make an geography quiz?

What is a geography quiz? How do you make a geography quiz? This script and codes were developed by Yang Li on 13 July 2022, Wednesday.

Geography Quiz Previews
IQ Test

Geography Quiz - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Geography Quiz</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Test Your Flag Knowledge!</h1>
<hr />
<p>Guess the country and click the flag to reveal the answer!</p>
<button id="resetBtn">Reset</button>
<div id="container"> <img id="flag1" src="http://www.flagsaustralia.com.au/images/Australia-1908-(blue)l.jpg" alt="" /> <div id="flag1name"> AUSTRALIA </div> <img id="flag2" src="http://www.smh.com.au/cqstatic/gjc835/30silverfernblue.png" alt="" /> <div id="flag2name"> NEW ZEALAND </div> <img id="flag3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Flag_of_Hong_Kong.svg/1280px-Flag_of_Hong_Kong.svg.png" alt="" /> <div id="flag3name"> HONG KONG </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Geography Quiz - Script Codes CSS Codes

#resetBtn { margin: 10px; font-size: 20px;
}
#container { display: flex; justify-content: space-around;
}
img { width: 30%; height: 200px;
}
#container div { display: none; width: 30%; height: 200px; border: 1px dotted grey; font-size: 30px; justify-content: center; align-items: center;
}

Geography Quiz - Script Codes JS Codes

var australia = document.getElementById("flag1");
var nz = document.getElementById("flag2");
var hk = document.getElementById("flag3");
var ausName = document.getElementById("flag1name");
var nzName = document.getElementById("flag2name");
var hkName = document.getElementById("flag3name");
australia.onclick = function() { australia.style.display = "none"; ausName.style.display = "flex";
}
nz.onclick = function() { nz.style.display = "none"; nzName.style.display = "flex";
}
hk.onclick = function() { hk.style.display = "none"; hkName.style.display = "flex";
}
document.getElementById("resetBtn").onclick = function() { australia.style.display = "flex"; nz.style.display = "flex"; hk.style.display = "flex"; ausName.style.display = "none"; nzName.style.display = "none"; hkName.style.display = "none";
}
Geography Quiz - Script Codes
Geography Quiz - Script Codes
Home Page Home
Developer Yang Li
Username aussieyang
Uploaded July 13, 2022
Rating 3
Size 2,136 Kb
Views 87,032
Do you need developer help for Geography Quiz?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yang Li (aussieyang) Script Codes
Name
CSS Photoframe
Responding Boxes
PokemonJourney
Googly Eye
Sunny Day Driving Starter
Birthday Party Starter
Battleships
My Friends Starter
Mac Bar
Hamburger Menu Starter
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!