Düğmeler Kurulumu

Alice Harikalar Diyarında kitabından yola çıkarak kısa bir test yapalım. Kullanıcıların Alice'in Cheshire Kedisi ile ilk nerede tanıştığını hatırlayıp hatırlamadığını öğrenelim.
Uygulamamız şunlara sahip olacaktır:

1. Soru metni: Alice, Cheshire Kedisi ile ilk nerede tanıştı?
2. Seçim düğmeleri: Çılgın Çay Partisi, Düşes Evi, Ahşap, Kroket Zemin . Kullanıcı yanlış cevabı seçerse - onunla birlikte olan düğme kaybolur, kullanıcı doğru olanı seçerse - yanlış cevapları olan tüm düğmeler bir kerede kaybolur.
3. Cevabın doğru olup olmadığını söyleyen açılır mesajlar.

Bir düğme nasıl oluşturulur

"Düğme" öğesini fare işaretçisiyle (sol tuşa tıklayıp basılı tutarak) düğmeyi yerleştirmek istediğiniz alana sürükleyin.

Olası cevapların sayısına göre dört düğme eklemeniz gerekir.

Düğme görünümünü özelleştirme

İlk düğmeye bir kez tıklayın - ayarlar penceresi açılacaktır. Kendinizi düğmelerin görünümünden sorumlu olan " Bak ve Hisset " sekmesinde bulacaksınız.

1. Aşağıdaki alanları düzenleyin:

