JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<h2>Complete with the right forms</h2>

		<div class="exercise_body cat1-gray">
			<ol>
				<li>Who <input type="text" class="e2" data-answer="was saw"> (be) Marylin Monroe?<span class="e2-answer"></span></li>
				<li>My grandmother <input type="text" class="e2" data-answer="had"> (have) two sisters and brother.<span class="e2-answer"></span></li>
				<li>When did she <input type="text" class="e2" id="aa" data-answer="will die"> (die)?<span class="e2-answer"></span></li>
				<li>Mary <input type="text" class="e2" data-answer="studied"> (study) medicine at Medical University.<span class="e2-answer"></span></li>
				<li>She <input type="text" class="e2" data-answer="worked"> (work) as a secretary in 1992.<span class="e2-answer"></span></li>
				<li>Lisa and Jack <input type="text" class="e2" data-answer="went"> (go) to the cinema yesterday.<span class="e2-answer"></span></li>
				<li>Two people <input type="text" class="e2" data-answer="wanted"> (want) to jump out of the car, but they couldn't.<span class="e2-answer"></span></li>
				<li>Mike <input type="text" class="e2" data-answer="drove"> (drive) into the park last week.<span class="e2-answer"></span></li>
				<li>Kate <input type="text" class="e2" data-answer="thanked"> (thank) Andy for his help.<span class="e2-answer"></span></li>
				<li>The sky turned grey, then it <input type="text" class="e2" data-answer="began"> (begin) to rain.<span class="e2-answer"></span></li>
			</ol>
	 </div>
	 <input id="checkAnswer-e2" type="submit" class="submit" value="Check">
 	 <input id="showAnswer-e2" type="submit" class="submit" value="Show answers">
	 <input id="reset-e2" type="submit" class="submit" value="Reset">

CSS

.exer-input-wrongAnswer{
  border: 1px solid red;
}

JavaScript

var e2inputs = document.querySelectorAll('.e2')

document.getElementById('checkAnswer-e2').addEventListener('click', function () {
  e2inputs.forEach(function (input) {
      if (input.value.trim().toLowerCase() !== input.dataset.answer) {
        input.classList.add('exer-input-wrongAnswer');
      } else {
        input.classList.remove('exer-input-wrongAnswer');
      }
    })
});

document.getElementById('showAnswer-e2').addEventListener('click', function () {
  e2inputs.forEach(function (input) {
    var answerElementt = input.parentNode.querySelector('.e2-answer')
      answerElementt.textContent = '[ ' + input.dataset.answer + ' ]'
  })
})

document.getElementById('reset-e2').addEventListener('click', function () {
  e2inputs.forEach(function (input) {
    var answerElementt = input.parentNode.querySelector('.e2-answer')
      answerElementt.textContent = '';
        input.classList.remove('exer-input-wrongAnswer');
  })
})