Հարցերով և պատասխաններով թեստ HTML կոդում JavaScript-ի միջոցով

Այս և հաջորդ birkaç դասերում մենք ձեզ հետ կզբաղվենք հարցերով թեստերի ստեղծմամբ: Կսկսենք ամենապարզ տարբերակներից ու աստիճանաբար կբարդացնենք:

Սկզբից ենթադրենք, որ ուզում ենք պատրաստել հարցերի մի շարք, որոնցից յուրաքանչյուրի համար հնարավոր է միայն մեկ պատասխան: Ենթադրենք պատասխանները մուտքագրվում են օգտագործողի կողմից ինպուտների մեջ՝ հենց հարցերի տակ:

Պատկերացնեմ գրվածը 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 ստեղնի սեղմումով: Թող այս դեպքում ինպուտը անմիջապես ստուգի պատասխանի ճիշտ լինելը:

Փոփոխեք ձեր կոդն այնպես, որ պատասխանների ստուգումը կատարվի կոճակի սեղմման դեպքում: