siim
/
cs50
mirror of https://github.com/me50/kukemuna.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

automated commit by submit50

This commit is contained in:
kukemuna 2024-03-30 21:55:32 +02:00
commit 6543f802a3
2 changed files with 142 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
index.html Normal file
View File

@ -0,0 +1,80 @@
<!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>
// Run sript once DOM is fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Change button color to green for (class) correct answer
let correct = document.querySelector('.correct');
correct.addEventListener('click', function() {
correct.style.backgroundColor = 'green';
document.querySelector('#feedback1').innerHTML = 'Correct!';
});
// Change button color to red for (class) incorrect answer
let incorrects = document.querySelectorAll('.incorrect');
for (let i = 0; i < incorrects.length; i++) {
incorrects[i].addEventListener('click', function() {
incorrects[i].style.backgroundColor = 'red';
document.querySelector('#feedback1').innerHTML = 'Incorrect!';
});
}
// Check free response submission
document.querySelector('#check').addEventListener('click', function() {
let input = document.querySelector('input');
if (input.value === 'Curly') {
input.style.backgroundColor = 'green';
document.querySelector('#feedback2').innerHTML = 'Correct!';
} else {
input.style.backgroundColor = 'red';
document.querySelector('#feedback2').innerHTML = 'Incorrect!';
}
});
});
</script>
</head>
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>Which dog made the first orbital flight?</h3>
<button class="incorrect">Albina</button>
<button class="incorrect">Mukha</button>
<button class="incorrect">Dezik</button>
<button class="incorrect">Lieza</button>
<button class="correct">Laika</button>
<p id="feedback1"></p>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<h3>What was it's real (english) name?</h3>
<input type="text"></input>
<button id="check">Check answer</button>
<p id="feedback2"></p>
</div>
</div>
</body>
</html>

62
styles.css Normal file
View File

@ -0,0 +1,62 @@
body {
background-color: #fff;
color: #212529;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin: 0;
text-align: left;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.header {
background-color: #3498db;
color: #fff;
margin-bottom: 2rem;
padding: 2rem 1rem;
text-align: center;
}
.section {
padding: 0.5rem 2rem 1rem 2rem;
}
.section:hover {
background-color: #f0f0f5;
transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 48px;
}
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;
}
input[type="text"] {
line-height: 1.8;
width: 25%;
}
input[type="text"]:hover {
background-color: #f5f5f5;
transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}