71 lines
2.7 KiB
HTML
71 lines
2.7 KiB
HTML
<!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>
|
|
|
|
document.addEventListener('DOMContentLoaded', function(){
|
|
|
|
// Part 1
|
|
let buttons = document.querySelectorAll('button');
|
|
buttons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
if(button == button11){
|
|
button.style.backgroundColor = 'green';
|
|
answer.textContent = 'Correct!';
|
|
}
|
|
else{
|
|
button.style.backgroundColor = 'red';
|
|
answer.textContent = 'Incorrect';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Part 2
|
|
let submit = document.querySelector('#submit');
|
|
submit.addEventListener('click', () => {
|
|
if (document.querySelector('#field').value.toUpperCase() == 'SWITZERLAND') {
|
|
submit.style.backgroundColor = 'green';
|
|
} else {
|
|
submit.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>What is the approximate ratio of people to sheep in New Zealand?</h3>
|
|
<button id="button61">6 people per 1 sheep</button>
|
|
<button id="button31">3 people per 1 sheep</button>
|
|
<button id="button11">1 people per 1 sheep</button>
|
|
<button id="button63">6 people per 3 sheep</button>
|
|
<button id="button66">6 people per 6 sheep</button>
|
|
<p id="answer"></p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Part 2: Free Response</h2>
|
|
<hr>
|
|
<h3>In which country is it illegal to own only one guinea pig, as a lone guinea pig might get lonely?</h3>
|
|
<form>
|
|
<input autocomplete="off" autofocus id="field" type="text">
|
|
<input id="submit" type="submit" value="Check Answer">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|