JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

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

	<input id="checkAnswer" type="submit" class="submit1" value="Sprawdź">
	<input id="showAnswer" type="submit" class="submit1" value="Wyświetl odpowiedzi" style="width: 170px">
	<input id="clearAnswer" type="submit" class="submit1" value="Wyczyść">

CSS

body{
  margin: 0;
  font-family: 'Open Sans', sans-serif;

}

/*sidebar*/
.sidebar{
  direction: rtl;
  height:100%;
  width:270px;
  background-color: #222;
  box-shadow: 1px 0px 5px 0px #aaa;
  position: fixed!important;
  float:left;
  z-index:1;
  overflow-y: auto;
}

.sidebar::-webkit-scrollbar-track
{
	background-color: #222;
}

.sidebar::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

.sidebar::-webkit-scrollbar-thumb
{
	background-color: #2d2d2d
}


.sidebar-hd-text{
  font-weight: bold;
  color: white;
  font-size: 21px;
}

.sidebar-text{
  color: gray;
}

nav{
  direction:ltr;
}


#logo {
    background-image:url(img/logo.png);
    border-bottom: 1px solid #111;
    background-position: center;
    background-repeat: no-repeat;
    display:block;
    height:120px;
    width:270px;
    overflow:hidden;
    text-indent:100%;
    white-space:nowrap;
}

ul.ul-sidebar{
  list-style-type: none;
  margin-top: 14px;
  font-size: 18px;
  padding-inline-start: 0px;
}

li{
  line-height: 25px;
  margin-top: 5px;
  margin-left: 40px;
}

/*footer*/
footer{
  max-height: 120px;
  width: 270px;
  font-size: 15px;
  background-color: #222;
  text-align: center;
  padding-top: 5px;
  color: #aaa;
  position: fixed;
  bottom:0;
}


/*buttons*/
.bt{
  height: 50px;
  width: 50px;
  background-position: center;
  background-repeat: no-repeat;

}
.openbt{
  border: none;
  background-image: url("img/menu.png");
  background-color: white;
  position: absolute;
}

.closebt{
  border: none;
  background-image: url("img/close.png");
  background-color: #222;
}

/*sidecollapse*/
@media (min-width:993px){
  .w3-modal-content{
    width:900px
    }

    .bt{
      display:none!important
    }

    .sidebar.collapse{
      display:block!important
    }

    main{
      margin-left: 320px;
      width: 55%;
    }

    .card{
      float:left;
      width: 45%;
    }


  }

@media (max-width:992px){

  .sidebar.collapse{
    display:none
    }

    .auto{
     ...

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";
...