<button id="button-1">#1</button>
<button id="button-2">#2</button>
<button id="button-3">#3</button>
<div id="result"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
let userAnswers = [];
const rightAnswers = ['button-2', 'button-3', 'button-1'];
const resultContainer = document.querySelector('#result');
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', () => {
resultContainer.style.border = 'none';
resultContainer.textContent = '';
const index = userAnswers.push(button.id) - 1;
const isRightAnswer = userAnswers[index] === rightAnswers[index];
const isLastAnswer = userAnswers.length === rightAnswers.length;
if (isLastAnswer || !isRightAnswer) {
resultContainer.style.border = '1px solid ' + (isRightAnswer ? 'green' : 'red');
resultContainer.textContent = isRightAnswer ? 'Right' : 'Wrong';
userAnswers = [];
}
});
});
});
</script>