82 lines
2.8 KiB
HTML
82 lines
2.8 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>
|
||
|
|
// 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>
|