<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Trivia!</title>
<script>
// TODO: Add code to check answers to questions
document.querySelector('#answer1').addEventListener('click', function() {
document.querySelector('#answer1').style.backgroundColor = green;
});
document.querySelector('#answer2').addEventListener('click', function() {
document.querySelector('#answer2').style.backgroundColor = red;
});
document.querySelector('#answer3').addEventListener('click', function() {
document.querySelector('#answer3').style.backgroundColor = red;
});
</script>
</head>
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>QUESTION?</h3>
<button id="answer1">answer1</button>
<button id="answer2">answer2</button>
<button id="answer3">answer3</button>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here -->
</div>
</div>
</body>
</html>