การตั้งค่าปุ่ม

มาทำแบบทดสอบสั้นๆ จากหนังสืออลิซผจญภัยในแดนมหัศจรรย์กันเถอะ มาดูกันว่าผู้ใช้จำที่ที่อลิซพบแมวเชสเชียร์ครั้งแรกได้หรือไม่
ใบสมัครของเราจะมี:

1. ข้อความคำถาม: อลิซพบแมวเชสเชียร์ครั้งแรกที่ไหน
2. ปุ่มตัวเลือก: Mad-Tea Party, Duchess' House, Wood, Croquet-Ground หากผู้ใช้เลือกคำตอบผิด ปุ่มจะหายไป หากผู้ใช้เลือกคำตอบที่ถูกต้อง ปุ่มทั้งหมดที่มีคำตอบผิดจะหายไปทันที
3. ข้อความป๊อปอัปที่แจ้งให้คุณทราบว่าคำตอบนั้นถูกต้องหรือไม่

วิธีสร้างปุ่ม

ลากองค์ประกอบ "ปุ่ม" ด้วยตัวชี้เมาส์ (โดยคลิกปุ่มซ้ายค้างไว้) ไปยังพื้นที่ที่คุณต้องการวางปุ่ม

คุณต้องเพิ่มสี่ปุ่ม - ตามจำนวนคำตอบที่เป็นไปได้

ปรับแต่งรูปลักษณ์ของปุ่ม

คลิกที่ปุ่มแรกหนึ่งครั้ง — หน้าต่างการตั้งค่าจะเปิดขึ้น คุณจะพบว่าตัวเองอยู่ในแท็บ " Look&Feel " ซึ่งมีหน้าที่รับผิดชอบในรูปลักษณ์ของปุ่มต่างๆ

1. แก้ไขฟิลด์ต่อไปนี้:

• ป้ายกำกับ : ปุ่มข้อความ - ป้อนคำตอบแรก: "Mad-Tea Party";
• ไอคอน : ไอคอนปุ่ม - คลิกที่ "เลือกไอคอน" และเลือกไอคอนที่คุณชอบ (ตอนนี้มีมากกว่า 2,500 รายการ)
  
• ขนาด : ขนาดปุ่ม - ตั้งค่าเป็น "ใหญ่" เพื่อทำให้ปุ่มใหญ่ขึ้น
  
• ชื่อ : นี่คือชื่อที่ปุ่ม "เห็น" โดยองค์ประกอบอื่นๆ ในแอปพลิเคชันของคุณ แต่ละปุ่มต้องมีชื่อเฉพาะ - ตั้งชื่อปุ่มว่า "btn-mad_tea"

เมื่อคุณแก้ไขฟิลด์ ภาพที่ด้านบนของหน้าต่างจะเปลี่ยนเพื่อแสดงว่าปุ่มจะมีลักษณะอย่างไรหลังจากใช้การตั้งค่าแล้ว

2. เมื่อคุณกรอกข้อมูลในฟิลด์ทั้งหมด - คลิก " บันทึก "

1. กำหนดค่าปุ่มที่เหลือโดยเปรียบเทียบกับปุ่มแรก โดยใช้ชื่อ: btn-duchess_h, btn-wood, btn-croquet_g
2. คลิก "บันทึกการเปลี่ยนแปลง" เพื่อบันทึกการเปลี่ยนแปลงในแอปพลิเคชันของคุณ มิฉะนั้น ปุ่มจะหายไปเมื่อคุณรีเฟรชหน้าหรือปิดตัวแก้ไข

การตั้งค่าทริกเกอร์และเหตุการณ์

ตอนนี้คุณต้องตั้งค่าการทำงานของปุ่ม เริ่มจากคำตอบที่ถูกต้อง - " Duchess' House " งานของคุณคือ "อธิบาย" ให้โปรแกรมแก้ไข Web Apps:

• ทริกเกอร์ของปุ่มคืออะไร - หมายถึงสิ่งที่ควรตอบสนอง: เมื่อกด;
• เกิดอะไรขึ้นในกรณีนี้: ปุ่มหายไป;
• เหตุการณ์นี้เกิดขึ้นที่ไหน องค์ประกอบใดที่เปลี่ยนแปลง: ปุ่มอื่นๆ

กลับไปที่การตั้งค่าปุ่ม "Duchess' House" และไปที่แท็บทริกเกอร์ ทริกเกอร์ทั้งหมดที่เพิ่มเข้ามาจะแสดง:

1. ตอนนี้มีเพียงหนึ่งเดียวเท่านั้น - " OnClick " มันถูกเพิ่มโดยอัตโนมัติและหมายความว่าปุ่มจะทำงานเมื่อคุณคลิก (ซึ่งเป็นสิ่งที่คุณต้องการ)
2. นอกจาก " OnClick " แล้ว ทริกเกอร์อื่นๆ ยังใช้ได้กับปุ่มอีกด้วย รายการทั้งหมดพร้อมคำอธิบายอยู่ในเอกสารประกอบของแพลตฟอร์ม

