JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://fonts.googleapis.com/css?family=Orbitron"></script>
<div id="container">

  <div id="logo">
    <center>Quiz HTML</center>
  </div>
  <br />
  <br />
  <br />
  <br />

  <h2>
Czego skrótem jest HTML?
</h2>
  <div id="pytanie1">


    <div class="odp1" data-odpowiedz="zle">
      a) HyperText Market Language
    </div>

    <div class="odp1" data-odpowiedz="zle">
      b) Hyper Tea Market Language
    </div>
    <div class="odp1" data-odpowiedz="dobra">
      c) HyperText Markup Language
    </div>
    <div class="odp1" data-odpowiedz="zle">
      d) Nic z tych odpowiedzi
    </div>


  </div>
  <br />
  <div id="sprawdz">

  </div>

</div>

CSS

body {
  background: white;
}

h2 {
  text-align: center;
}

#container {
  margin: auto;
  border-style: solid;
  border-width: 3px;
  min-height: 1000px;
  width: 700px;
  box-shadow: 15px 15px 10px grey;
  background: #e5e6e8;
}

#logo {
  font-size: 100px;
  font-family: 'Orbitron', sans-serif;
}

#pytanie1 {
  text-align: center;
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 20px;
}

.odp1 {
  border-width: 2px;
  border-style: dotted;
  width: 140px;
  height: 100px;
  background: #dee6f2;
  transition: all 2s;
}

.odp1:hover {
  background: #6899e2;
  transform: scale(1.1);
}

#sprawdz {
  text-align: center;
  font-size: 40px;
  animation-name: example;
  animation-duration: 4s;
  display: none;
}

@keyframes example {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

JavaScript

const odpowiedz = document.getElementById("sprawdz"); // sorry, że pozmieniałem troche nazwy zmiennych, ale zmienna musi na coś wskazywać. Tu zdeklarowałem stałą za pomocą "const", bo chyba nie bedziemy zmieniac jej wartości.
// Ten kod na dole jest troche trudny, ale prawie skopiowany z artykułu "Loop over document.querySelectorAll" z CssTricks
[].forEach.call(document.querySelectorAll('.odp1'), el => { // to jest troche nietypowa pętla, w każdym razie bierzemy wszystkie elementy z klasy .odp1 i wykonujemy dla nich ten kod ⬇️
  el.addEventListener('click', sprawdz); // nie możemy na jsfiddle załączać zdarzenia w stylu tzw. "inline" czyli bezpośrednio w html przez nclick itp. Musimy to zrobić bardziej profesjonalnie przez addEventListener (poczytaj o nim na MDN). Do każdego elementu (el) zalączmy zdarzenie (np click) i za każdym razem, gdy user wywoła dane zdarzenie wykonywana jest funkcja sprawdz
})
function sprawdz(e){ // zmienna e (od event) jest "wstrzykiwana" przez addEventListener
  if (odpowiedz.style.display != "block") {
      odpowiedz.style.display = "block";
  if(e.target.dataset.odpowiedz == 'dobra'){ // tutaj odwołujemy sie do tego "data-odpowiedz" html'u. Wystarczy zmienic to w html'u, aby odpowiedz byla liczona jako zla. Jedna funkcja wg zasady "Don't code twice" ;)
      odpowiedz.innerHTML = "Dobrze, Wspaniale!";
      odpowiedz.style.color = "green";
  }else{
        odpowiedz.innerHTML = "Źle!";
      odpowiedz.style.color = "red";
  }
  }
}