দেখুন কিভাবে Blogger এ Quiz system বানাবেন পর্ব ১

আসসালামুয়ালাইকুম, বন্ধুরা আশা করি আল্লাহর রহমতে ভালোই আছেন। আলহামদুলিলাহ, আমিও ভালোই আছি। এবং আপনাদের মাঝে আবারও নতুন একটা পোস্ট নিয়ে উপস্থিত হলাম। ব্যস্ততার কারণে পোস্ট গুলি তৈরী করতে অনেক কষ্ট করতে হয়।

তবুও ব্যস্ততা কে উপেক্ষা করে,আপনাদের মাঝে উপস্তিত হওয়া। যাইহোক অনেক কথাই বলে ফেললাম, এবার তো কাজের দিকে যাওয়া উচিত।

আশাকরি পোস্টের টাইটেল দেখে আজকের পোস্টের মুল বিষয় কি তা অবশ্যই বুঝেছেন। তাই বেশি ভনিতা না করে, ডাইরেক্ট কাজের পদ্ধতির দিকে যাচ্ছি, সেটআপ এর পরে না হয় কিছু কথা বলা যাবে।

কি ভাবে Blogger এ Quiz system টি সেটআপ করবেন?

প্রথমে যে সাইটে Quiz system বানাতে চান, 👉blogger.com থেকে সেই সাইট ওপেন করুন। ওপেন করে উপরের বাম কর্নার এ 3 লাইন মেনু icon এ ক্লিক করে মেনু ওপেন করুন।

এরপর নীচের ছবির মতো Theme এ ক্লিক করুন।

এর পর নিচের ছবিটির মতো 🔻 ডাউন arrow আইকন এ ক্লিক করুন।

তারপর Edit HTML এ ক্লিক করুন।

এর পর theme editor ওপেন হলে এখান থেকে কোডটি কপি করে head ট্যাগ এর মধ্যে b:skin ট্যাগ এর নিচে বসিয়ে দিন অথবা head ট্যাগ এর মাঝে যেকোনো জায়গায় বসিয়ে দিতে পারেন। যেমন আমি b:skin ট্যাগ এর উপরে বসিয়েছি।

এরপর আমরা মেইন কুইজ স্ক্রিপ্ট যোগ করবো। এখানে স্ক্রিপ্টটি কপি করে body এর ক্লোজিং ট্যাগ এর আগে বসিয়ে দিন।

আমাদের প্রধান কাজ শেষ। এখন Quiz গুলিকে ব্লগপোস্ট আকারে পোস্ট করবো। আমি একটা করিয়ে দেখাবো, তারপর আপনারা নিজের ইচ্ছে মতো Quiz বানিয়ে শুধু আমার দেখানো উপায়ে পোস্ট করবেন।

আশাকরি কি ভাবে ব্লগ পোস্ট বানাতে হয় সেটা জানেন। (Menu > Posts > Create New post or + icon) সাধারণ নিয়মেই সব কিছু হবে, শুধু পোস্ট কন্টেন্ট এর জায়গায় এখান থেকে কপি করা এখান থেকে কপি করা HTML + JSON কোডটি বসিয়ে দিন।

আপনি চাইলে এই HTML ফাইল এর আগে Dummy টেক্সটও দিতে পারেন। যেমন (Question রুলস দিলেন)।

এভাবে আপনে যতবার নতুন পোস্ট করবেন, ততবার শুধু JSON Question Data স্ক্রীপ্ট চেঞ্জ করে দিবেন নতুন Question দিয়ে।

Quiz system এর ফিচার সমূহ

এই কুইজে প্রশ্নগুলো <script id="quiz-data" type="application/json"> ব্লকের JSON থেকে লোড হয়। যদি সেই ব্লক না থাকে বা খালি থাকে, কোডে থাকা একটি ছোট “ফলব্যাক” নমুনা প্রশ্ন সেট ব্যবহার হয়—তাই কুইজ অন্তত টেস্ট করার মতো সবসময় চালু থাকে।

স্টার্ট বাটনে কুইজ শুরু

