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

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

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

Праілюструю напісанае 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- атрыбуце:

<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 класы:

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

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

Мадыфікуйце ваш код так, каб праверка адказаў выконвалася па націску на кнопку.