Показать сообщение отдельно
  #8 (permalink)  
Старый 29.06.2023, 16:37
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,750

Что то типа такого соорудить
<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>

Последний раз редактировалось voraa, 29.06.2023 в 16:39.
Ответить с цитированием