fix this code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Quiz</title>
<link rel="stylesheet" type="text/css" href="style.sheet" />
</head>
<body>
<h2>What is the capital of France?</h2>
<button onclick="checkAnswer('Paris')">Paris</button>
<button onclick="checkAnswer('London')">London</button>
<button onclick="checkAnswer('Berlin')">Berlin</button>
<script>
function checkAnswer(answer) {
if (answer === "Paris") {
document.getElementById("result").innerHTML = "Correct!";
} else {
document.getElementById("result").innerHTML =
"Incorrect. Please try again.";
}
}
</script>
</body>
</html>
```
In the given code, there are two issues that need to be fixed:
1. The link to the stylesheet is incorrect. The href should be pointing to a CSS file, not "style.sheet".
2. There is no element with the id "result" in the HTML, so trying to update its innerHTML in the checkAnswer function will throw an error.
Here is the corrected code:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h2>What is the capital of France?</h2>
<button onclick="checkAnswer('Paris')">Paris</button>
<button onclick="checkAnswer('London')">London</button>
<button onclick="checkAnswer('Berlin')">Berlin</button>
<div id="result"></div>
<script>
function checkAnswer(answer) {
if (answer === "Paris") {
document.getElementById("result").innerHTML = "Correct!";
} else {
document.getElementById("result").innerHTML =
"Incorrect. Please try again.";
}
}
</script>
</body>
</html>
```
Make sure to create a separate CSS file named "style.css" and define any styling for the quiz elements there.