CS50_Labs/Lab8/trivia/index.html

82 lines
2.8 KiB
HTML
Raw Permalink Normal View History

2024-08-09 17:43:54 +00:00
<!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.addEventListener('DOMContentLoaded', function() {
// check for red/green buttons
let ok = document.querySelector('.ok')
document.querySelector('.ok').onclick = function() {
ok.style.backgroundColor = 'green';
document.querySelector("#feedback1").innerHTML = "Correct";
};
let noks = document.querySelectorAll('.nok')
for(let i = 0; i < noks.length; i++){
noks[i].addEventListener("click",function(){
noks[i].style.backgroundColor = 'red';
document.querySelector("#feedback1").innerHTML = "Incorrect";
});
};
// check for text field
document.querySelector("#check").addEventListener("click",function(){
let input = document.querySelector("input");
if (input.value === "Switzerland"){
input.style.backgroundColor = "green";
document.querySelector("#feedback2").innerHTML = "Correct";
} else {
input.style.backgroundColor = "red";
document.querySelector("#feedback2").innerHTML = "Incorrect";
}
});
});
</script>
</head>
<body>
<div class="jumbotron">
<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>
<button class = "nok">6 poeple per 1 sheep</button>
<button class = "ok">1 person per 6 sheeps</button>
<button class = "nok">3 poeple per 1 sheep</button>
<button class = "nok">1 person per 1 sheep</button>
<button class = "nok">1 person per 3 sheeps</button>
<p id="feedback1"></p>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here -->
<h3>In which country is it illegal to own only one guinea pig, as alone guinea pig might get lonely.</h3>
<input type="text"></input>
<button id="check">Check Answer</button>
<p id="feedback2"></p>
</div>
</div>
</body>
</html>