ตอนนี้คุณต้องระบุข้อมูลเกี่ยวกับเหตุการณ์ (คุณจะมีสามรายการ - หนึ่งรายการสำหรับแต่ละปุ่ม) คลิก " + " ถัดจาก " OnClick " หน้าต่างการตั้งค่าเหตุการณ์จะเปิดขึ้น

ในฟิลด์ " องค์ประกอบเป้าหมาย " คุณต้องระบุตำแหน่งที่เหตุการณ์จะเกิดขึ้น ในช่อง "การกระทำ" จะเป็นเหตุการณ์ประเภทใด

ซ่อนคำตอบที่ไม่ถูกต้องทั้งหมด

เพิ่มกิจกรรมที่จะซ่อนปุ่ม Mad-Tea Party:

1. คลิกที่ฟิลด์ " องค์ประกอบเป้าหมาย " และค้นหาโดยใช้ชื่อเฉพาะ btn-mad_tea ในฟิลด์การดำเนินการ เลือกเหตุการณ์ที่เหมาะสม ในกรณีนี้ - " ซ่อนปุ่ม "
2. คลิก “ บันทึก ”

กำหนดค่าปุ่มที่เหลือให้ซ่อนด้วยวิธีเดียวกัน‌

1. นี่คือลักษณะของรายการทริกเกอร์สำหรับปุ่ม “ Duchess ' House” เมื่อคุณทำเสร็จแล้ว
2. คลิก “ บันทึก ” เพื่อบันทึกการเปลี่ยนแปลงของคุณ

ตอนนี้คุณต้องแน่ใจว่าทุกอย่างใช้งานได้

1. บันทึกการเปลี่ยนแปลงของคุณ
2. กดปุ่มเพื่อเผยแพร่แอปพลิเคชัน (วางไว้บนอินเทอร์เน็ต) เลือก "การพัฒนา"
3. คลิกที่ไปที่ไอคอนแอปของคุณ ซึ่งจะเปิดขึ้นในแท็บใหม่

ไปที่แอพและตรวจสอบให้แน่ใจว่าเมื่อคุณเลือกตัวเลือกที่ถูกต้อง ปุ่มที่เหลือจะหายไป

ซ่อนคำตอบที่ไม่ถูกต้องเมื่อคลิก

ตอนนี้เรามาทำให้ปุ่มที่มีคำตอบผิด " Mad-Tea Party " หายไปเมื่อผู้ใช้คลิก ในกรณีนี้ทั้งทริกเกอร์ (การกด) และกิจกรรม (การหายไป) อยู่ในปุ่มเดียวกัน - คุณจะต้องใช้งานเท่านั้น
เปิดการตั้งค่าปุ่ม ไปที่แท็บ " ทริกเกอร์ " เพิ่มเหตุการณ์ใหม่ในทริกเกอร์ " onClick " ในฟิลด์ " องค์ประกอบเป้าหมาย " เลือก " องค์ประกอบนี้ (ตัวเอง) " เพื่อระบุว่าปุ่มเปิดใช้งานเหตุการณ์สำหรับตัวมันเอง ค่าของฟิลด์ " การกระทำ " จะเหมือนกับในตัวอย่างก่อนหน้า - " ซ่อนปุ่ม " บันทึกการเปลี่ยนแปลงทั้งหมดและเผยแพร่แอป สลับไปที่แท็บแอป แล้วรีเฟรช ตรวจสอบว่าทุกอย่างทำงานได้ตามที่ต้องการ:

ตอนนี้ปรับ " Wood " และ " Croquet-Ground " บันทึก เผยแพร่ และทดสอบอีกครั้ง

ประเภทของปุ่ม

เยี่ยมมากคำตอบใช้ได้ ได้เวลาเพิ่มคำถามแล้ว แน่นอน Appmaster.io มีองค์ประกอบพิเศษสำหรับสิ่งนี้ แต่คุณจำงานของเราได้ - ปุ่มและไม่มีอะไรอื่น งั้นขอเพิ่มอีกอันละกัน ครั้งนี้ - ไม่ใช่บนผืนผ้าใบหลัก แต่อยู่ด้านบนสุดของหน้า: เพื่อให้สนุกยิ่งขึ้น กรอกคำถามตามภาพหน้าจอนี้:

เพื่อให้สนุกยิ่งขึ้น กรอกคำถามตามภาพหน้าจอนี้:

ตอนนี้ "ระบายสี" โดยใช้ชุดสีสำหรับปุ่มประเภทต่างๆ: ไปที่การตั้งค่าและเปลี่ยนค่าในช่อง " ประเภท " เป็นค่าอื่น

เราได้สิ่งนี้ แต่คุณสามารถเลือกตัวเลือกของคุณได้ โทนสีของปุ่มไม่ส่งผลต่อการทำงานของมัน:

