ტესტი კითხვებით და პასუხებით 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 ღილაკის დაჭერით. ვთქვათ ამ შემთხვევაში ინპუტი დაუყოვნებლივ შეამოწმებს პასუხის სისწორეს.

მოდიფიცირება გაუკეთეთ თქვენს კოდს ისე, რომ პასუხების შემოწმება შესრულდეს ღილაკზე დაჭერისას.