Configuration des boutons

Réalisons un petit quiz basé sur le livre "Alice's Adventures in Wonderland". Voyons si les utilisateurs se souviennent de l'endroit où Alice rencontre pour la première fois le chat du Cheshire.
Notre application aura :

1. Texte de la question : Où Alice a-t-elle rencontré le Chat du Cheshire pour la première fois ?
2. Boutons de choix : Mad-Tea Party, Maison de la duchesse, Bois, Terrain de croquet. Si l'utilisateur choisit une mauvaise réponse, le bouton correspondant disparaît, si l'utilisateur choisit la bonne réponse, tous les boutons correspondant aux mauvaises réponses disparaissent en même temps.
3. Des messages pop-up vous indiquent si la réponse est correcte ou non.

Comment créer un bouton

Faites glisser l'élément "Bouton" avec le pointeur de la souris (en cliquant et en maintenant la touche gauche enfoncée) vers la zone où vous souhaitez placer le bouton.

Vous devez ajouter quatre boutons - en fonction du nombre de réponses possibles.

Personnalisation de l'apparence des boutons

Cliquez une fois sur le premier bouton - la fenêtre des paramètres s'ouvre. Vous vous trouvez sur l'onglet"Look&Feel", qui est responsable de l'apparence des boutons.

Modifiez les champs suivants :

• Label: texte du bouton - entrez la première réponse : "Mad-Tea Party" ;
• Icône: icône du bouton - cliquez sur "Choisir l'icône" et choisissez celle qui vous convient (il en existe plus de 2500) ;
  
• Taille: taille du bouton - réglez sur "Large" pour que le bouton soit grand ;
  
• Nom: Il s'agit du nom par lequel le bouton est "vu" par les autres éléments de votre application ; chaque bouton doit avoir un nom unique - nommez le bouton "btn-mad_tea".

Lorsque vous modifiez les champs, l'image en haut de la fenêtre change pour montrer l'aspect du bouton après l'application des paramètres.

2. Lorsque vous avez rempli tous les champs, cliquez sur"Enregistrer".

1. Configurez les autres boutons par analogie avec le premier, en utilisant les noms : btn-duchess_h, btn-wood, btn-croquet_g.
2. Cliquez sur "Enregistrer les modifications" pour sauvegarder les changements dans votre application - sinon, les boutons disparaîtront lorsque vous rafraîchirez la page ou fermerez l'éditeur.

Configuration des déclencheurs et des événements

Vous devez maintenant définir les actions des boutons. Commençons par celui qui a la bonne réponse -"Maison de la duchesse". Votre tâche consiste à "expliquer" à l'éditeur d'applications Web :

• quel est le déclencheur du bouton - c'est-à-dire, ce à quoi il doit réagir exactement : en appuyant sur le bouton ;
• quel événement se produit dans ce cas : les boutons disparaissent ;
• où cet événement se produit, quels éléments changent : les autres boutons.

Revenez aux paramètres du bouton "Maison de la duchesse" et allez dans l'onglet Triggers. Tous les déclencheurs qui ont été ajoutés pour lui seront affichés :

1. Il n'y en a maintenant qu'un seul -"OnClick". Il est ajouté automatiquement et signifie que le bouton agira lorsque vous cliquerez dessus (ce qui est exactement ce dont vous avez besoin).
2. En plus de"OnClick", d'autres déclencheurs sont possibles pour le bouton. Une liste complète avec une description se trouve dans la documentation de la plate-forme.

Vous devez maintenant spécifier les informations relatives à l'événement (vous en aurez trois - un pour chaque bouton). Cliquez sur le"+" à côté de"OnClick". La fenêtre des paramètres de l'événement s'ouvre.

Dans le champ"Composant cible", vous devez indiquer où l'événement se produira, dans le champ "Action" - quel type d'événement ce sera.

Masquer toutes les mauvaises réponses

Ajoutez un événement qui masquera le bouton "Mad-Tea Party" :

1. Cliquez sur le champ"Composant cible" et trouvez-le par le nom unique btn-mad_tea. Dans le champ "Action", sélectionnez l'événement approprié, dans ce cas - "Hide Button".
2. Cliquez sur "Enregistrer".

Configurez les autres boutons pour qu'ils soient masqués de la même manière.

1. Voici à quoi devrait ressembler la liste des déclencheurs du bouton "Maison de laduchesse" lorsque vous aurez terminé.
2. Cliquez sur "Save"pour enregistrer vos modifications.

Vous devez maintenant vous assurer que tout fonctionne.

1. Enregistrez vos modifications.
2. Appuyez sur le bouton pour publier l'application (la placer sur Internet), sélectionnez "Développement".
3. Cliquez sur l'icône "Go to your app" - elle s'ouvrira dans un nouvel onglet.

Allez dans l'application et assurez-vous que lorsque vous sélectionnez la bonne option, les autres boutons disparaissent.

