বোতাম সেটআপ

অ্যালিসের অ্যাডভেঞ্চারস ইন ওয়ান্ডারল্যান্ড বইটির উপর ভিত্তি করে একটি ছোট কুইজ তৈরি করা যাক। অ্যালিস চেশায়ার বিড়ালের সাথে কোথায় দেখা করেছিল তা ব্যবহারকারীদের মনে আছে কিনা তা খুঁজে বের করা যাক।
আমাদের আবেদন থাকবে:

1. প্রশ্ন পাঠ্য: এলিস প্রথম চেশায়ার বিড়ালের সাথে কোথায় দেখা করেছিলেন?
2. পছন্দের বোতাম: ম্যাড-টি পার্টি, ডাচেস হাউস, কাঠ, ক্রোকেট-গ্রাউন্ড । ব্যবহারকারী ভুল উত্তর বেছে নিলে - এর সাথে থাকা বোতামটি অদৃশ্য হয়ে যায়, যদি ব্যবহারকারী সঠিকটি বেছে নেয় - ভুল উত্তর সহ সমস্ত বোতাম একবারে অদৃশ্য হয়ে যায়।
3. পপ-আপ বার্তা যা আপনাকে বলে যে উত্তরটি সঠিক ছিল কি না।

কিভাবে একটি বোতাম তৈরি করতে হয়

মাউস পয়েন্টার দিয়ে "বোতাম" উপাদানটিকে টেনে আনুন (বাম কীটি ক্লিক করে ধরে) যেখানে আপনি বোতামটি রাখতে চান।

সম্ভাব্য উত্তরের সংখ্যা অনুসারে আপনাকে চারটি বোতাম যুক্ত করতে হবে।

কাস্টমাইজ বোতাম চেহারা

প্রথম বোতামে একবার ক্লিক করুন - সেটিংস উইন্ডো খুলবে। আপনি নিজেকে " লুক অ্যান্ড ফিল " ট্যাবে খুঁজে পাবেন, যা বোতামগুলির উপস্থিতির জন্য দায়ী৷

1. নিম্নলিখিত ক্ষেত্রগুলি সম্পাদনা করুন:

• লেবেল : বোতাম পাঠ্য - প্রথম উত্তর লিখুন: "ম্যাড-টি পার্টি";
• আইকন : বোতাম আইকন - "পিক আইকন" এ ক্লিক করুন এবং আপনার পছন্দের একটি বেছে নিন (এখন তাদের মধ্যে 2500 টিরও বেশি আছে);
  
• আকার : বোতামের আকার - বোতামটি বড় করতে "বড়" সেট করুন;
  
• নাম : এটি সেই নাম যার দ্বারা আপনার অ্যাপ্লিকেশনের অন্যান্য উপাদান দ্বারা বোতামটি "দেখা" হয়; প্রতিটি বোতামের একটি অনন্য নাম প্রয়োজন - বোতামটিকে "btn-mad_tea" নাম দিন।

আপনি যখন ক্ষেত্রগুলি সম্পাদনা করেন, তখন সেটিংস প্রয়োগ করার পরে বোতামটি কীভাবে দেখাবে তা দেখানোর জন্য উইন্ডোর উপরের চিত্রটি পরিবর্তন হবে।

2. আপনি যখন সমস্ত ক্ষেত্র পূরণ করবেন - " সংরক্ষণ করুন" এ ক্লিক করুন৷

1. বাকী বোতামগুলিকে প্রথমটির সাথে সাদৃশ্য রেখে, নামগুলি ব্যবহার করে কনফিগার করুন: btn-duchess_h, btn-wood, btn-croquet_g৷
2. আপনার অ্যাপ্লিকেশনে পরিবর্তনগুলি সংরক্ষণ করতে "পরিবর্তনগুলি সংরক্ষণ করুন" এ ক্লিক করুন - অন্যথায়, আপনি একবার পৃষ্ঠা রিফ্রেশ করলে বা সম্পাদক বন্ধ করলে বোতামগুলি অদৃশ্য হয়ে যাবে৷

