In this post, I’ll share the solution to the CS50 labs 8 Trivia problem. So, in this problem, we need to write a website that lets users answer trivia questions.
For this problem, we must design a website using HTML, CSS, and Javascript to let users answer trivia questions.
Here are the HTML & CSS code and the Javascript code of this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<title>Trivia!</title>
<style>
/* Base styles */
body {
background-color: #fff;
color: #212529;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin: 0;
text-align: left;
font-family: 'Montserrat', sans-serif;
}
/* Container layout */
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
max-width: 960px;
}
/* Header styling */
.header {
background-color: #477bff;
color: #fff;
margin-bottom: 2rem;
padding: 2rem 1rem;
text-align: center;
}
/* Section styling */
.section {
padding: 0.5rem 2rem 1rem 2rem;
margin-bottom: 1rem;
border-radius: 0.25rem;
}
.section:hover {
background-color: #f5f5f5;
transition: background-color 0.15s ease-in-out;
}
/* Typography */
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 48px;
margin: 0;
}
/* Button styles */
button,
input[type="submit"] {
background-color: #d9edff;
border: 1px solid transparent;
border-radius: 0.25rem;
font-size: 0.95rem;
font-weight: 400;
line-height: 1.5;
padding: 0.375rem 0.75rem;
text-align: center;
transition: color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
vertical-align: middle;
cursor: pointer;
margin: 0.25rem;
}
button:hover,
input[type="submit"]:hover {
background-color: #bce0ff;
}
/* Input styles */
input[type="text"] {
line-height: 1.8;
width: 25%;
padding: 0.375rem 0.75rem;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out;
}
input[type="text"]:hover {
background-color: #f5f5f5;
transition: background-color 0.15s ease-in-out;
}
input[type="text"]:focus {
outline: none;
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* Feedback messages */
#msg,
#msg2 {
color: #666;
margin: 1rem 0;
font-size: 1.25rem;
}
</style>
</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>
<h2 id="msg"></h2>
<button class="button">6 people per 1 sheep</button>
<button class="button">3 people per 1 sheep</button>
<button class="button">1 people per 1 sheep</button>
<button class="button">1 people per 3 sheep</button>
<button id="correct" class="button">1 people per 6 sheep</button>
</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>
<input type="text">
<button id="button">Check Answer</button>
<h2 id="msg2"></h2>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let correct_button = document.querySelector('#correct');
let incorrect_buttons = document.querySelectorAll('.button:not(#correct)');
let msg = document.querySelector('#msg');
let msg2 = document.querySelector('#msg2');
correct_button.addEventListener('click', function() {
correct_button.style.backgroundColor = 'green';
correct_button.style.color = 'white';
msg.innerHTML = 'Correct!';
});
incorrect_buttons.forEach(button => {
button.addEventListener('click', function() {
button.style.backgroundColor = 'red';
button.style.color = 'white';
msg.innerHTML = 'Incorrect';
});
});
document.querySelector('#button').addEventListener('click', function() {
let input = document.querySelector('input');
if (input.value.toLowerCase() === 'switzerland') {
input.style.backgroundColor = 'lightgreen';
msg2.innerHTML = 'Correct!';
} else {
input.style.backgroundColor = 'lightcoral';
msg2.innerHTML = 'Incorrect';
}
});
// Add keyboard support for the free response question
document.querySelector('input').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
document.querySelector('#button').click();
}
});
});
</script>
</body>
</html>Hope this helps you! If it did please consider sharing it with your friends!