When users click on a button, text should appear that tells them whether they have clicked on the correct answer.
Here are the requirements for your quiz:
Include at least one question.
Include at least three possible answers for your question.
Include a message that indicates whether the correct button was clicked.
You can use CSS to add any stylistic elements that you would like to your web page.
When you have created your web page, test it. (Remember to try the wrong answers!) When you’re finished, click on the Share button, and click the Copy Sandbox Link button. Submit the link to the dropbox. If you cannot get the program to work properly, include a paragraph explaining what you did to try to fix it.
just using html and css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
margin: 10px;
font-size: 16px;
background-color: #337ab7;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Quiz Time!</h1>
<p>What is the capital of France?</p>
<button id="wrongAnswer1">London</button>
<button id="correctAnswer">Paris</button>
<button id="wrongAnswer2">Berlin</button>
<p id="message"></p>
<script>
document.getElementById("wrongAnswer1").addEventListener("click", function() {
document.getElementById("message").textContent = "Incorrect. Try again!";
});
document.getElementById("correctAnswer").addEventListener("click", function() {
document.getElementById("message").textContent = "Correct! Paris is the capital of France.";
});
document.getElementById("wrongAnswer2").addEventListener("click", function() {
document.getElementById("message").textContent = "Incorrect. Try again!";
});
</script>
</body>
</html>