Cài đặt nút

Hãy làm một bài kiểm tra ngắn dựa trên cuốn sách Những cuộc phiêu lưu của Alice vào xứ sở thần tiên. Hãy tìm hiểu xem người dùng có nhớ nơi Alice gặp Cheshire Cat lần đầu không.
Ứng dụng của chúng ta sẽ có:

1. Văn bản câu hỏi: Lần đầu tiên Alice gặp Cheshire Cat ở đâu?
2. Các nút lựa chọn: Mad-Tea Party, Duchess' House, Wood, Croquet-Ground . Nếu người dùng chọn câu trả lời sai - nút có câu trả lời sai sẽ biến mất, nếu người dùng chọn đúng - tất cả các nút có câu trả lời sai sẽ biến mất cùng một lúc.
3. Thông báo bật lên cho bạn biết câu trả lời có đúng hay không.

Cách tạo một nút

Kéo phần tử "Nút" bằng con trỏ chuột (bằng cách nhấp và giữ phím trái) đến khu vực bạn muốn đặt nút.

Bạn cần thêm bốn nút - theo số lượng câu trả lời có thể.

Tùy chỉnh giao diện nút

Nhấp vào nút đầu tiên một lần - cửa sổ cài đặt sẽ mở ra. Bạn sẽ thấy mình đang ở trên tab " Look&Feel ", tab này chịu trách nhiệm về sự xuất hiện của các nút.

1.Chỉnh sửa các trường sau:

• Nhãn : văn bản nút - nhập câu trả lời đầu tiên: "Mad-Tea Party";
• Biểu tượng : biểu tượng nút - nhấp vào "Chọn biểu tượng" và chọn biểu tượng bạn thích (hiện có hơn 2500 biểu tượng);
  
• Kích thước : kích thước nút - đặt thành “Lớn” để làm cho nút lớn;
  
• Tên : Đây là tên mà các phần tử khác trong ứng dụng của bạn "nhìn thấy" nút này; mỗi nút cần một tên duy nhất - đặt tên cho nút là "btn-mad_tea".

Khi bạn chỉnh sửa các trường, hình ảnh ở đầu cửa sổ sẽ thay đổi để hiển thị giao diện của nút sau khi áp dụng cài đặt.

2. Khi bạn điền vào tất cả các trường - hãy nhấp vào " Lưu ".

1. Định cấu hình các nút còn lại bằng cách tương tự với nút đầu tiên, sử dụng tên: btn-duchess_h, btn-wood, btn-croquet_g.
2. Nhấp vào "Lưu thay đổi" để lưu các thay đổi đối với ứng dụng của bạn - nếu không, các nút sẽ biến mất sau khi bạn làm mới trang hoặc đóng trình chỉnh sửa.

Thiết lập trình kích hoạt và sự kiện

Bây giờ bạn cần thiết lập hành động của các nút. Hãy bắt đầu với câu trả lời đúng - " Nhà của nữ công tước ". Nhiệm vụ của bạn là “giải thích” cho Web Apps editor:

• nút kích hoạt là gì - có nghĩa là nó sẽ phản ứng chính xác với cái gì: khi nhấn;
• sự kiện nào xảy ra trong trường hợp này: các nút biến mất;
• sự kiện này xảy ra ở đâu, yếu tố nào thay đổi: các nút khác.

Quay lại cài đặt nút "Nhà của nữ công tước" và chuyển đến tab Kích hoạt. Tất cả các trình kích hoạt đã được thêm cho nó sẽ được hiển thị:

1. Bây giờ chỉ có một - " OnClick ". Nó được thêm tự động và có nghĩa là nút sẽ hoạt động khi bạn nhấp vào nút đó (chính xác là thứ bạn cần).
2. Ngoài " OnClick ", nút có thể kích hoạt các trình kích hoạt khác. Một danh sách đầy đủ với một mô tả có trong tài liệu nền tảng.