Masquer les réponses incorrectes au clic

Maintenant, faisons disparaître le bouton avec la mauvaise réponse"Mad-Tea Party" lorsque l'utilisateur clique dessus. Dans ce cas, le déclencheur (appui) et l'événement (disparition) appartiennent tous deux au même bouton - il suffit de travailler avec lui.
Ouvrez les paramètres du bouton, allez dans l'onglet "Triggers", ajoutez un nouvel événement au trigger "onClick". Dans le champ "Target component", sélectionnez "This component (self)" pour indiquer que le bouton active un événement pour lui-même. La valeur du champ"Action" est la même que dans l'exemple précédent -"Hide Button". Enregistrez toutes les modifications et publiez l'application, passez à l'onglet de l'application et actualisez-la. Vérifiez que tout fonctionne comme prévu :

Ajustez maintenant le"Bois" et le"Terrain de Croquet". Sauvegardez, publiez et testez à nouveau.

Types de boutons

Super, les réponses fonctionnent. Il est temps d'ajouter une question. Bien sûr, Appmaster.io a des éléments spéciaux pour cela, mais vous vous souvenez de notre tâche - des boutons et rien d'autre. Alors ajoutons-en un autre. Cette fois, pas dans la toile principale, mais en haut de la page : Pour que ce soit plus amusant, répondez à la question comme sur cette capture d'écran :

Pour que ce soit plus amusant, répondez à la question comme sur cette capture d'écran :

Maintenant, "colorez" en utilisant des schémas de couleurs pour différents types de boutons : allez dans les paramètres et changez la valeur du champ"Type" en une autre.

Nous l'avons obtenu ainsi, mais vous pouvez choisir votre option, le schéma de couleurs du bouton n'affecte pas son fonctionnement :

Passons maintenant à la dernière tâche : la création d'un message pour l'utilisateur.

Une tâche plus difficile

Vous pouvez afficher un message à l'écran de différentes manières. Nous avons choisi l'une des plus inhabituelles :

Tout d'abord, faisons en sorte que les boutons contenant la question soient automatiquement désactivés lorsque l'utilisateur a donné la bonne réponse. Ils deviendront gris et ne répondront plus aux clics. Pour ce faire, nous utilisons la fonction Enable (Disable), que nous n'avons pas encore examinée, et le"onClick" déjà connu. - Ensuite, nous allons considérer un nouveau déclencheur - onStateChange, qui est déclenché lorsque l'état du bouton change. Affectons ce déclencheur au bouton " ?" - et le message s'affichera sur celui-ci.

Désactiver les boutons

Vous pouvez activer ou désactiver le bouton manuellement dans ses paramètres en basculant le sélecteur de champ"Enable" :

Pour configurer la commutation automatique, ouvrez les préférences du bouton "Maison de laduchesse" et ajoutez un déclencheur "onClick". Dans le champ "Composant cible", sélectionnez l'un des boutons de question, dans les champs "Action" -"Désactiver le bouton". Répétez l'opération pour tous les boutons qui contiennent une question. Cela devrait ressembler à ceci :

N'oubliez pas d'enregistrer toutes les modifications, de publier et de vérifier si l'application fonctionne correctement.

Maintenant, lions le début du message au bouton " ?" (nous l'avons nommé "btn_qq"). Ajoutons-lui le déclencheur"onStateChange". Il s'active lorsque l'état du bouton change - par exemple, lorsqu'il s'éteint.

Dans le champ "Target component", sélectionnez "Application" (le message apparaîtra dans la fenêtre de l'application), dans le champ "Action" - "Show UI Message" (afficher un message à l'utilisateur).

1. Dans le champ"Message style", choisissez celui qui convient le mieux à votre situation. Dans notre cas, il s'agit de"Sucess" - un message sur la réussite de l'opération.
2. Remplissez les champs"Titre" et"Contenu" - informez l'utilisateur que la réponse est correcte ou écrivez simplement quelque chose de gentil.

Enregistrez, publiez et testez.

Résultat

En choisissant la bonne option, les boutons contenant des réponses incorrectes doivent être masqués, le texte de la question doit s'estomper et un message de confirmation doit s'afficher.

Bien entendu, il était possible de personnaliser le message plus facilement en le liant au bouton de la bonne réponse. Mais aujourd'hui, nous ne cherchons pas de moyens faciles. De plus, vous en savez déjà assez pour le faire sans nos instructions. Essayez de personnaliser le message d'erreur qui s'affiche lorsque vous choisissez une mauvaise réponse. Il devrait ressembler à ceci :

Nous sommes certains que cette instruction vous a aidé à mieux connaître Appmaster.io. Mais si ce n'était pas clair (ou peut-être, au contraire, trop simple), écrivez au canal télégramme de notre support technique les instructions dont vous avez besoin. Nous les écrirons !