Тэст з пытаннямі і адказамі ў HTML кодзе на JavaScript

У гэтым і ў некалькіх наступных уроках мы з вамі займемся стварэннем тэстаў з пытаннямі і адказамі. Пачнем з самых простых варыянтаў і будзем паступова ўскладняць.

Хай для пачатку мы хочам зрабіць набор пытанняў, на кожнае з якіх магчымы толькі адзін адказ. Хай адказы ўбіваюцца карыстальнікам у інпуты пад самімі пытаннямі.

Праілюструю напісанае HTML кодам:

html<div id="test">
  <div>
    <p>пытанне 1?</p>
    <input>
  </div>
  <div>
    <p>пытанне 2?</p>
    <input>
  </div>
  <div>
    <p>пытанне 3?</p>
    <input>
  </div>
</div>

Як вы бачыце, у нас ёсць пытанні і інпуты для адказаў. Засталося прыдумаць, дзе мы будзем захоўваць правільныя адказы.

Самае простае, што можна прыдумаць - гэта захоўваць адказы прама ў HTML кодзе інпутаў, у якім-небудзь data- атрыбуце:

html<div id="test">
  <div>
    <p>пытанне 1?</p>
    <input data-right="адказ 1">
  </div>
  <div>
    <p>пытанне 2?</p>
    <input data-right="адказ 2">
  </div>
  <div>
    <p>пытанне 3?</p>
    <input data-right="адказ 3">
  </div>
</div>

Наступны нюанс, які варта прадумаць: у які момант мы будзем выконваць праверку адказаў на правільнасць? Тут можна прапанаваць два варыянты: альбо хай кожны інпут адразу жа па ўводзе ў яго адказу правярае правільны лі гэты адказ, альбо хай будзе кнопка, па націску на якую будуць правераны адказы на ўсе пытанні адразу.

Які б з варыянтаў мы не выбралі, давайце, калі адказ правільны, то мяжу інпута будзем фарбаваць у зялёны колер, а калі няправільны - у чырвоны. Зробім для гэтага адпаведныя CSS класы:

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