JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<ol>
			<li>Jane is <input class="input1" type="text" id="a1"> (pretty) girl in our class.<span class="odpowiedz" id="odpa1"></span></li>
			<li>Frank is much <input class="input1" type="text" id="a2"> (tall) than John.<span class="odpowiedz" id="odpa2"></span></li>
			<li>It is <input class="input1" type="text" id="a3"> (high) mountain in the world.<span class="odpowiedz" id="odpa3"></span></li>
			<li>You should be <input class="input1" type="text" id="a4"> (careful) next time.<span class="odpowiedz" id="odpa4"></span></li>
			<li>Tom swims <input class="input1" type="text" id="a5"> (fast) of all.<span class="odpowiedz" id="odpa5"></span></li>
			<li>I feel much <input class="input1" type="text" id="a6"> (good) than yesterday.<span class="odpowiedz" id="odpa6"></span></li>
			<li>I'm afraid that tomorrow it can be even <input class="input1" type="text" id="a7"> (bad).<span class="odpowiedz" id="odpa7"></span></li>
			<li>It is <input class="input1" type="text" id="a8" style="width: 170px;"> (beautiful) song I have ever heard.<span class="odpowiedz" id="odpa8"></span></li>
			<li>I will see you <input class="input1" type="text" id="a9"> (late).<span class="odpowiedz" id="odpa9"></span></li>
			<li>The movie is great! I believe it is <input class="input1" type="text" id="a10" style="width: 170px;"> (interesting) movie I have ever seen.<span class="odpowiedz" id="odpa10"></span></li>
		</ol>
    
    	<input id="checkAnswer" type="submit" value="check">
	<input id="showAnswer" type="submit" value="Show answers">
	<input id="clearAnswer" type="submit" value="Clear">

CSS

.input1{
  color: black;
  margin: 1px;
  width: 100px;
  text-align: center;
}

.input1-wrongAnswer{
  border: 1px solid #fc6f6f;
  margin: 2px;
  width: 100px;
}

JavaScript

document.getElementById("checkAnswer").addEventListener("click", function(){
  var a1 = document.getElementById("a1").value; a1 = a1.trim().toLowerCase();
  var a2 = document.getElementById("a2").value; a2 = a2.trim().toLowerCase();
  var a3 = document.getElementById("a3").value; a3 = a3.trim().toLowerCase();
  var a4 = document.getElementById("a4").value; a4 = a4.trim().toLowerCase();
  var a5 = document.getElementById("a5").value; a5 = a5.trim().toLowerCase();
  var a6 = document.getElementById("a6").value; a6 = a6.trim().toLowerCase();
  var a7 = document.getElementById("a7").value; a7 = a7.trim().toLowerCase();
  var a8 = document.getElementById("a8").value; a8 = a8.trim().toLowerCase();
  var a9 = document.getElementById("a9").value; a9 = a9.trim().toLowerCase();
  var a10 = document.getElementById("a10").value; a10 = a10.trim().toLowerCase();

  if (a1 != "the prettiest"){
    document.getElementById("a1").className = "input1-wrongAnswer";
  } else{
    document.getElementById("a1").className = "input1";
      document.getElementById("odpa1").style.display = "none";
  }
  if (a2 != "taller"){
    document.getElementById("a2").className = "input1-wrongAnswer";
  } else{
    document.getElementById("a2").className = "input1";
      document.getElementById("odpa2").style.display = "none";
  }
  if (a3 != "the highest"){
    document.getElementById("a3").className = "input1-wrongAnswer";
  } else{
    document.getElementById("a3").className = "input1";
      document.getElementById("odpa3").style.display = "none";
  }
  if (a4 != "more careful"){
    document.getElementById("a4").className = "input1-wrongAnswer";
  } else{
    document.getElementById("a4").className = "input1";
      document.getElementById("odpa4").style.display = "none";
  }
  if (a5 != "fastest"){
    document.getElementById("a5").className = "input1-wrongAnswer";
  } else{
    document.getElementById("a5").className = "input1";
      document.getElementById("odpa5").style.display = "none";
...