JavaScript භාවිතයෙන් HTML කේතයේ ප්රශ්ණ හා පිළිතුරු සහිත පරීක්ෂණය
මෙම සහ ඊළඟ පාඩම් කිහිපයේදී අපි ඔබ සමඟ ප්රශ්ණ හා පිළිතුරු සහිත පරීක්ෂණ සකස් කිරීමේ කටයුතුවල නිරත වෙමු. අපි ආරම්භ කරන්නේ සරලම විකල්ප වලින් සහ ක්රමයෙන් සංකීර්ණ වෙමින් යන්නෙමු.
පළමුවෙන්ම, අපට සෑම ප්රශ්නයකටම එක් පිළිතුරක් පමණක් හැකි ප්රශ්ණ සමූහයක් සෑදීමට අවශ්ය යැයි සිතමු. පිළිතුරු පරිශීලකයා විසින් මුල් ප්රශ්න යටතේ ඇති input ක්ෂේත්රවලට ඇතුල් කරනු ලබයි.
ලියා ඇති දේ HTML කේතය මගින් විදහා දක්වමු:
<div id="test">
<div>
<p>ප්රශ්නය 1?</p>
<input>
</div>
<div>
<p>ප්රශ්නය 2?</p>
<input>
</div>
<div>
<p>ප්රශ්නය 3?</p>
<input>
</div>
</div>
ඔබට පෙනෙන පරිදි, අපට ප්රශ්න සහ පිළිතුරු සඳහා input ක්ෂේත්ර ඇත. නිවැරදි පිළිතුරු ගබඩා කරන ස්ථානය ගැන සිතා ගැනීමට ඉතිරිව ඇත.
සිතා ගත හැකි සරලම දෙය නම්
පිළිතුරු HTML කේතයේම input ක්ෂේත්ර තුළ,
කිසියම් 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>
සලකා බැලිය යුතු ඊළඟ සියුම් කරුණ: පිළිතුරු නිවැරදිදැයි පරීක්ෂා කරන කාලය කුමක්ද? මෙහිදී විකල්ප දෙකක් යෝජනා කළ හැකිය: කෙනෙකුට input ක්ෂේත්රයකට පිළිතුර ඇතුළත් කිරීමේදීම එම පිළිතුර නිවැරදිදැයි වහාම පරීක්ෂා කරයි, නැතිනම් බොත්තමක් ඇති අතර එය ක්ලික් කිරීමේදී සියලුම ප්රශ්න සඳහා පිළිතුරු එකවර පරීක්ෂා කරයි.
අපි තෝරා ගන්නා විකල්පය ඕනෑම එකක් වුවත්, අපි, පිළිතුර නිවැරදි නම්, input ක්ෂේත්රයේ දාරය කොළ පැහැයෙන්, සහ වැරදි නම් - රතු පැහැයෙන් වර්ණ කරමු. මේ සඳහා අදාළ CSS වර්ග සාදමු:
.right {
border: 1px solid green;
}
.wrong {
border: 1px solid red;
}
input ක්ෂේත්රයකට පිළිතුර ඇතුළත් කිරීම Enter යතුර එබීමෙන්
සම්පූර්ණ වන පරිදි සකසන්න.
මෙම අවස්ථාවේදී input ක්ෂේත්රය වහාම පිළිතුර නිවැරදිදැයි පරීක්ෂා කරයි.
පිළිතුරු පරීක්ෂා කිරීම බොත්තමක් ක්ලික් කිරීම මත සිදු වන පරිදි ඔබේ කේතය වෙනස් කරන්න.
