The layout of your page will be a simple box in the center that will contain your question with its possible answers. In the Allcancode platform, we call this box a container. As a good practice, we suggest that you always create also a "master" container for the whole page. That gives you full control over the layout of your page. In this case, the master container will help you center the question box.
The layout is defined in the upper right part of the platform where initially you see an item named after your page. This is going to evolve into an (upside-down) tree, where the name of the page is at the top (the root of the tree).
Let's start by clicking on the name of the page at the upper right part of the platform and then clicking on the "plus" button to open the component menu:
From the menu, you choose the "Container" component (in the middle of the menu) and you can see that the platform has created a container, added it to the page and given it a default name. You may need to click on the little arrow on the left of the item with the name of the page in order to expand the tree and see the container you just added:
The name of a component can be changed at any time by clicking on it to select it and then clicking on the "pencil" button at the upper right corner to edit its name:
Now let's set some attributes of the container you just created. Any time you want to change the attributes of a component, you need to first select it by clicking on its name. Then the platform displays its attributes at the bottom right part:
Attributes are organized in sections. This part of the platform will be soon replaced by a brand new panel that will be much easier to use.
Since this is going to be the master container let's change it "background-color" by clicking next to the label of the attribute (there is an input field there) and typing "lightgray" and then the enter key or just clicking outside of the input field. Attribute changes should be immediately reflected in the (white initially) canvas at the center of the platform. If that is not the case, please try to click on the "screen" button on the left bar to force a refresh of the canvas.
Now scroll down the attributes list until you find "width" and "height" in the "Layout" section. Then set both to "100%", which means that you want your master container to get the full size of the target screen of your application (browser window, or mobile device screen).
Once you have set all three attributes for the container the canvas should turn to a light gray color as the container has taken up all its space (100% x 100%).
Now let's create a new container inside the master one, to become the question box. Just click on the master container to select it and then use the "plus" button to open the components menu. Select "Container" and now your tree should look like this (you may need to click on the arrows at the left side of components' name to expand the tree):
Until you decide to change the names of the created components, the platform will automatically generate new ones using the type of the component and a number. Please note that component names within a page should be unique. This is important to allow you to uniquely identify and refer to those components in the application logic (code).
Now let's rename "container_1" to "question_box" using the "pencil" button in the upper right corner, as described earlier. Then you need to set the following attributes for "question_box":
You should now see a light yellow box in the upper left corner of your canvas at the center of the platform:
Now let's move the question box to the center of the master container. You need to click on the "container" component in the tree (at the upper right part of the platform) and fill in the following additional attributes at the lower right part of the platform:
The result should look like this:
And this is the basic layout of our page! The next step is to add the question.