• Etiket : düğme metni - ilk yanıtı girin: "Çılgın Çay Partisi";
• Simge : düğme simgesi - "Simge seç" e tıklayın ve beğendiğinizi seçin (şimdi 2500'den fazla var);
  
• Boyut : düğme boyutu - düğmeyi büyütmek için “Büyük” olarak ayarlayın;
  
• Ad : Bu, uygulamanızdaki diğer öğeler tarafından düğmenin "görüldüğü" addır; her düğmenin benzersiz bir adı olmalıdır - düğmeyi "btn-mad_tea" olarak adlandırın.

Alanları düzenlediğinizde, pencerenin üst kısmındaki görüntü, ayarlar uygulandıktan sonra düğmenin nasıl görüneceğini gösterecek şekilde değişecektir.

2. Tüm alanları doldurduğunuzda - " Kaydet "e tıklayın.

1. Düğmelerin geri kalanını, ilkine benzer şekilde, şu adları kullanarak yapılandırın: btn-duchess_h, btn-wood, btn-croquet_g.
2. Uygulamanızdaki değişiklikleri kaydetmek için "Değişiklikleri kaydet"i tıklayın - aksi takdirde, sayfayı yenilediğinizde veya düzenleyiciyi kapattığınızda düğmeler kaybolacaktır.

Tetikleyicileri ve olayları ayarlama

Şimdi düğmelerin eylemlerini ayarlamanız gerekiyor. Doğru cevabı olanla başlayalım - " Düşes Evi ". Göreviniz Web Uygulamaları düzenleyicisine "açıklamak":

• düğmenin tetiği nedir - tam olarak neye tepki vermesi gerektiği anlamına gelir: basıldığında;
• bu durumda hangi olay meydana gelir: düğmeler kaybolur;
• bu olayın gerçekleştiği yerde, hangi öğeler değişir: diğer düğmeler.

“Düşes Evi” düğme ayarlarına geri dönün ve Tetikleyiciler sekmesine gidin. Bunun için eklenen tüm tetikleyiciler görüntülenecektir:

1. Şimdi sadece bir tane var - " OnClick ". Otomatik olarak eklenir ve düğmenin üzerine tıkladığınızda harekete geçeceği anlamına gelir (ki bu tam olarak ihtiyacınız olan şeydir).
2. " OnClick "e ek olarak, düğme için başka tetikleyiciler de mümkündür. Açıklama içeren tam bir liste, platform belgelerindedir.

Şimdi etkinlikle ilgili bilgileri belirtmeniz gerekiyor (bunlardan üç tanesine sahip olacaksınız - her düğme için bir tane). " OnClick "in yanındaki " + " işaretini tıklayın. Etkinlik ayarları penceresi açılacaktır.

" Hedef bileşen " alanında, olayın nerede gerçekleşeceğini, "Eylem" alanında - ne tür bir olay olacağını belirtmeniz gerekir.

Tüm yanlış cevapları gizle

Çılgın Çay Partisi düğmesini gizleyecek bir etkinlik ekleyin:

1. " Hedef bileşen " alanına tıklayın ve benzersiz btn-mad_tea adıyla bulun. Eylem alanında, bu durumda uygun olayı seçin - “ Düğmeyi Gizle ”.
2. “ Kaydet ”e tıklayın.

Diğer düğmeleri de aynı şekilde gizlenecek şekilde yapılandırın.‌

1. İşiniz bittiğinde “ Düşes ' Evi” düğmesinin tetikleyicileri listesi bu şekilde görünmelidir.
2. Değişikliklerinizi kaydetmek için “ Kaydet ”e tıklayın.

Şimdi her şeyin çalıştığından emin olmanız gerekiyor.

1. Değişikliklerinizi kaydedin.
2. Uygulamayı yayınlamak (İnternete yerleştirmek) için düğmeye basın, "Geliştirme" seçeneğini seçin.
3. Uygulamanızın simgesine gidin - yeni bir sekmede açılacaktır.

Uygulamaya gidin ve doğru seçeneği belirlediğinizde diğer düğmelerin kaybolduğundan emin olun.

Tıklamada yanlış cevapları gizle

Şimdi yanlış cevaplı " Çılgın Çay Partisi " butonunu kullanıcı tıkladığında ortadan kaldıralım. Bu durumda, hem tetik (basma) hem de olay (kaybolma) aynı düğmeye aittir - sadece onunla çalışmanız gerekir.
Düğme ayarlarını açın, “ Tetikleyiciler ” sekmesine gidin, “ onClick ” tetikleyicisine yeni bir olay ekleyin. “ Hedef bileşen ” alanında, düğmenin kendisi için bir olayı etkinleştirdiğini belirtmek için “ Bu bileşen (kendi) ” öğesini seçin. " Eylem " alanının değeri önceki örnekteki ile aynıdır - " Düğmeyi Gizle ". Tüm değişiklikleri kaydedin ve uygulamayı yayınlayın, uygulama sekmesine geçin ve yenileyin. Her şeyin amaçlandığı gibi çalıştığını kontrol edin:

Şimdi " Ahşap " ve " Kroket Zemin " ayarını yapın. Kaydedin, yayınlayın ve tekrar test edin.

Düğme türleri

Harika, cevaplar işe yarıyor. Bir soru eklemenin zamanı geldi. Elbette, Appmaster.io'nun bunun için özel öğeleri var, ancak görevimizi hatırlıyorsunuz - düğmeler ve başka bir şey değil. Öyleyse bir tane daha ekleyelim. Bu sefer - ana tuvale değil, sayfanın üst kısmına: Daha eğlenceli hale getirmek için soruyu bu ekran görüntüsündeki gibi doldurun:

Daha eğlenceli hale getirmek için soruyu bu ekran görüntüsündeki gibi doldurun:

Şimdi farklı düğme türleri için renk şemalarını kullanarak "renklendirin": ayarlara gidin ve " Tür " alanındaki değeri başka bir değere değiştirin.

Bunu böyle aldık, ancak seçeneğinizi seçebilirsiniz, düğmenin renk şeması çalışmasını etkilemez:

Şimdi son göreve geçelim - kullanıcı için bir mesaj ayarlama.

Daha zor görev

Bir mesajı ekranda farklı şekillerde görüntüleyebilirsiniz. En sıra dışı olanlardan birini seçtik:

Öncelikle kullanıcı doğru cevabı verdiğinde soruyu içeren butonların otomatik olarak devre dışı kaldığından emin olalım. Griye dönecekler ve tıklamalara yanıt vermeyi bırakacaklar. Bunu yapmak için, henüz düşünmediğimiz Etkinleştir (Devre Dışı Bırak) işlevini ve zaten tanıdık olan " onClick ". - Ardından, düğmenin durumu değiştiğinde tetiklenen onStateChange adlı yeni bir tetikleyiciyi ele alacağız. Bu tetikleyiciyi "?" öğesine atayalım. - ve mesaj üzerinde görüntülenecektir.

Devre dışı bırakma düğmeleri

" Etkinleştir " alan seçiciyi değiştirerek düğmeyi ayarlarında manuel olarak etkinleştirebilir veya devre dışı bırakabilirsiniz:

Otomatik geçişi ayarlamak için “ Düşes Evi” düğme tercihlerini açın ve bir “ onClick ” tetikleyicisi ekleyin. "Hedef bileşen" alanında, "Eylem" - " Devre Dışı Bırak Düğmesi " alanlarındaki soru düğmelerinden birini seçin. Bir soru içeren tüm düğmeler için tekrarlayın. Şöyle görünmelidir:

Tüm değişiklikleri kaydetmeyi, yayınlamayı ve uygulamanın düzgün çalışıp çalışmadığını kontrol etmeyi unutmayın.

Şimdi mesajın başlangıcını "?" Düğmesine bağlayalım. ("btn_qqq" adını verdik). Buna " onStateChange " tetikleyicisini ekleyelim. Düğmenin durumu değiştiğinde, örneğin kapandığında etkinleşir.

“ Hedef bileşen ” alanında, “ Uygulama ”yı seçin (mesaj uygulama penceresinde açılır), “ Eylem ” alanında - “ Kullanıcı Arayüzü Mesajını Göster ” (kullanıcıya bir mesaj gösterin).

1. " Mesaj stili " alanında, durumunuza en uygun olanı seçin. Bizim durumumuzda, bu " Başarı " - başarıyla tamamlama hakkında bir mesaj.
2. " Başlık " ve " İçerik " alanlarını doldurun - kullanıcıya cevabın doğru olduğunu bildirin veya sadece güzel bir şeyler yazın.

Kaydet, yayınla ve test et.

Sonuç

Doğru seçenek seçildiğinde, yanlış cevapları olan butonlar gizlenmeli, sorunun metni soluklaşmalı ve bir onay mesajı gelmelidir.

Tabii ki mesajı doğru cevapla butonuna bağlayarak daha kolay özelleştirmek mümkündü. Her ne kadar bugün kolay yollar aramıyoruz. Üstelik, bunu bizim talimatlarımız olmadan yapacak kadar zaten biliyorsunuz. Yanlış cevabı seçtiğinizde açılacak olan hata mesajını kişiselleştirmeye çalışın. Şöyle görünmelidir:

Bu talimatın Appmaster.io'yu daha iyi tanımanıza yardımcı olduğundan eminiz. Ancak net değilse (veya tam tersine, çok basit), ihtiyacınız olan talimatlar hakkında teknik desteğimizin telgraf kanalına yazın. Onları yazacağız!