Knoppen instellen

Laten we een korte quiz maken gebaseerd op het boek Alice's Adventures in Wonderland. Laten we uitzoeken of gebruikers zich herinneren waar Alice voor het eerst de Cheshire Cat ontmoet.
Onze applicatie zal:

1. Vraagtekst: Waar ontmoette Alice voor het eerst de Cheshire Cat?
2. Keuzeknoppen: Mad-Tea Party, Duchess' House, Wood, Croquet-Ground. Als de gebruiker het verkeerde antwoord kiest - verdwijnt de bijbehorende knop, als de gebruiker het goede antwoord kiest - verdwijnen alle knoppen met de verkeerde antwoorden tegelijk.
3. Pop-up berichten die vertellen of het antwoord goed was of niet.

Hoe maak je een knop

Sleep het element "Knop" met de muisaanwijzer (door te klikken en de linkertoets ingedrukt te houden) naar het gebied waar je de knop wilt plaatsen.

U moet vier knoppen toevoegen - overeenkomstig het aantal mogelijke antwoorden.

Het uiterlijk van de knop aanpassen

Klik eenmaal op de eerste knop - het instellingenvenster wordt geopend. U bevindt zich op het tabblad"Look&Feel", dat verantwoordelijk is voor het uiterlijk van de knoppen.

1.Bewerk de volgende velden:

• Label: knop tekst - voer het eerste antwoord in: "Mad-Tea Party";
• Pictogram: knoppictogram - klik op de "Pick icon" en kies degene die je leuk vindt (er zijn er nu meer dan 2500);
  
• Grootte: knopgrootte - stel in op "Groot" om de knop groot te maken;
  
• Naam: Dit is de naam waaronder de knop wordt "gezien" door andere elementen in uw toepassing; elke knop heeft een unieke naam nodig - noem de knop "btn-mad_tea".

Als je de velden bewerkt, verandert de afbeelding bovenaan het venster om te laten zien hoe de knop eruit zal zien nadat de instellingen zijn toegepast.

2. Wanneer u alle velden hebt ingevuld - klik op"Opslaan".

1. 3. Configureer de rest van de knoppen naar analogie van de eerste, met de namen: btn-duchess_h, btn-wood, btn-croquet_g.
2. Klik op "Wijzigingen opslaan" om de wijzigingen in uw toepassing op te slaan - anders verdwijnen de knoppen zodra u de pagina vernieuwt of de editor sluit.

Triggers en gebeurtenissen instellen

Nu moet je de acties van de knoppen instellen. Laten we beginnen met degene met het juiste antwoord -"Hertoginhuis". Uw taak is om de Web Apps editor "uit te leggen":

• wat de trigger van de knop is - betekent, waar hij precies op moet reageren: bij het indrukken;
• welke gebeurtenis in dit geval plaatsvindt: de knoppen verdwijnen;
• waar deze gebeurtenis plaatsvindt, welke elementen veranderen: andere knoppen.

Ga terug naar de instellingen van de knop "Hertoginnenhuis" en ga naar het tabblad Triggers. Alle triggers die ervoor zijn toegevoegd worden getoond:

1. Nu is er slechts één -"OnClick". Deze is automatisch toegevoegd en betekent dat de knop in werking treedt als je erop klikt (en dat is precies wat je nodig hebt).
2. Naast"OnClick" zijn er nog andere triggers mogelijk voor de knop. Een volledige lijst met een beschrijving staat in de platformdocumentatie.

Nu moet u informatie over de gebeurtenis opgeven (u krijgt er drie - één voor elke knop). Klik op de"+" naast"OnClick". Het venster met de event-instellingen wordt geopend.

In het veld"Doelcomponent" moet je aangeven waar de gebeurtenis zal plaatsvinden, in het veld "Actie" - wat voor soort gebeurtenis het zal zijn.

Alle foute antwoorden verbergen

Voeg een gebeurtenis toe die de knop Mad-Tea Party zal verbergen:

1. Klik op het veld"Doelcomponent" en zoek het bij de unieke naam btn-mad_tea. Selecteer in het veld Actie de juiste gebeurtenis, in dit geval - "Knop verbergen".
2. Klik op "Opslaan".

Configureer de rest van de knoppen op dezelfde manier om ze te verbergen.

1. Zo zou de lijst met triggers voor de knop "Hertoginhuis" eruit moeten zien als je klaar bent.
2. Klik op "Opslaan" om je wijzigingen op te slaan.

Nu moet je controleren of alles werkt.

1. Sla je wijzigingen op.
2. Druk op de knop voor het publiceren van de applicatie (op het internet plaatsen), selecteer "Ontwikkeling".
3. Klik op het pictogram Ga naar je app - het wordt geopend in een nieuw tabblad.

Ga naar de app en zorg ervoor dat wanneer u de juiste optie selecteert, de rest van de knoppen verdwijnt.

Verberg onjuiste antwoorden bij klikken