ตอนนี้เราไปยังงานสุดท้าย - ตั้งค่าข้อความสำหรับผู้ใช้

งานที่ยากขึ้น

คุณสามารถแสดงข้อความบนหน้าจอได้หลายวิธี เราได้เลือกสิ่งที่แปลกที่สุดมาหนึ่งรายการ:

ก่อนอื่น ตรวจสอบให้แน่ใจว่าปุ่มที่มีคำถามจะปิดใช้งานโดยอัตโนมัติเมื่อผู้ใช้ให้คำตอบที่ถูกต้อง พวกเขาจะเปลี่ยนเป็นสีเทาและหยุดตอบสนองต่อการคลิก ในการทำเช่นนี้ เราใช้ ฟังก์ชัน เปิด (ปิดใช้งาน) ซึ่งเรายังไม่ได้พิจารณา และ " onClick " ที่คุ้นเคยอยู่แล้ว - จากนั้นเราจะพิจารณาทริกเกอร์ใหม่ - onStateChange ซึ่งจะทริกเกอร์เมื่อสถานะของปุ่มเปลี่ยนไป มากำหนดทริกเกอร์นี้ให้กับ "?" - และข้อความจะปรากฏขึ้น

ปุ่มปิดการใช้งาน

คุณสามารถเปิดหรือปิดปุ่มด้วยตนเองในการตั้งค่าโดยสลับตัวเลือกฟิลด์ " เปิดใช้งาน ":

หากต้องการตั้งค่าการสลับอัตโนมัติ ให้เปิดการตั้งค่าปุ่ม “ Duchess ' House” และเพิ่มทริกเกอร์ “ onClick ” ในช่อง "องค์ประกอบเป้าหมาย" เลือกปุ่มคำถามปุ่มใดปุ่มหนึ่ง ในช่อง "การกระทำ" - " ปุ่มปิด การใช้งาน " ทำซ้ำสำหรับทุกปุ่มที่มีคำถาม ควรมีลักษณะดังนี้:

อย่าลืมบันทึกการเปลี่ยนแปลงทั้งหมด เผยแพร่ และตรวจสอบว่าแอปพลิเคชันทำงานอย่างถูกต้องหรือไม่

ตอนนี้มาผูกจุดเริ่มต้นของข้อความกับปุ่ม "?" (เราตั้งชื่อมันว่า "btn_qqq") เพิ่มทริกเกอร์ " onStateChange " เข้าไป จะเปิดใช้งานเมื่อสถานะของปุ่มเปลี่ยนไป เช่น เมื่อปุ่มดับลง ใน

ฟิลด์ " ส่วนประกอบเป้าหมาย " เลือก " แอปพลิเคชัน " (ข้อความจะปรากฏขึ้นในหน้าต่างแอปพลิเคชัน) ในช่อง " การกระทำ " - " แสดงข้อความ UI " (แสดงข้อความถึงผู้ใช้)

1. ในช่อง " รูปแบบข้อความ " เลือกรูปแบบที่เหมาะสมกับสถานการณ์ของคุณมากที่สุด ในกรณีของเรานี่คือ " สำเร็จ " - ข้อความเกี่ยวกับการทำให้สำเร็จ
2. กรอกข้อมูลในช่อง " ชื่อเรื่อง " และ " เนื้อหา " - แจ้งให้ผู้ใช้ทราบว่าคำตอบนั้นถูกต้องหรือเพียงแค่เขียนสิ่งที่ดี

บันทึก เผยแพร่ และทดสอบ

ผลลัพธ์

การเลือกตัวเลือกที่ถูกต้อง ควรซ่อนปุ่มที่มีคำตอบที่ไม่ถูกต้อง ข้อความของคำถามควรจางหายไป และข้อความยืนยันควรปรากฏขึ้น

แน่นอน มันเป็นไปได้ที่จะปรับแต่งข้อความได้ง่ายขึ้นโดยการผูกเข้ากับปุ่มคำตอบที่ถูกต้อง แม้ว่าวันนี้เราไม่ได้มองหาวิธีที่ง่าย ยิ่งไปกว่านั้น คุณรู้ดีพอที่จะทำสิ่งนี้โดยปราศจากคำแนะนำของเราแล้ว พยายามปรับแต่ง ข้อความแสดงข้อผิดพลาดที่จะปรากฏขึ้นเมื่อคุณเลือกคำตอบผิด ควรมีลักษณะดังนี้:

เรามั่นใจว่าคำแนะนำนี้ช่วยให้คุณรู้จัก Appmaster.io ดีขึ้น แต่ถ้าไม่ชัดเจน (หรืออาจจะง่ายเกินไป) เขียนถึงช่องทางโทรเลขของฝ่ายสนับสนุนด้านเทคนิคของเราเกี่ยวกับคำแนะนำที่คุณต้องการ เราจะเขียนมัน!