JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<h2>Choose "was" or "were"</h2>
			<ol>
				<li>I <select class="exer-input">
					<option value="-1"> </option>
					<option value="0">was</option>
					<option value="1">were</option>
				</select> in Canberra last spring.
			</li>

				<li>We <select class="exer-input">
					<option value="-1"> </option>
					<option value="0">was</option>
					<option value="1">were</option>
				</select> at school last Saturday.
			</li>

				<li>Tina <select class="exer-input">
					<option value="-1"> </option>
					<option value="0">was</option>
					<option value="1">were</option>
				</select> at home yesterday.
			</li>

				<li>He <select class="exer-input">
					<option value="-1"> </option>
					<option value="0">was</option>
					<option value="1">were</option>
				</select> happy.
			</li>

				<li>Robert and Stan <select class="exer-input">
					<option value="-1"> </option>
					<option value="0">was</option>
					<option value="1">were</option>
				</select> Garry's friends.
			</li>

				<li>You <select class="exer-input">
					<option value="-1"> </option>
					<option value="0">was</option>
					<option value="1">were</option>
				</select> very busy on Friday.
			</li>

				<li>They <select class="exer-input">
					<option value="-1"> </option>
					<option value="0">was</option>
					<option value="1">were</option>
				</select> in front of the supermarket.
			</li>

				<li>I <select class="exer-input">
					<option value="-1"> </option>
					<option value="0">was</option>
					<option value="1">were</option>
				</select> in the museum.
			</li>

				<li>She <select class="exer-input">
					<option value="-1"> </option>
					<option value="0">was</option>
					<option value="1">were</option>
				</select> in South Africa last month.
			</li>

				<li>Jessica and Kimberly <select class="exer-input">
					<option value="-1"> </option>
					<option value="0">was</option>
					<option value="1">were</option>
				</select> late for...

CSS

.wrong{
  border: 1px solid red;
  padding: 4px;
}

.correct{
  border: 1px solid green;
  padding: 5px;
}

JavaScript

let answers = ['was', 'were', 'was', 'were', 'were', 'were', 'were', 'was', 'was', 'were'];

let answerChoice = new Array(10);

var inputs = document.querySelectorAll('select')

document.getElementById('checkAnswer').addEventListener('click', () => {
    for (let i = answers; i < answers.length; i++) {
        if (answers[i] !== answerChoice[i]) {
            inputs.classList.add('wrong');
        } else {
            inputs.classList.add('correct');
            break;
        }
    }
});