Untitled
unknown
plain_text
3 days ago
4.7 kB
16
No Index
<!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() {
// 1. Grab the form and feedback <p>
const form = document.getElementById('btc-form');
const feedback = document.getElementById('btc-feedback');
// 2. Find all radio buttons in the form
const radioButtons = form.querySelectorAll("input[type='radio']");
// 3. Add a click listener to each radio button
radioButtons.forEach(function(radio) {
radio.addEventListener('click', function() {
// (a) Reset styles for *all* radio buttons so only the clicked ones show color
radioButtons.forEach(function(rb) {
rb.parentElement.style.backgroundColor = '';
});
// (b) Check if this radio is correct
if (radio.value === 'BTC') {
// Mark label green, show "Correct!"
radio.parentElement.style.backgroundColor = 'lightgreen';
feedback.textContent = 'Correct!';
} else {
// Mark label red, show "Incorrect!"
radio.parentElement.style.backgroundColor = 'lightcoral';
feedback.textContent = 'Incorrect!';
}
});
});
const form_2 = document.getElementById('inventor-form');
const feedback_2 = document.getElementById('inventor-feedback');
const inventor_input = form_2.querySelector("input[name='bitcoin_inventor']");
// Whenever the form is submitted:
form_2.addEventListener('submit', function(event) {
event.preventDefault();
if (inventor_input.value == 'Satoshi Nakamoto') {
inventor_input.style.backgroundColor = 'lightgreen';
feedback_2.textContent = 'Correct!';
}
else {
inventor_input.style.backgroundColor = 'lightcoral';
feedback_2.textContent = 'Incorrect!';
}
// Whenever user types or changes, text, restore default
inventor_input.addEventListener('input', function() {
inventor_input.style.backgroundColor = 'white';
feedback_2.textContent = '';
})
});
});
</script>
</head>
<body>
<div class="header">
<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 Bitcoin's ticker?</h3>
<hr>
<p>Select the correct answer below:</p>
<form id='btc-form'>
<label>
<input type='radio' name='bitcoin_ticker' value='BTC'> BTC
</label><br>
<label>
<input type='radio' name='bitcoin_ticker' value='BTK'> BTK
</label><br>
<label>
<input type='radio' name='bitcoin_ticker' value='BCH'> BCH
</label><br>
<label>
<input type='radio' name='bitcoin_ticker' value='ETH'> ETH
</label><br>
<p id='btc-feedback'></p>
</form>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here -->
<form id='inventor-form'>
<h3>Who invented Bitcoin?</h3>
<input type='text' name='bitcoin_inventor' placeholder='Your answer here'>
<button type='submit'>Submit</button>
<p id='inventor-feedback'></p>
</form>
</div>
</div>
</body>
</html>Editor is loading...
Leave a Comment