Bây giờ bạn cần chỉ định thông tin về sự kiện (bạn sẽ có ba trong số chúng - một cho mỗi nút). Nhấp vào dấu " + " bên cạnh " OnClick ". Cửa sổ cài đặt sự kiện sẽ mở ra.

Trong trường " Thành phần mục tiêu ", bạn cần cho biết sự kiện sẽ diễn ra ở đâu, trong trường "Hành động" - đó sẽ là loại sự kiện nào.

Ẩn tất cả các câu trả lời sai

Thêm một sự kiện sẽ ẩn nút Mad-Tea Party:

1. Nhấp vào trường " Target component " và tìm nó bằng tên duy nhất btn-mad_tea. Trong trường Hành động, hãy chọn sự kiện thích hợp, trong trường hợp này - “ Nút Ẩn ”.
2. Nhấp vào “ Lưu ”.

Định cấu hình ẩn các nút còn lại theo cách tương tự.‌

1. Đây là cách danh sách kích hoạt cho nút “Ngôi nhà của nữ công tước ” sẽ trông như thế nào khi bạn hoàn thành.
2. Nhấp vào “ Save ” để lưu các thay đổi của bạn.

Bây giờ bạn cần đảm bảo mọi thứ hoạt động.

1. Lưu các thay đổi của bạn.
2. Nhấn nút để xuất bản ứng dụng (đặt ứng dụng lên Internet), chọn "Phát triển".
3. Nhấp vào biểu tượng đi tới ứng dụng của bạn - nó sẽ mở trong một tab mới.

Truy cập ứng dụng và đảm bảo rằng khi bạn chọn đúng tùy chọn, các nút còn lại sẽ biến mất.

Ẩn câu trả lời sai khi nhấp chuột

Bây giờ, hãy làm cho nút có câu trả lời sai " Mad-Tea Party " biến mất khi người dùng nhấp vào nó. Trong trường hợp này, cả trình kích hoạt (nhấn) và sự kiện (biến mất) đều thuộc về cùng một nút - bạn chỉ cần thao tác với nó.
Mở cài đặt nút, chuyển đến tab “ Triggers ”, thêm một sự kiện mới vào trình kích hoạt “ onClick ”. Trong trường “ Thành phần mục tiêu ”, hãy chọn “ Thành phần này (bản thân) ” để cho biết rằng nút kích hoạt một sự kiện cho chính nó. Giá trị của trường " Action " giống như trong ví dụ trước - " Hide Button ". Lưu tất cả các thay đổi và xuất bản ứng dụng, chuyển sang tab ứng dụng và làm mới nó. Kiểm tra xem mọi thứ có hoạt động như dự định không:

Bây giờ điều chỉnh " Wood " và " Croquet-Ground ". Lưu, xuất bản và kiểm tra lại.

Các loại nút

Tuyệt vời, câu trả lời làm việc. Đã đến lúc thêm một câu hỏi. Tất nhiên, Appmaster.io có các yếu tố đặc biệt cho việc này, nhưng bạn hãy nhớ nhiệm vụ của chúng tôi - các nút chứ không phải gì khác. Vì vậy, hãy thêm một cái nữa. Lần này - không phải trên canvas chính, mà là trên cùng của trang: Để làm cho nó thú vị hơn, hãy điền vào câu hỏi như trên ảnh chụp màn hình này:

Để làm cho nó thú vị hơn, hãy điền vào câu hỏi như trên ảnh chụp màn hình này:

Bây giờ hãy "tô màu" bằng cách sử dụng bảng màu cho các loại nút khác nhau: chuyển đến cài đặt và chuyển giá trị trong trường " Loại " sang bất kỳ giá trị nào khác.

Chúng tôi có nó như thế này, nhưng bạn có thể chọn tùy chọn của mình, cách phối màu của nút không ảnh hưởng đến hoạt động của nó:

