mirror of https://github.com/me50/kukemuna.git
81 lines
2.8 KiB
HTML
81 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>
|
||
|
|
|
||
|
|
// 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>
|