The layout of our page will be a simple box in the center that will contain our question with its possible answers. In the Allcancode platform, we wall 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 our case, the master container will help us center the question box.
The layout is defined in the upper right part of the platform where initially we see an item named after our 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, we choose the "Container" component (in the middle of the menu) and we 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 we 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 we just created. Any time we want to change the attributes of a component, we 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 changed 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 we want our master container to get the full size of the target screen of our 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. We just click on the master container to select it and then use the "plus" button to open the components menu. We select "Container" and now our 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 us to uniquely identify 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 we need to set the following attributes for "question_box":
You should now see a light yellow box in the upper left corner of our canvas at the center of the platform:
Now let's move the question box to the center of the master container. We 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.