<!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>
// 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 answer1 = "1 person per 6 sheep";
const answer2 = "switzerland";
// HTML loads top-down, so wait until the whole page is loaded to find elements!
document.addEventListener('DOMContentLoaded', function() {
// create an 'onlick' 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 = 'TODO';
// if button is already selected
if (choice[key]) {
// reset button button from selected to unselected (eg, '#a':false)
}
// else button has not yet been clicked
else {
// TODO: set button to clicked
// TODO: evaluate button correctness -> change color of button to green/red if correct/incorrect
}
}
}
// create an 'onclick' listener for the form button
document.querySelector('#submit').onclick = function() {
// TODO: get the response field from the form
const input = 'TODO';
// helper variables for the next TODO
const correct = 'Correct :)';
const incorrect = 'Incorrect :(';
// TODO: Evaluate response and update the paragraph element below the form to correct/incorrect with color green/red
// prevent the form from 'submitting' and reloading the page
return false;
}
// TODO: If input field of form becomes empty (eg, via backspace), reset it!
});
</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>