The assignment that this is from is a lab and is pretty basic and the answer is given to us as a Walkthrough video; however, I followed the walk-through video exactly but for some reason, my code is not doing what it is supposed to.
We have to make a simple trivia page that has two questions. First question is supposed to be a multiple choice and second question is to enter text response.
For the first question, if a user clicks on a button with an incorrect answer, the button should turn red and text should appear beneath the question that says “Incorrect”.
If a user clicks on a button with the correct answer, the button should turn green and text should appear beneath the question that says “Correct!”.
For the second question, we are supposed to make it so that the field changes color when a user confirms their answer.
If the user types an incorrect answer and presses the confirmation button, the text field should turn red and text should appear beneath the question that says “Incorrect”.
If the user types the correct answer and presses the confirmation button, the input field should turn green and text should appear beneath the question that says “Correct!”.
I followed the directions precisely but for some reason my code is not working. It shows the elements properly but the Javascript features are not working. Maybe I am overlooking something.
Here is my HTML file:
<!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
// Listen for event of content loaded and then run the anonymous function that follows.
// When we click on the button for the correct answer, we do two things: 1) change the button to be green 2)add text that user
// question was answered correctly.
document.addEventListener('DOMContentLoaded', function() {
let correct = document.querySelector('.correct'); // selecting that button for correct answer. will select the only
// element with class name of '.correct' and store it inside variable
// correct.
correct.addEventListener('click', function () {
correct.style.backgroundColor = 'green';
document.querySelector('#feedback1').innerHTML = 'Correct!'; //# in #feedback mean id is feedback1
});
// When an incorrect answer is clicked change color to red and state Incorrect
let incorrects = document.querySelectorAll('.incorrect'); // will return an array of matches for any element that has
// a class of '.incorrect'
for (i = 0, i < incorrects.length, i++) {
incorrects[i].addEventListener('click', function () {
incorrects[i].style.backgroundColor = 'red';
document.querySelector('#feedback1').innerHTML = 'Incorrect';
});
}
// <input type="text" ></input>
// <button id = "check">Check Answer</button>
// <p id = "feedback2"></p>
document.querySelector('#check').addEventListener('click', function(){
let input = document.querySelector('input'); // to get access to input field were user was typing in their response
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>
<h3>What is the approximate ratio of people to sheep in New Zealand?</h3>
<button class = "incorrect">6 people per 1 sheep</button>
<button class = "incorrect">3 people per 1 sheep</button>
<button class = "incorrect">1 person per 1 sheep</button>
<button class = "incorrect">1 person per 3 sheep</button>
<button class = "correct">1 person per 6 sheep</button>
<p id = "feedback1"></p>
<!-- TODO: Add multiple choice question here -->
</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 guniea pig might get lonely?</h3>
<!-- TODO: Add free response question here -->
<input type="text" ></input>
<button id = "check">Check Answer</button>
<p id = "feedback2"></p>
</div>
</div>
</body>
</html>
And here is my CSS file:
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;
}
.jumbotron {
background-color: #477bff;
color: #fff;
margin-bottom: 2rem;
padding: 2rem 1rem;
text-align: center;
}
.section {
padding: 0.5rem 2rem 1rem 2rem;
}
.section:hover {
background-color: #f5f5f5;
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;
}
question from:
https://stackoverflow.com/questions/65838566/basic-javascript-css-html 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
