জাভাস্ক্রিপ্টে 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- attribute-এ:
<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 কী চাপ দিয়ে শেষ হয়।
এই ক্ষেত্রে, ইনপুট যেন তাত্ক্ষণিকভাবে উত্তরের সঠিকতা পরীক্ষা করে।
আপনার কোডটি পরিবর্তন করুন যাতে উত্তরগুলির পরীক্ষা একটি বাটনে ক্লিক করে সঞ্চালিত হয়।