Laten we nu de knop met het foute antwoord"Mad-Tea Party" laten verdwijnen als de gebruiker erop klikt. In dit geval horen zowel de trigger (drukken) als de gebeurtenis (verdwijnen) bij dezelfde knop - je hoeft er alleen maar mee te werken.
Open de knopinstellingen, ga naar het tabblad "Triggers", voeg een nieuwe gebeurtenis toe aan de trigger "onClick". Selecteer in het veld "Doelcomponent" "Deze component (zelf)" om aan te geven dat de knop een gebeurtenis voor zichzelf activeert. De waarde van het veld"Action" is dezelfde als in het vorige voorbeeld -"Hide Button". Sla alle wijzigingen op en publiceer de app, schakel naar de app-tab en ververs deze. Controleer of alles werkt zoals bedoeld:

Pas nu de"Wood" en"Croquet-Ground" aan. Opslaan, publiceren en opnieuw testen.

Soorten knoppen

Geweldig, de antwoorden werken. Het is tijd om een vraag toe te voegen. Natuurlijk heeft Appmaster.io daar speciale elementen voor, maar je herinnert je onze taak - knoppen en niets anders. Dus laten we er nog één toevoegen. Deze keer - niet aan het hoofddoek, maar aan de bovenkant van de pagina: Om het leuker te maken, vul je de vraag in zoals op deze schermafbeelding:

Om het leuker te maken, vul je de vraag in zoals op deze schermafbeelding:

Nu "inkleuren" met kleurenschema's voor verschillende soorten knoppen: ga naar de instellingen en zet de waarde in het veld"Type" op een andere.

Wij hebben het zo gekregen, maar u kunt uw optie kiezen, het kleurenschema van de knop heeft geen invloed op de werking ervan:

Laten we nu overgaan tot de laatste taak - het instellen van een bericht voor de gebruiker.

Moeilijkere taak

U kunt een bericht op verschillende manieren op het scherm weergeven. We hebben een van de meest ongebruikelijke gekozen:

Laten we er eerst voor zorgen dat de knoppen met de vraag automatisch worden gedeactiveerd wanneer de gebruiker het juiste antwoord heeft gegeven. Ze worden grijs en reageren niet meer op klikken. Hiervoor gebruiken we de functie Inschakelen (Uitschakelen), die we nog niet hebben overwogen, en het al bekende"onClick". - Vervolgens overwegen we een nieuwe trigger - onStateChange, die wordt geactiveerd wanneer de toestand van de knop verandert. Laten we deze trigger toewijzen aan de "?" - en het bericht zal daarop worden weergegeven.

Knoppen deactiveren

U kunt de knop handmatig in- of uitschakelen in de instellingen door de veldselector"Inschakelen" aan te zetten:

Om automatisch schakelen in te stellen, open je de voorkeuren van de knop "Hertoginnedhuis" en voeg je een "onClick" trigger toe. Selecteer in het veld "Doelcomponent" een van de vraagknoppen, in de velden "Actie" -"Knop uitschakelen". Herhaal dit voor alle knoppen die een vraag bevatten. Het zou er zo uit moeten zien:

Vergeet niet alle wijzigingen op te slaan, te publiceren en te controleren of de toepassing correct werkt.

Laten we nu het begin van het bericht binden aan de knop "?" (we noemden het "btn_qqq"). Laten we de trigger"onStateChange" toevoegen. Deze wordt geactiveerd wanneer de toestand van de knop verandert - bijvoorbeeld wanneer deze wordt uitgeschakeld.In het

"Doelcomponent" veld, selecteer "Toepassing" (het bericht verschijnt in het toepassingsvenster), in het "Actie" veld - "Toon UI Bericht" (toon een bericht aan de gebruiker).

1. In het veld"Berichtstijl" kiest u de stijl die het beste bij uw situatie past. In ons geval is dat"Sucess" - een bericht over succesvolle voltooiing.
2. Vul de velden"Titel" en"Inhoud" in - informeer de gebruiker dat het antwoord juist is of schrijf gewoon iets aardigs.

Opslaan, publiceren en testen.

Resultaat

Als u de juiste optie kiest, moeten knoppen met onjuiste antwoorden worden verborgen, moet de tekst van de vraag vervagen en moet er een bevestigingsbericht verschijnen.

Natuurlijk was het mogelijk om het bericht eenvoudiger aan te passen door het te binden aan de knop met het juiste antwoord. Maar vandaag zijn we niet op zoek naar gemakkelijke manieren. Bovendien weet u al genoeg om dit te doen zonder onze instructies. Probeer de foutmelding aan te passen die verschijnt wanneer u het verkeerde antwoord kiest. Het zou er zo uit moeten zien:

We zijn er zeker van dat deze instructie u heeft geholpen Appmaster.io beter te leren kennen. Maar als het niet duidelijk was (of misschien, integendeel, te eenvoudig), schrijf dan naar het telegramkanaal van onze technische ondersteuning over instructies die u nodig hebt. We zullen ze schrijven!