বোতামটি ওয়েব অ্যাপস এডিটরের সবচেয়ে সহজ উপাদান কিন্তু সমাপ্ত অ্যাপ্লিকেশনের ইন্টারফেসে এটি প্রধান ভূমিকা পালন করে। অধিকন্তু, আজ আমরা আপনাকে এমন একটি অ্যাপ্লিকেশন তৈরি করার প্রস্তাব দিচ্ছি যাতে শুধুমাত্র বোতাম থাকবে। কাজটি কিছুটা অদ্ভুত মনে হতে পারে, কিন্তু আপনি যদি এটি করেন তবে আপনি বোতামগুলিকে কাস্টমাইজ করতে শিখবেন, সম্পাদকের সাথে কাজ করার মূল বিষয়গুলি এবং সমগ্র প্ল্যাটফর্মের যুক্তিগুলি বুঝতে পারবেন।
অ্যালিসের অ্যাডভেঞ্চারস ইন ওয়ান্ডারল্যান্ড বইটির উপর ভিত্তি করে একটি ছোট কুইজ তৈরি করা যাক। অ্যালিস চেশায়ার বিড়ালের সাথে কোথায় দেখা করেছিল তা ব্যবহারকারীদের মনে আছে কিনা তা খুঁজে বের করা যাক।
আমাদের আবেদন থাকবে:
- প্রশ্ন পাঠ্য: এলিস প্রথম চেশায়ার বিড়ালের সাথে কোথায় দেখা করেছিলেন?
- পছন্দের বোতাম: ম্যাড-টি পার্টি, ডাচেস হাউস, কাঠ, ক্রোকেট-গ্রাউন্ড। যদি ব্যবহারকারী ভুল উত্তর বেছে নেয় - এর সাথে থাকা বোতামটি অদৃশ্য হয়ে যায়, যদি ব্যবহারকারী সঠিকটি বেছে নেয় - ভুল উত্তর সহ সমস্ত বোতাম একবারে অদৃশ্য হয়ে যায়।
- পপ-আপ বার্তা যা আপনাকে বলে যে উত্তরটি সঠিক ছিল কি না।
যাইহোক, আপনি কি মনে রাখবেন কোন বিকল্পটি সঠিক?
কিভাবে একটি বোতাম তৈরি করতে হয়
মাউস পয়েন্টার দিয়ে "বোতাম" উপাদানটিকে টেনে আনুন (বাম কীটি ক্লিক করে ধরে) যেখানে আপনি বোতামটি রাখতে চান।
সম্ভাব্য উত্তরের সংখ্যা অনুসারে আপনাকে চারটি বোতাম যুক্ত করতে হবে।
কাস্টমাইজ বোতাম চেহারা
প্রথম বোতামে একবার ক্লিক করুন - সেটিংস উইন্ডো খুলবে। আপনি নিজেকে "লুক অ্যান্ড ফিল" ট্যাবে খুঁজে পাবেন, যা বোতামগুলির উপস্থিতির জন্য দায়ী৷
1. নিম্নলিখিত ক্ষেত্রগুলি সম্পাদনা করুন:
- লেবেল: বোতাম পাঠ্য - প্রথম উত্তর লিখুন: "ম্যাড-টি পার্টি";
- আইকন: বোতাম আইকন - "পিক আইকন" এ ক্লিক করুন এবং আপনার পছন্দের একটি বেছে নিন (এখন তাদের মধ্যে 2500 টিরও বেশি আছে);
- আকার: বোতামের আকার - বোতামটি বড় করতে "বড়" এ সেট করুন;
- নাম: এটি সেই নাম যার দ্বারা বোতামটি আপনার অ্যাপ্লিকেশনের অন্যান্য উপাদান দ্বারা "দেখা" হয়; প্রতিটি বোতামের একটি অনন্য নাম প্রয়োজন - বোতামটিকে "btn-mad_tea" নাম দিন।
আপনি যখন ক্ষেত্রগুলি সম্পাদনা করেন, তখন সেটিংস প্রয়োগ করার পরে বোতামটি কীভাবে দেখাবে তা দেখানোর জন্য উইন্ডোর উপরের চিত্রটি পরিবর্তন হবে।
2. আপনি যখন সমস্ত ক্ষেত্র পূরণ করেন - "সংরক্ষণ করুন" এ ক্লিক করুন।
- প্রথমটির সাথে সাদৃশ্য রেখে বাকি বোতামগুলি কনফিগার করুন, নামগুলি ব্যবহার করে: btn-duchess_h, btn-wood, btn-croquet_g।
- আপনার অ্যাপ্লিকেশনে পরিবর্তনগুলি সংরক্ষণ করতে "পরিবর্তনগুলি সংরক্ষণ করুন" এ ক্লিক করুন - অন্যথায়, আপনি একবার পৃষ্ঠা রিফ্রেশ করলে বা সম্পাদক বন্ধ করলে বোতামগুলি অদৃশ্য হয়ে যাবে৷
ট্রিগার এবং ইভেন্ট সেট আপ করা
এখন আপনাকে বোতামগুলির ক্রিয়াগুলি সেট করতে হবে। আসুন সঠিক উত্তর দিয়ে শুরু করা যাক - "ডাচেস হাউস" । আপনার কাজ হল ওয়েব অ্যাপস সম্পাদককে "ব্যাখ্যা করা":
- বোতামটির ট্রিগার কী - মানে, এটির ঠিক কী প্রতিক্রিয়া হওয়া উচিত: টিপে;
- এই ক্ষেত্রে কি ঘটনা ঘটে: বোতামগুলি অদৃশ্য হয়ে যায়;
- এই ঘটনাটি কোথায় ঘটে, কোন উপাদানগুলি পরিবর্তন করে: অন্যান্য বোতামগুলি৷
"ডাচেস হাউস" বোতাম সেটিংসে ফিরে যান এবং ট্রিগার ট্যাবে যান৷ এর জন্য যোগ করা সমস্ত ট্রিগার প্রদর্শিত হবে:
- এখন শুধুমাত্র একটি আছে - "OnClick"। এটি স্বয়ংক্রিয়ভাবে যুক্ত হয় এবং এর মানে হল যে আপনি এটিতে ক্লিক করলে বোতামটি কাজ করবে (যা আপনার প্রয়োজন ঠিক তাই)।
- "অনক্লিক" ছাড়াও, বোতামটির জন্য অন্যান্য ট্রিগারগুলি সম্ভব। একটি বিবরণ সহ একটি সম্পূর্ণ তালিকা প্ল্যাটফর্ম ডকুমেন্টেশনে রয়েছে।
এখন আপনাকে ইভেন্ট সম্পর্কে তথ্য নির্দিষ্ট করতে হবে (আপনার কাছে তাদের তিনটি থাকবে - প্রতিটি বোতামের জন্য একটি)। "OnClick" এর পাশে "+" এ ক্লিক করুন। ইভেন্ট সেটিংস উইন্ডো খুলবে।
"টার্গেট কম্পোনেন্ট" ফিল্ডে, ইভেন্টটি কোথায় ঘটবে তা আপনাকে নির্দেশ করতে হবে, "অ্যাকশন" ফিল্ডে - এটি কী ধরনের ইভেন্ট হবে।
সব ভুল উত্তর লুকান
একটি ইভেন্ট যোগ করুন যা ম্যাড-টি পার্টি বোতামটি লুকিয়ে রাখবে:
- "টার্গেট কম্পোনেন্ট" ফিল্ডে ক্লিক করুন এবং এটিকে অনন্য নাম btn-mad_tea দ্বারা খুঁজুন। অ্যাকশন ক্ষেত্রে, উপযুক্ত ইভেন্টটি নির্বাচন করুন, এই ক্ষেত্রে - "লুকান বোতাম"।
- "সংরক্ষণ করুন" এ ক্লিক করুন।
একইভাবে লুকানো বাকি বোতামগুলি কনফিগার করুন।
- "ডাচেস' হাউস" বোতামের জন্য ট্রিগারের তালিকাটি আপনার কাজ শেষ হয়ে গেলে কেমন হওয়া উচিত।
- আপনার পরিবর্তনগুলি সংরক্ষণ করতে "সংরক্ষণ করুন" এ ক্লিক করুন।
এখন আপনি সবকিছু কাজ করে তা নিশ্চিত করতে হবে।
- আপনার পরিবর্তন সংরক্ষণ করুন.
- অ্যাপ্লিকেশনটি প্রকাশ করার জন্য বোতাম টিপুন (এটি ইন্টারনেটে স্থাপন করা), "উন্নয়ন" নির্বাচন করুন।
- Go to your app আইকনে ক্লিক করুন - এটি একটি নতুন ট্যাবে খুলবে।
অ্যাপে যান এবং নিশ্চিত করুন যে আপনি যখন সঠিক বিকল্পটি নির্বাচন করেন, বাকি বোতামগুলি অদৃশ্য হয়ে যায়।
ক্লিকে ভুল উত্তর লুকান
এখন ভুল উত্তর দিয়ে বোতামটি তৈরি করা যাক "ম্যাড-টি পার্টি" ব্যবহারকারী এটিতে ক্লিক করলে অদৃশ্য হয়ে যাবে। এই ক্ষেত্রে, ট্রিগার (টিপে) এবং ইভেন্ট (অদৃশ্য হওয়া) উভয়ই একই বোতামের অন্তর্গত - আপনাকে কেবল এটির সাথে কাজ করতে হবে।
বোতাম সেটিংস খুলুন, "Triggers" ট্যাবে যান, "onClick" ট্রিগারে একটি নতুন ইভেন্ট যোগ করুন। "টার্গেট কম্পোনেন্ট" ফিল্ডে, বোতামটি নিজের জন্য একটি ইভেন্ট সক্রিয় করে তা নির্দেশ করতে "এই উপাদান (স্ব)" নির্বাচন করুন। "অ্যাকশন" ক্ষেত্রের মান আগের উদাহরণের মতোই - "লুকান বোতাম"।
সমস্ত পরিবর্তন সংরক্ষণ করুন এবং অ্যাপটি প্রকাশ করুন, অ্যাপ ট্যাবে স্যুইচ করুন এবং রিফ্রেশ করুন। চেক করুন যে সবকিছু উদ্দেশ্য হিসাবে কাজ করে:
এখন কাঠ এবং ক্রোকেট-গ্রাউন্ড সামঞ্জস্য করুন। সংরক্ষণ করুন, প্রকাশ করুন এবং আবার পরীক্ষা করুন।
বোতামের প্রকারভেদ
দুর্দান্ত, উত্তরগুলি কাজ করে। এটি একটি প্রশ্ন যোগ করার সময়. অবশ্যই, Appmaster.io এর জন্য বিশেষ উপাদান রয়েছে, তবে আপনি আমাদের কাজটি মনে রাখবেন - বোতাম এবং অন্য কিছু নয়। তাই আরো একটি যোগ করা যাক. এই সময় - মূল ক্যানভাসে নয়, পৃষ্ঠার শীর্ষে:
এটিকে আরও মজাদার করতে, এই স্ক্রিনশটের মতো প্রশ্নটি পূরণ করুন:
এখন বিভিন্ন ধরণের বোতামের জন্য রঙের স্কিম ব্যবহার করে "রঙিন করুন": সেটিংসে যান এবং "টাইপ" ক্ষেত্রের মানটিকে অন্য যেকোনোটিতে স্যুইচ করুন।
আমরা এটির মতো এটি পেয়েছি, তবে আপনি আপনার বিকল্পটি চয়ন করতে পারেন, বোতামের রঙের স্কিমটি এর ক্রিয়াকলাপকে প্রভাবিত করে না:
এখন শেষ টাস্কে যাওয়া যাক - ব্যবহারকারীর জন্য একটি বার্তা সেট আপ করা।
আরও কঠিন কাজ
আপনি বিভিন্ন উপায়ে পর্দায় একটি বার্তা প্রদর্শন করতে পারেন. আমরা সবচেয়ে অস্বাভাবিক এক বাছাই করেছি:
- প্রথমে, নিশ্চিত করা যাক যে ব্যবহারকারী সঠিক উত্তর দিলে প্রশ্ন সম্বলিত বোতামগুলি স্বয়ংক্রিয়ভাবে নিষ্ক্রিয় হয়ে যায়। তারা ধূসর হয়ে যাবে এবং ক্লিকে সাড়া দেওয়া বন্ধ করবে। এটি করার জন্য, আমরা সক্ষম (অক্ষম) ফাংশন ব্যবহার করি, যা আমরা এখনও বিবেচনা করিনি এবং ইতিমধ্যে পরিচিত "অনক্লিক"।
- তারপরে আমরা একটি নতুন ট্রিগার বিবেচনা করব - onStateChange, যা বোতামের অবস্থা পরিবর্তন হলে ট্রিগার হয়। আসুন এই ট্রিগারটিকে "?" - এবং বার্তাটি এতে প্রদর্শিত হবে।
নিষ্ক্রিয় করা বোতাম
আপনি "সক্ষম" ক্ষেত্র নির্বাচক টগল করে সেটিংসে বোতামটিকে ম্যানুয়ালি সক্ষম বা নিষ্ক্রিয় করতে পারেন:
স্বয়ংক্রিয় সুইচিং সেট আপ করতে, "ডাচেস' হাউস" বোতাম পছন্দগুলি খুলুন এবং একটি "অনক্লিক" ট্রিগার যুক্ত করুন৷ "টার্গেট কম্পোনেন্ট" ক্ষেত্রটিতে "অ্যাকশন" - "অক্ষম বোতাম" ক্ষেত্রগুলিতে একটি প্রশ্ন বোতাম নির্বাচন করুন। একটি প্রশ্ন রয়েছে এমন সমস্ত বোতামগুলির জন্য পুনরাবৃত্তি করুন। এটিকে ঐটির মত দেখতে হবে:
সমস্ত পরিবর্তনগুলি সংরক্ষণ করতে, প্রকাশ করতে এবং অ্যাপ্লিকেশনটি সঠিকভাবে কাজ করছে কিনা তা পরীক্ষা করতে ভুলবেন না।
এখন, মেসেজের শুরুটা বাটনে বাঁধাই করা যাক "?" (আমরা এটিকে "btn_qqq" নাম দিয়েছি)। এর সাথে "onStateChange" ট্রিগার যোগ করা যাক। বোতামের অবস্থা পরিবর্তিত হলে এটি সক্রিয় হয় - উদাহরণস্বরূপ, যখন এটি বন্ধ হয়ে যায়।
"লক্ষ্য উপাদান" ক্ষেত্রে, "অ্যাপ্লিকেশন" নির্বাচন করুন (অ্যাপ্লিকেশন উইন্ডোতে বার্তাটি পপ আপ হবে), "অ্যাকশন" ক্ষেত্রে - "ইউআই বার্তা দেখান" (ব্যবহারকারীকে একটি বার্তা দেখান)।
- "বার্তা শৈলী" ক্ষেত্রে, আপনার পরিস্থিতির জন্য সবচেয়ে উপযুক্ত একটি চয়ন করুন। আমাদের ক্ষেত্রে, এটি "সাফল্য" - সফল সমাপ্তি সম্পর্কে একটি বার্তা।
- "শিরোনাম" এবং "বিষয়বস্তু" ক্ষেত্রগুলি পূরণ করুন - ব্যবহারকারীকে জানান যে উত্তরটি সঠিক বা শুধু সুন্দর কিছু লিখুন৷
সংরক্ষণ, প্রকাশ এবং পরীক্ষা.
ফলাফল
সঠিক বিকল্পটি নির্বাচন করে, ভুল উত্তর সহ বোতামগুলি লুকানো উচিত, প্রশ্নের পাঠ্যটি বিবর্ণ হওয়া উচিত এবং একটি নিশ্চিতকরণ বার্তা পপ আপ করা উচিত।
অবশ্যই, সঠিক উত্তর বোতামে বাঁধার মাধ্যমে বার্তাটিকে আরও সহজে কাস্টমাইজ করা সম্ভব ছিল। যদিও আজ আমরা সহজ উপায় খুঁজছি না। তাছাড়া, আপনি ইতিমধ্যেই আমাদের নির্দেশনা ছাড়াই এটি করতে যথেষ্ট জানেন। ত্রুটি বার্তাটি কাস্টমাইজ করার চেষ্টা করুন যা আপনি ভুল উত্তর চয়ন করলে পপ আপ হবে । এটিকে ঐটির মত দেখতে হবে:
আমরা নিশ্চিত যে এই নির্দেশ আপনাকে Appmaster.io কে আরও ভালভাবে জানতে সাহায্য করেছে। তবে যদি এটি পরিষ্কার না হয় (বা সম্ভবত, বিপরীতে, খুব সহজ), আপনার প্রয়োজনীয় নির্দেশাবলী সম্পর্কে আমাদের প্রযুক্তিগত সহায়তার টেলিগ্রাম চ্যানেলে লিখুন। আমরা তাদের লিখব!
আপনি যদি Studio.appmaster.io সম্পর্কে আরও বিস্তারিত তথ্য খুঁজছেন, অনুগ্রহ করে আমাদের ডকুমেন্টেশন দেখুন।