স্টার্ট বাটন চাপলেই কুইজ শুরু হয়। পেজে একটি “ফুলস্ক্রিন-স্টাইল” ক্লাস যোগ হয়, স্ক্রল লক করা হয়, স্টার্ট বাটন লুকানো ও কুইজ কনটেন্ট দেখানো হয়, সঙ্গে সঙ্গে টাইমারও চালু হয়।

একেকবারে এক প্রশ্ন, পাশে নেভিগেশন

সব প্রশ্ন একসাথে রেন্ডার হলেও স্ক্রিনে একবারে একটি প্রশ্নই দেখা যায়। Prev ও Next বাটন দিয়ে আগের/পরের প্রশ্নে যাওয়া যায়। প্রথম প্রশ্নে গেলে Prev নিষ্ক্রিয়, শেষ প্রশ্নে গেলে Next নিষ্ক্রিয় থাকে।

অপশন সিলেক্ট ও হাইলাইট

প্রতিটি অপশন বাটন। কোনোটি সিলেক্ট করলে সেটি হাইলাইট হয়। পরে আবার সেই প্রশ্নে ফিরে এলে আগের পছন্দ আগের মতোই হাইলাইট হয়ে দেখা যায়—মানে আপনার উত্তর “সেভ” হয়ে থাকে।

প্রগ্রেস টেক্সট ও প্রগ্রেস বার

উপরের দিকে “Question X of N” লেখা থাকে এবং একটি প্রগ্রেস বার প্রশ্ন সংখ্যার অনুপাতে ভরতে থাকে। এতে ব্যবহারকারী বুঝতে পারেন কুইজ কতদূর এগিয়েছে।

টাইমার: প্রতি প্রশ্নে ৪৫ সেকেন্ড

মোট সময় ধরা হয় প্রশ্নসংখ্যা × ৪৫ সেকেন্ড। টাইমার মিনিট:সেকেন্ড ফরম্যাটে চলতে থাকে। ১০ মিনিট বাকি থাকলে “ওয়ার্নিং” ক্লাস, ৫ মিনিট বাকি থাকলে “ক্রিটিক্যাল” ক্লাস যোগ হয়। সময় শেষ হলে স্বয়ংক্রিয়ভাবে সাবমিট হয়।

প্রশ্নভিত্তিক সময় ট্র্যাকিং

কুইজটি প্রতিটি প্রশ্নে কত সেকেন্ড সময় দিলেন সেটিও গণনা করে (অ্যারেতে সেভ করে)। এটি এখনই দেখায় না, তবে হিসাব রাখা হয়।

অসম্পূর্ণ উত্তর দিলে সাবমিটের আগে সতর্কতা

সাবমিট চাপলে যদি কোনো প্রশ্নে উত্তর না থাকে, একটি সতর্কতা (ওয়ার্নিং) মডাল খোলে—কোন কোন প্রশ্ন বাকি আছে তা তালিকা আকারে দেখায়।

রেজাল্ট ক্যালকুলেশন ও সারাংশ

সাবমিটের পর সঙ্গে সঙ্গে মোট ঠিক উত্তর, ভুল উত্তর, শতাংশ স্কোর এবং পুরো কুইজে মোট কত সময় লেগেছে—সব হিসাব করে দেখায়। সময়টি মিনিট:সেকেন্ড হিসেবে দেখানো হয়।

প্রশ্নভিত্তিক রিভিউ (ব্যাখ্যাসহ)

রেজাল্ট মডালে প্রতিটি প্রশ্নের নিচে আপনার দেওয়া উত্তর দেখায়। কোনো প্রশ্নে ভুল হলে সঠিক উত্তর আলাদা করে দেখায় এবং explanation থাকলে সেটিও দেখায়।

রেজাল্ট মডাল ক্লোজ ও ভিউ রিসেট

রেজাল্ট মডালের ক্লোজ বাটনে চাপলে মডাল বন্ধ হয়, “ফুলস্ক্রিন-স্টাইল” ক্লাস সরানো হয়, পেজ স্ক্রল স্বাভাবিক অবস্থায় ফিরে আসে, কুইজ কনটেন্ট লুকিয়ে স্টার্ট বাটন আবার দেখানো হয়।