ট্রিগার এবং ইভেন্ট সেট আপ করা

এখন আপনাকে বোতামগুলির ক্রিয়াগুলি সেট করতে হবে। আসুন সঠিক উত্তর দিয়ে শুরু করা যাক - " ডাচেস হাউস "। আপনার কাজ হল ওয়েব অ্যাপস সম্পাদককে "ব্যাখ্যা করা":

• বোতামটির ট্রিগার কী - মানে, এটির ঠিক কী প্রতিক্রিয়া হওয়া উচিত: টিপে;
• এই ক্ষেত্রে কি ঘটনা ঘটে: বোতামগুলি অদৃশ্য হয়ে যায়;
• এই ঘটনাটি কোথায় ঘটে, কোন উপাদানগুলি পরিবর্তন করে: অন্যান্য বোতাম।

"ডাচেস হাউস" বোতাম সেটিংসে ফিরে যান এবং ট্রিগার ট্যাবে যান৷ এর জন্য যোগ করা সমস্ত ট্রিগার প্রদর্শিত হবে:

1. এখন শুধুমাত্র একটি আছে - " অনক্লিক "। এটি স্বয়ংক্রিয়ভাবে যুক্ত হয় এবং এর মানে হল যে আপনি এটিতে ক্লিক করলে বোতামটি কাজ করবে (যা আপনার প্রয়োজন ঠিক তাই)।
2. " OnClick " ছাড়াও, বোতামটির জন্য অন্যান্য ট্রিগারগুলি সম্ভব। একটি বিবরণ সহ একটি সম্পূর্ণ তালিকা প্ল্যাটফর্ম ডকুমেন্টেশনে রয়েছে।

এখন আপনাকে ইভেন্ট সম্পর্কে তথ্য নির্দিষ্ট করতে হবে (আপনার কাছে তাদের তিনটি থাকবে - প্রতিটি বোতামের জন্য একটি)। " OnClick " এর পাশে " + " ক্লিক করুন৷ ইভেন্ট সেটিংস উইন্ডো খুলবে।

" টার্গেট কম্পোনেন্ট " ফিল্ডে, ইভেন্টটি কোথায় ঘটবে তা আপনাকে নির্দেশ করতে হবে, "অ্যাকশন" ফিল্ডে - এটি কী ধরনের ইভেন্ট হবে।

সব ভুল উত্তর লুকান

একটি ইভেন্ট যোগ করুন যা ম্যাড-টি পার্টি বোতাম লুকিয়ে রাখবে:

1. " টার্গেট কম্পোনেন্ট " ফিল্ডে ক্লিক করুন এবং এটিকে অনন্য নাম btn-mad_tea দ্বারা খুঁজুন। অ্যাকশন ক্ষেত্রে, উপযুক্ত ইভেন্টটি নির্বাচন করুন, এই ক্ষেত্রে - " লুকান বোতাম "।
2. " সংরক্ষণ করুন " এ ক্লিক করুন।

বাকি বোতামগুলিকে একইভাবে লুকানোর জন্য কনফিগার করুন

1. " ডাচেস 'হাউস" বোতামের জন্য ট্রিগারগুলির তালিকাটি আপনার কাজ শেষ হয়ে গেলে এইরকম দেখতে হবে৷
2. আপনার পরিবর্তনগুলি সংরক্ষণ করতে " সংরক্ষণ করুন " এ ক্লিক করুন।

এখন আপনাকে সবকিছু কাজ করে তা নিশ্চিত করতে হবে।

1. আপনার পরিবর্তন সংরক্ষণ করুন.
2. অ্যাপ্লিকেশনটি প্রকাশ করার জন্য বোতাম টিপুন (এটি ইন্টারনেটে স্থাপন করা), "উন্নয়ন" নির্বাচন করুন।
3. Go to your app আইকনে ক্লিক করুন - এটি একটি নতুন ট্যাবে খুলবে।

