Teszt kérdésekkel és válaszokkal HTML kódban JavaScript segítségével

Ebben és néhány következő leckében tesztek létrehozásával fogunk foglalkozni kérdésekkel és válaszokkal. Kezdjük a legegyszerűbb változatokkal, és fokozatosan bonyolítjuk.

Kezdetben tegyük fel, hogy olyan kérdéssort szeretnénk készíteni, ahol minden kérdésre csak egy válasz lehetséges. A válaszokat a felhasználó írja be a kérdések alatti input mezőkbe.

Szemléltessük az elmondottakat HTML kóddal:

html<div id="test">
  <div>
    <p>1. kérdés?</p>
    <input>
  </div>
  <div>
    <p>2. kérdés?</p>
    <input>
  </div>
  <div>
    <p>3. kérdés?</p>
    <input>
  </div>
</div>

Amint látjátok, vannak kérdéseink és input mezőink a válaszokhoz. Már csak azt kell kitalálnunk, hogy hol fogjuk tárolni a helyes válaszokat.

A legegyszerűbb megoldás, ami eszünkbe juthat - az, hogy a válaszokat közvetlenül az input mezők HTML kódjában tároljuk, valamilyen data- attribútumban:

html<div id="test">
  <div>
    <p>1. kérdés?</p>
    <input data-right="1. válasz">
  </div>
  <div>
    <p>2. kérdés?</p>
    <input data-right="2. válasz">
  </div>
  <div>
    <p>3. kérdés?</p>
    <input data-right="3. válasz">
  </div>
</div>

A következő árnyalat, amit át kell gondolnunk: melyik pillanatban fogjuk elvégezni a válaszok helyességének ellenőrzését? Itt két lehetőség kínálkozik: vagy minden input azonnal, a válasz beírásakor ellenőrzi, hogy helyes-e a válasz, vagy legyen egy gomb, amelyre kattintva ellenőrződnek az összes kérdésre adott válasz egyszerre.

Bármelyik változatot is választjuk, tegyük a következőt: ha a válasz helyes, akkor az input keretét zöldre színezzük, ha helytelen - pirosra. Készítsünk ehhez megfelelő CSS osztályokat:

css.right {
  border: 1px solid green;
}
.wrong {
  border: 1px solid red;
}