Let's make a short quiz based on the book Alice's Adventures in Wonderland. Let's find out if users remember where Alice first meets the Cheshire Cat.
Our application will have:
By the way, do you remember which option is correct?
Drag the "Button" element with the mouse pointer (by clicking and holding the left key) to the area where you want to place the button.
You need to add four buttons - according to the number of possible answers.
Click on the first button once — the settings window will open up. You will find yourself on the "Look&Feel" tab, which is responsible for the appearance of the buttons.
1.Edit the following fields:
When you edit the fields, the image at the top of the window will change to show how the button will look after the settings have been applied.
2.When you fill in all the fields - click "Save".
Now you need to set the actions of the buttons. Let's start with the one with the correct answer - "Duchess' House". Your task is to "explain" to the Web Apps editor:
Go back to the “Duchess' House” button settings and go to the Triggers tab. All triggers that have been added for it will be displayed:
Now you need to specify information about the event (you will have three of them - one for each button). Click the "+" next to "OnClick". The event settings window will open.
In the "Target component" field, you need to indicate where the event will occur, in the "Action" field - what kind of event it will be.
Add an event that will hide the Mad-Tea Party button:
Configure the rest of the buttons to be hidden in the same way.
Now you need to make sure everything works.
Go to the app and make sure that when you select the correct option, the rest of the buttons disappear.
Now let's make the button with the wrong answer "Mad-Tea Party" disappear when the user clicks on it. In this case, both the trigger (pressing) and the event (disappearing) belong to the same button - you only need to work with it.
Open the button settings, go to the “Triggers” tab, add a new event to the “onClick” trigger. In the “Target component” field, select “This component (self)” to indicate that the button activates an event for itself. The value of the "Action" field is the same as in the previous example - "Hide Button".
Save all changes and publish the app, switch to the app tab, and refresh it. Check that everything works as intended:
Now adjust the Wood and Croquet-Ground. Save, publish and test it again.
Great, the answers work. It's time to add a question. Of course, Appmaster.io has special elements for this, but you remember our task - buttons and nothing else. So let's add one more. This time - not to the main canvas, but the top of the page:
To make it more fun, fill out the question as on this screenshot:
Now "colorize" using color schemes for different types of buttons: go to the settings and switch the value in the "Type" field to any other.
We got it like this, but you can choose your option, the color scheme of the button does not affect its operation:
Now let's move on to the last task - setting up a message for the user.
You can display a message on the screen in different ways. We've picked one of the most unusual ones:
- First, let's make sure that the buttons containing the question are automatically deactivated when the user has given the correct answer. They will turn gray and stop responding to clicks. To do this, we use the Enable (Disable) function, which we have not yet considered, and the already familiar "onClick".
- Then we will consider a new trigger - onStateChange, which is triggered when the state of the button changes. Let's assign this trigger to the "?" - and the message will be displayed on it.
You can enable or disable the button manually in its settings by toggling the "Enable" field selector:
To set up automatic switching, open the “Duchess' House” button preferences and add an “onClick” trigger. In the field "Target component" select one of the question buttons, in the fields "Action" - "Disable Button". Repeat for all buttons that contain a question. It should look like this:
Remember to save all changes, publish and check if the application is working correctly.
Now, let's bind the start of the message to the button "?" (we named it "btn_qqq"). Let's add the trigger "onStateChange" to it. It activates when the state of the button changes - for example, when it turns off.
In the “Target component” field, select “Application” (the message will pop up in the application window), in the “Action” field - “Show UI Message” (show a message to the user).
Save, publish and test.
Choosing the correct option, buttons with incorrect answers should be hidden, the text of the question should fade and a confirmation message should pop up.
Of course, it was possible to customize the message more easily by binding it to the correct answer button. Although today we are not looking for easy ways. Moreover, you already know enough to do this without our instructions. Try to customize the error message that will pop up when you choose the wrong answer. It should look like this:
We are sure that this instruction helped you to get to know Appmaster.io better. But if it was not clear (or maybe, on the contrary, too simple), write to the telegram channel of our technical support about instructions you need. We will write them!
AppMaster.io is a universal no-code development platform that combines the functions of an engine and interface designer with source code generation.
QA about No-Code and No-Code Platform.
We are constantly expanding the list of modules to give your applications new possibilities. Today we will tell you about the ones that have appeared on the platform during the last month.
You have reached the maximum per-minute rate limit.
Try again in one minute.