बटन सेटअप

आइए ऐलिस एडवेंचर्स इन वंडरलैंड पुस्तक पर आधारित एक लघु प्रश्नोत्तरी बनाएं। आइए जानें कि क्या उपयोगकर्ताओं को याद है कि एलिस पहली बार चेशायर कैट से कहां मिलती है।
हमारे आवेदन में होगा:

1. प्रश्न पाठ: एलिस पहली बार चेशायर कैट से कहाँ मिली थी?
2. चॉइस बटन: मैड-टी पार्टी, डचेस हाउस, वुड, क्रोकेट-ग्राउंड । यदि उपयोगकर्ता ने गलत उत्तर चुना है - इसके साथ वाला बटन गायब हो जाता है, यदि उपयोगकर्ता ने सही उत्तर चुना है - तो गलत उत्तरों वाले सभी बटन एक ही बार में गायब हो जाते हैं।
3. पॉप-अप संदेश जो आपको बताते हैं कि उत्तर सही था या नहीं।

बटन कैसे बनाएं

माउस पॉइंटर के साथ "बटन" तत्व को खींचें (बाईं कुंजी को क्लिक करके और दबाकर) उस क्षेत्र में जहां आप बटन रखना चाहते हैं।

आपको चार बटन जोड़ने होंगे - संभावित उत्तरों की संख्या के अनुसार।

अनुकूलित बटन उपस्थिति

एक बार पहले बटन पर क्लिक करें - सेटिंग्स विंडो खुल जाएगी। आप अपने आप को " लुक एंड फील " टैब पर पाएंगे, जो बटनों की उपस्थिति के लिए जिम्मेदार है।

1. निम्नलिखित फ़ील्ड संपादित करें:

• लेबल : बटन टेक्स्ट - पहला उत्तर दर्ज करें: "मैड-टी पार्टी";
• आइकन : बटन आइकन - "आइकन चुनें" पर क्लिक करें और जिसे आप पसंद करते हैं उसे चुनें (अब उनमें से 2500 से अधिक हैं);
  
• आकार : बटन का आकार - बटन को बड़ा करने के लिए "बड़ा" पर सेट करें;
  
• नाम : यह वह नाम है जिसके द्वारा आपके एप्लिकेशन में अन्य तत्वों द्वारा बटन को "देखा" जाता है; प्रत्येक बटन को एक अद्वितीय नाम की आवश्यकता होती है - बटन को "btn-mad_tea" नाम दें।

जब आप फ़ील्ड संपादित करते हैं, तो विंडो के शीर्ष पर स्थित छवि यह दिखाने के लिए बदल जाएगी कि सेटिंग्स लागू होने के बाद बटन कैसा दिखेगा।

2. जब आप सभी फ़ील्ड भर दें - " सहेजें " पर क्लिक करें।

1. नामों का उपयोग करके शेष बटनों को पहले के साथ सादृश्य द्वारा कॉन्फ़िगर करें: btn-duchess_h, btn-wood, btn-croquet_g।
2. अपने एप्लिकेशन में परिवर्तनों को सहेजने के लिए "परिवर्तन सहेजें" पर क्लिक करें - अन्यथा, आपके द्वारा पृष्ठ को ताज़ा करने या संपादक को बंद करने के बाद बटन गायब हो जाएंगे।

ट्रिगर और ईवेंट सेट करना

अब आपको बटन के कार्यों को सेट करने की आवश्यकता है। आइए सही उत्तर के साथ शुरू करें - " डचेस हाउस "। आपका कार्य वेब ऐप्स संपादक को "समझाना" है:

• बटन का ट्रिगर क्या है - इसका मतलब है कि इसे वास्तव में किस पर प्रतिक्रिया देनी चाहिए: दबाने पर;
• इस मामले में क्या घटना होती है: बटन गायब हो जाते हैं;
• जहां यह घटना होती है, वहां कौन से तत्व बदलते हैं: अन्य बटन।

"डचेस हाउस" बटन सेटिंग पर वापस जाएं और ट्रिगर टैब पर जाएं। इसके लिए जोड़े गए सभी ट्रिगर प्रदर्शित होंगे:

1. अब केवल एक ही है - " ऑनक्लिक "। यह स्वचालित रूप से जोड़ा जाता है और इसका मतलब है कि जब आप उस पर क्लिक करेंगे तो बटन कार्य करेगा (जो वास्तव में आपको चाहिए)।
2. " ऑनक्लिक " के अतिरिक्त, बटन के लिए अन्य ट्रिगर संभव हैं। विवरण के साथ एक पूरी सूची प्लेटफ़ॉर्म दस्तावेज़ीकरण में है।