Bây giờ, hãy chuyển sang nhiệm vụ cuối cùng - thiết lập thông báo cho người dùng.

Nhiệm vụ khó khăn hơn

Bạn có thể hiển thị thông báo trên màn hình theo nhiều cách khác nhau. Chúng tôi đã chọn một trong những cái khác thường nhất:

Trước tiên, hãy đảm bảo rằng các nút chứa câu hỏi sẽ tự động tắt khi người dùng đưa ra câu trả lời đúng. Chúng sẽ chuyển sang màu xám và ngừng phản hồi các lần nhấp. Để thực hiện việc này, chúng tôi sử dụng chức năng Bật (Tắt) chức năng mà chúng tôi chưa xem xét và " onClick " đã quen thuộc. - Sau đó, chúng tôi sẽ xem xét một trình kích hoạt mới - onStateChange , được kích hoạt khi trạng thái của nút thay đổi. Hãy gán trình kích hoạt này cho dấu "?" - và thông báo sẽ được hiển thị trên đó.

Tắt các nút

Bạn có thể bật hoặc tắt nút theo cách thủ công trong cài đặt của nút bằng cách chuyển đổi bộ chọn trường " Bật ":

Để thiết lập chuyển đổi tự động, hãy mở tùy chọn nút “ Duchess ' House” và thêm trình kích hoạt “ onClick ”. Trong trường "Thành phần mục tiêu", hãy chọn một trong các nút câu hỏi, trong trường "Hành động" - " Nút Tắt ". Lặp lại cho tất cả các nút có chứa câu hỏi. Nó sẽ giống như thế này:

Hãy nhớ lưu tất cả các thay đổi, xuất bản và kiểm tra xem ứng dụng có hoạt động chính xác không.

Bây giờ, hãy liên kết phần đầu của tin nhắn với nút "?" (chúng tôi đặt tên là "btn_qqq"). Hãy thêm trình kích hoạt " onStateChange " vào nó. Nó kích hoạt khi trạng thái của nút thay đổi - ví dụ: khi nút tắt.

Trường “ Thành phần mục tiêu ”, chọn “ Ứng dụng ” (thông báo sẽ bật lên trong cửa sổ ứng dụng), trong trường “ Hành động ” - “ Hiển thị thông báo giao diện người dùng ” (hiển thị thông báo cho người dùng).

1. Trong trường " Kiểu tin nhắn ", hãy chọn kiểu phù hợp nhất với tình huống của bạn. Trong trường hợp của chúng tôi, đây là " Thành công " - một thông báo về việc hoàn thành thành công.
2. Điền vào các trường " Tiêu đề " và " Nội dung " - thông báo cho người dùng rằng câu trả lời là chính xác hoặc chỉ cần viết một cái gì đó hay ho.

Lưu, xuất bản và thử nghiệm.

Kết quả

Chọn tùy chọn đúng, các nút có câu trả lời sai sẽ bị ẩn, văn bản của câu hỏi sẽ mờ dần và thông báo xác nhận sẽ bật lên.

Tất nhiên, có thể tùy chỉnh tin nhắn dễ dàng hơn bằng cách liên kết nó với nút trả lời đúng. Mặc dù ngày nay chúng tôi không tìm kiếm những cách dễ dàng. Hơn nữa, bạn đã biết đủ để làm điều này mà không cần hướng dẫn của chúng tôi. Cố gắng tùy chỉnh thông báo lỗi sẽ bật lên khi bạn chọn sai câu trả lời . Nó sẽ giống như thế này:

Chúng tôi chắc chắn rằng hướng dẫn này đã giúp bạn hiểu rõ hơn về Appmaster.io. Nhưng nếu nó không rõ ràng (hoặc có thể ngược lại, quá đơn giản), hãy viết thư cho kênh điện tín hỗ trợ kỹ thuật của chúng tôi về các hướng dẫn bạn cần. Chúng tôi sẽ viết chúng!