অ্যাপে যান এবং নিশ্চিত করুন যে আপনি যখন সঠিক বিকল্পটি নির্বাচন করেন, বাকি বোতামগুলি অদৃশ্য হয়ে যায়।

ক্লিকে ভুল উত্তর লুকান

এখন ভুল উত্তর দিয়ে বোতামটি তৈরি করা যাক " ম্যাড-টি পার্টি " ব্যবহারকারী এটিতে ক্লিক করলে অদৃশ্য হয়ে যায়। এই ক্ষেত্রে, ট্রিগার (টিপে) এবং ইভেন্ট (অদৃশ্য হওয়া) উভয়ই একই বোতামের অন্তর্গত - আপনাকে কেবল এটির সাথে কাজ করতে হবে।
বোতাম সেটিংস খুলুন, " ট্রিগারস " ট্যাবে যান, " অনক্লিক " ট্রিগারে একটি নতুন ইভেন্ট যোগ করুন। " টার্গেট কম্পোনেন্ট " ফিল্ডে, বোতামটি নিজের জন্য একটি ইভেন্ট সক্রিয় করে তা নির্দেশ করতে " এই উপাদান (স্ব) " নির্বাচন করুন। " কর্ম " ক্ষেত্রের মান আগের উদাহরণের মতোই - " লুকান বোতাম "। সমস্ত পরিবর্তন সংরক্ষণ করুন এবং অ্যাপটি প্রকাশ করুন, অ্যাপ ট্যাবে স্যুইচ করুন এবং রিফ্রেশ করুন। চেক করুন যে সবকিছু উদ্দেশ্য হিসাবে কাজ করে:

এখন " কাঠ " এবং " ক্রোকেট-গ্রাউন্ড " সমন্বয় করুন। সংরক্ষণ করুন, প্রকাশ করুন এবং আবার পরীক্ষা করুন।

বোতামের প্রকারভেদ

দুর্দান্ত, উত্তরগুলি কাজ করে। এটি একটি প্রশ্ন যোগ করার সময়. অবশ্যই, Appmaster.io এর জন্য বিশেষ উপাদান রয়েছে, তবে আপনি আমাদের কাজটি মনে রাখবেন - বোতাম এবং অন্য কিছু নয়। তাই আরো একটি যোগ করা যাক. এই সময় - মূল ক্যানভাসে নয়, পৃষ্ঠার শীর্ষে: এটিকে আরও মজাদার করতে, এই স্ক্রিনশটের মতো প্রশ্নটি পূরণ করুন:

এটিকে আরও মজাদার করতে, এই স্ক্রিনশটের মতো প্রশ্নটি পূরণ করুন:

এখন বিভিন্ন ধরণের বোতামের জন্য রঙের স্কিম ব্যবহার করে "রঙিন করুন": সেটিংসে যান এবং " টাইপ " ক্ষেত্রের মানটিকে অন্য যেকোনোটিতে পরিবর্তন করুন৷

আমরা এটির মতো এটি পেয়েছি, তবে আপনি আপনার বিকল্পটি চয়ন করতে পারেন, বোতামের রঙের স্কিমটি এর ক্রিয়াকলাপকে প্রভাবিত করে না:

এখন শেষ টাস্কে যাওয়া যাক - ব্যবহারকারীর জন্য একটি বার্তা সেট আপ করা।

আরও কঠিন কাজ

আপনি বিভিন্ন উপায়ে পর্দায় একটি বার্তা প্রদর্শন করতে পারেন. আমরা সবচেয়ে অস্বাভাবিক এক বাছাই করেছি:

প্রথমে, আসুন নিশ্চিত করি যে ব্যবহারকারী সঠিক উত্তর দিলে প্রশ্ন সম্বলিত বোতামগুলি স্বয়ংক্রিয়ভাবে নিষ্ক্রিয় হয়ে যায়। তারা ধূসর হয়ে যাবে এবং ক্লিকে সাড়া দেওয়া বন্ধ করবে। এটি করার জন্য, আমরা সক্রিয় (অক্ষম) ফাংশন ব্যবহার করি, যা আমরা এখনও বিবেচনা করিনি এবং ইতিমধ্যে পরিচিত " onClick "। - তারপরে আমরা একটি নতুন ট্রিগার বিবেচনা করব - onStateChange , যা বোতামের অবস্থা পরিবর্তন হলে ট্রিগার হয়। আসুন এই ট্রিগারটিকে "?" - এবং এটিতে বার্তাটি প্রদর্শিত হবে।

