Что то типа такого соорудить
<div class="exercise">
<p>- God bless you for <input class="exercise_input" type="text"> (say) that.
<span class="result"></span>
</p>
......
</div>
<button class="check_button" >Check</button>
<script>
const correctAnswers = ['saying', ....]; // список правильных ответов
const inputs = document.querySelectorAll('input.exercise_input');
const results = document.querySelectorAll('span.result');
const goodCommentArray = ['right', 'correct', 'great!'];
const badCommentArray = ['wrong', 'try again', 'sorry'];
function proverit(){
inputs.forEach ((input, ni) => {
const needtest = input.dataset.test ?? ''
if (needtest) { // нужно ли проверять?
const userAnswer = input.value.toLowerCase();
if (userAnswer === '') {
results[ni].textContent = '';
results[ni].classList.remove('correct', 'wrong', 'tip')
} else if (userAnswer === correctAnswers[ni]) {
results[ni].textContent = goodComment();
results[ni].classList.remove('wrong', 'tip');
results[ni].classList.add('correct');
} else {
results[ni].textContent = badComment();
results[ni].classList.remove('correct');
results[ni].classList.add('wrong', 'tip');
}
}
input.dataset.test = '';
})
}
inputs.forEach ((input) => {
input.addEventListener('input', ()=> this.dataset.test = '1') // ставим флаг, что надо проверить
});
document.querySelector('check_button').addEventListener('click', proverit);
</script>