अब आपको घटना के बारे में जानकारी निर्दिष्ट करने की आवश्यकता है (आपके पास उनमें से तीन होंगे - प्रत्येक बटन के लिए एक)। " ऑनक्लिक " के आगे " + " पर क्लिक करें। इवेंट सेटिंग विंडो खुलेगी।

" लक्ष्य घटक " फ़ील्ड में, आपको यह इंगित करने की आवश्यकता है कि ईवेंट कहाँ होगा, "एक्शन" फ़ील्ड में - यह किस प्रकार का ईवेंट होगा।

सभी गलत उत्तर छुपाएं

एक ईवेंट जोड़ें जो मैड-टी पार्टी बटन को छुपाएगा:

1. " लक्ष्य घटक " फ़ील्ड पर क्लिक करें और इसे अद्वितीय नाम btn-mad_tea द्वारा खोजें। क्रिया क्षेत्र में, उपयुक्त घटना का चयन करें, इस मामले में - " बटन छुपाएं "।
2. " सहेजें " पर क्लिक करें।

बाकी बटनों को इसी तरह छुपाने के लिए कॉन्फ़िगर करें

1. जब आप काम पूरा कर लें तो " डचेस हाउस" बटन के लिए ट्रिगर्स की सूची इस तरह दिखनी चाहिए।
2. अपने परिवर्तनों को सहेजने के लिए " सहेजें " पर क्लिक करें।

अब आपको यह सुनिश्चित करने की ज़रूरत है कि सब कुछ काम करता है।

1. अपने परिवर्तन सहेजें।
2. एप्लिकेशन को प्रकाशित करने के लिए बटन दबाएं (इसे इंटरनेट पर रखकर), "विकास" चुनें।
3. गो टू योर ऐप आइकन पर क्लिक करें - यह एक नए टैब में खुल जाएगा।

ऐप पर जाएं और सुनिश्चित करें कि जब आप सही विकल्प चुनते हैं, तो बाकी बटन गायब हो जाते हैं।

क्लिक पर गलत जवाब छुपाएं

अब गलत उत्तर वाला बटन " मैड-टी पार्टी " गायब कर देते हैं जब उपयोगकर्ता उस पर क्लिक करता है। इस मामले में, ट्रिगर (दबाने) और घटना (गायब) दोनों एक ही बटन से संबंधित हैं - आपको केवल इसके साथ काम करने की आवश्यकता है।
बटन सेटिंग खोलें, " ट्रिगर " टैब पर जाएं, " ऑनक्लिक " ट्रिगर में एक नया ईवेंट जोड़ें। " लक्ष्य घटक " फ़ील्ड में, " यह घटक (स्वयं) " चुनें ताकि यह इंगित किया जा सके कि बटन स्वयं के लिए किसी ईवेंट को सक्रिय करता है। " एक्शन " फ़ील्ड का मान पिछले उदाहरण - " हाइड बटन " के समान है। सभी परिवर्तन सहेजें और ऐप प्रकाशित करें, ऐप टैब पर स्विच करें और इसे रीफ़्रेश करें। जांचें कि सब कुछ इरादा के अनुसार काम करता है:

अब " वुड " और " क्रोकेट-ग्राउंड " को एडजस्ट करें। सहेजें, प्रकाशित करें और फिर से परीक्षण करें।

बटन के प्रकार

बढ़िया, जवाब काम करते हैं। एक प्रश्न जोड़ने का समय आ गया है। बेशक, इसके लिए Appmaster.io के पास विशेष तत्व हैं, लेकिन आपको हमारा काम याद है - बटन और कुछ नहीं। तो चलिए एक और जोड़ते हैं। इस बार - मुख्य कैनवास पर नहीं, बल्कि पृष्ठ के शीर्ष पर: इसे और मज़ेदार बनाने के लिए, इस स्क्रीनशॉट के अनुसार प्रश्न भरें:

इसे और मज़ेदार बनाने के लिए, इस स्क्रीनशॉट के अनुसार प्रश्न भरें:

अब विभिन्न प्रकार के बटनों के लिए रंग योजनाओं का उपयोग करके "रंगीन" करें: सेटिंग्स पर जाएं और " टाइप " फ़ील्ड में मान को किसी अन्य पर स्विच करें।

हमें यह इस तरह मिला, लेकिन आप अपना विकल्प चुन सकते हैं, बटन की रंग योजना इसके संचालन को प्रभावित नहीं करती है:

अब अंतिम कार्य पर चलते हैं - उपयोगकर्ता के लिए एक संदेश सेट करना।

अधिक कठिन कार्य

आप स्क्रीन पर एक संदेश को विभिन्न तरीकों से प्रदर्शित कर सकते हैं। हमने सबसे असामान्य में से एक को चुना है:

सबसे पहले, आइए सुनिश्चित करें कि उपयोगकर्ता द्वारा सही उत्तर दिए जाने पर प्रश्न वाले बटन स्वचालित रूप से निष्क्रिय हो जाते हैं। वे धूसर हो जाएंगे और क्लिकों का जवाब देना बंद कर देंगे। ऐसा करने के लिए, हम सक्षम (अक्षम) फ़ंक्शन का उपयोग करते हैं, जिसे हमने अभी तक नहीं माना है, और पहले से ही परिचित " ऑनक्लिक "। - फिर हम एक नए ट्रिगर पर विचार करेंगे - onStateChange , जो बटन की स्थिति बदलने पर चालू हो जाता है। आइए इस ट्रिगर को "?" - और उस पर संदेश प्रदर्शित होगा।

निष्क्रिय करने वाले बटन

आप " सक्षम करें " फ़ील्ड चयनकर्ता को टॉगल करके इसकी सेटिंग में मैन्युअल रूप से बटन को सक्षम या अक्षम कर सकते हैं:

स्वचालित स्विचिंग सेट करने के लिए, " डचेस हाउस" बटन प्राथमिकताएं खोलें और " ऑनक्लिक " ट्रिगर जोड़ें। "लक्षित घटक" फ़ील्ड में "एक्शन" - " अक्षम बटन " फ़ील्ड में, प्रश्न बटनों में से एक का चयन करें। उन सभी बटनों के लिए दोहराएं जिनमें कोई प्रश्न है। इसे ऐसा दिखना चाहिए:

सभी परिवर्तनों को सहेजना, प्रकाशित करना और जांचना याद रखें कि एप्लिकेशन सही तरीके से काम कर रहा है या नहीं।

अब, संदेश की शुरुआत को "?" बटन से बाँधते हैं। (हमने इसे "btn_qqq" नाम दिया है)। आइए इसमें " onStateChange " ट्रिगर जोड़ें। यह तब सक्रिय होता है जब बटन की स्थिति बदल जाती है - उदाहरण के लिए, जब यह बंद हो जाता है

" लक्ष्य घटक " फ़ील्ड, " एप्लिकेशन " (एप्लिकेशन विंडो में संदेश पॉप अप होगा) का चयन करें, " क्रिया " फ़ील्ड में - " यूआई संदेश दिखाएं " (उपयोगकर्ता को एक संदेश दिखाएं)।

1. " संदेश शैली " फ़ील्ड में, वह चुनें जो आपकी स्थिति के लिए सबसे उपयुक्त हो। हमारे मामले में, यह " सफलता " है - सफल समापन के बारे में एक संदेश।
2. " शीर्षक " और " सामग्री " फ़ील्ड भरें - उपयोगकर्ता को सूचित करें कि उत्तर सही है या बस कुछ अच्छा लिखें।

सहेजें, प्रकाशित करें और परीक्षण करें।

परिणाम

सही विकल्प चुनना, गलत उत्तरों वाले बटन छिपाए जाने चाहिए, प्रश्न का पाठ फीका पड़ना चाहिए और एक पुष्टिकरण संदेश पॉप अप होना चाहिए।

बेशक, संदेश को सही उत्तर बटन से बांधकर अधिक आसानी से अनुकूलित करना संभव था। हालांकि आज हम आसान तरीकों की तलाश नहीं कर रहे हैं। इसके अलावा, आप पहले से ही हमारे निर्देशों के बिना ऐसा करने के लिए पर्याप्त जानते हैं। त्रुटि संदेश को अनुकूलित करने का प्रयास करें जो आपके द्वारा गलत उत्तर चुनने पर पॉप अप होगा । इसे ऐसा दिखना चाहिए:

हमें यकीन है कि इस निर्देश ने आपको Appmaster.io को बेहतर तरीके से जानने में मदद की है। लेकिन अगर यह स्पष्ट नहीं था (या शायद, इसके विपरीत, बहुत सरल), तो आपको आवश्यक निर्देशों के बारे में हमारे तकनीकी समर्थन के टेलीग्राम चैनल को लिखें। हम उन्हें लिखेंगे!