নিষ্ক্রিয় করা বোতাম

আপনি " সক্রিয় " ক্ষেত্রের নির্বাচক টগল করে সেটিংসে ম্যানুয়ালি বোতামটি সক্ষম বা নিষ্ক্রিয় করতে পারেন:

স্বয়ংক্রিয় সুইচিং সেট আপ করতে, " ডাচেস 'হাউস" বোতাম পছন্দগুলি খুলুন এবং একটি " অনক্লিক " ট্রিগার যুক্ত করুন৷ "লক্ষ্য উপাদান" ক্ষেত্রের মধ্যে একটি প্রশ্ন বোতাম নির্বাচন করুন, "অ্যাকশন" - " নিষ্ক্রিয় বোতাম "। একটি প্রশ্ন রয়েছে এমন সমস্ত বোতামগুলির জন্য পুনরাবৃত্তি করুন। এটিকে ঐটির মত দেখতে হবে:

সমস্ত পরিবর্তনগুলি সংরক্ষণ করতে, প্রকাশ করতে এবং অ্যাপ্লিকেশনটি সঠিকভাবে কাজ করছে কিনা তা পরীক্ষা করতে ভুলবেন না।

এখন, মেসেজের শুরুটা বাটনে বাঁধাই করা যাক "?" (আমরা এটিকে "btn_qqq" নাম দিয়েছি)। এর সাথে " onStateChange " ট্রিগার যোগ করা যাক। বোতামের অবস্থা পরিবর্তিত হলে এটি সক্রিয় হয় - উদাহরণস্বরূপ, যখন এটি বন্ধ হয়ে যায়

“ টার্গেট কম্পোনেন্ট ” ক্ষেত্র, “ অ্যাপ্লিকেশন ” (বার্তাটি অ্যাপ্লিকেশন উইন্ডোতে পপ আপ হবে) নির্বাচন করুন, “ অ্যাকশন ” ক্ষেত্রে - “ ইউআই বার্তা দেখান ” (ব্যবহারকারীকে একটি বার্তা দেখান)।

1. " বার্তা শৈলী " ক্ষেত্রে, আপনার পরিস্থিতির জন্য সবচেয়ে উপযুক্ত একটি বেছে নিন। আমাদের ক্ষেত্রে, এটি " সাফল্য " - সফল সমাপ্তি সম্পর্কে একটি বার্তা।
2. " শিরোনাম " এবং " বিষয়বস্তু " ক্ষেত্রগুলি পূরণ করুন - ব্যবহারকারীকে জানান যে উত্তরটি সঠিক বা শুধু সুন্দর কিছু লিখুন৷

সংরক্ষণ, প্রকাশ এবং পরীক্ষা.

ফলাফল

সঠিক বিকল্পটি নির্বাচন করে, ভুল উত্তর সহ বোতামগুলি লুকানো উচিত, প্রশ্নের পাঠ্যটি বিবর্ণ হওয়া উচিত এবং একটি নিশ্চিতকরণ বার্তা পপ আপ করা উচিত।

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

আমরা নিশ্চিত যে এই নির্দেশ আপনাকে Appmaster.io কে আরও ভালভাবে জানতে সাহায্য করেছে। তবে যদি এটি পরিষ্কার না হয় (বা সম্ভবত, বিপরীতে, খুব সহজ), আপনার প্রয়োজনীয় নির্দেশাবলী সম্পর্কে আমাদের প্রযুক্তিগত সহায়তার টেলিগ্রাম চ্যানেলে লিখুন। আমরা তাদের লিখব!