<!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 Solution!</title>
<script>
// define dictionaries mapping button id 'keys' to T/F if selected 'values'
let choice = {'#a':false, '#b':false, '#c':false, '#d':false, '#e':false};
// let vars can be updated, const have greater scope
const answer1 = "1 person per 6 sheep";
const answer2 = "switzerland";
// HTML loads top-down, wait until the whole page is loaded to find elements!
document.addEventListener('DOMContentLoaded', function() {
// create an 'onclick' listener for each multiple-choice button
for (const key in choice) {
document.querySelector(key).onclick = function() {
// TODO: store a reference to the button that was clicked
const btn = document.querySelector(key);
if (choice[key]) {
// reset button button from clicked to unclicked
choice[key] = false;
btn.style.backgroundColor = '';
}
else {
// TODO: set button to clicked
choice[key] = true;
// TODO: evaluate button correctness -> change color
if (btn.innerHTML == answer1) {
btn.style.backgroundColor = 'green';
}
else {
btn.style.backgroundColor = 'red';
}
}
}
}
// create an 'onclick' listener for the form button
document.querySelector('#submit').onclick = function() {
// TODO: get the response field from the form
const input = document.querySelector('#ans');
// TODO: Evaluate response and update the paragraph element below the form to correct/incorrect with color green/red
const correct = 'Correct :)';
const incorrect = 'Incorrect :(';
if (input.value.toLowerCase() == answer2) {
document.querySelector('#rsp').innerHTML = 'Correct :)';
document.querySelector('#rsp').style.color = 'green';
} else {
document.querySelector('#rsp').innerHTML = 'Incorrect :(';
document.querySelector('#rsp').style.color = 'red';
}
// prevent the form from 'submitting' and reloading the page
return false;
}
// TODO: If input field of form becomes empty, reset it!
document.querySelector('#ans').onkeyup = function() {
let input = document.querySelector('#ans');
if (input.value == '') {
input.style.backgroundColor = '';
document.querySelector('#rsp').innerHTML = '';
}
}
});
</script>
</head>
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<!-- TODO: Add multiple choice question here -->
<h3>What is the approximate ratio of people to sheep in New Zealand?</h3>
<table>
<tr>
<td><button id="a">6 people per 1 sheep</button></td>
<td><button id="b">3 people per 1 sheep</button></td>
<td><button id="c">1 person per 1 sheep</button></td>
<td><button id="d">1 person per 3 sheep</button></td>
<td><button id="e">1 person per 6 sheep</button></td>
</tr>
</table>
</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 type="text" id="ans">
<button id="submit">Check Answer</button>
</form>
<p id="rsp"></p>
</div>
</div>
</body>
</html>