<!DOCTYPE html>
<script>
// TODO: Add code to check answers to questions
//run the script once the DOM is loaded
document.addEventListener('DOMContentloaded', function(){
//when correct answer is clicked change button colour to green
let correct = document.querySelector('.correct');
correct.addEventListner('click', function(){
correct.style.backgroundColor = 'green';
document.querySelector('#feedback1').innerHTML = 'Correct!';
});
//When any incorrect answer is clicked, change color to red.
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').addEventListner('click', function(){
let input = document.querySelector('input');
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>
<!-- TODO: Add multiple choice question here -->
<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>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here -->
<h3>In which country is it illegal to own one guinea pig, as a lone guinea pig might be lonely?</h3>
<input type="text"></input>
<button id="check">Check Answer</button>
<p id="feedback2"></p>
</div>
</div>
</body>
This is the html and javascript code for my Trivia website which has 2 questions. The first question has 4 buttons containing 4 options out of which there is only 1 correct answer. And the second question is text based free response answer. When I click on the buttons for the question 1 or the "Check answer" button for question 2 nothing happens. Any help would be appreciated. Also I am new to stack overflow and this is my first question so if it's formatted incorrectly kindly excuse.
Aucun commentaire:
Enregistrer un commentaire