Now that we have our basic page layout in place, the next step is to add the question we want to ask. Before that, we need to set up our box container to layout its contents in a vertical direction or column and center them. To achieve that we need to set a few more attributes for the box_container component:
The next step is to add the text for the question. We just click on the box_container component in the tree and click on the "plus" button to open the components menu. We will select the "text" component and the tree should look like this:
Now click on the text component to select it and then on the "pencil" button to change its name to "question". Then we will set a few attributes for the text component while it is still selected:
text: How do we call this animal?
The result should look like this:
Now let's add an image below the question. We need to select the "question_box" container and then click on the "plus" button to open the component menu and finally pick the image component.
Make sure you have an image with a cat on your computer's disk. You can always use https://images.google.com/ to find a good one. The platform includes an asset manager to upload files such as images and make them available to components such as the "image" we just added. Click on the "assets" icon on the left toolbar to open the asset manager:
Then click on the "plus" button on the right of the "ASSETS" title to add an asset. Type in the name "cat" to the pop-up dialog:
Finally, the "upload" button at the upper right part of the platform will allow us to upload the image file.
Just pick the "cat" image from your disk:
Once uploaded you should see a preview of the asset:
Now let's return to the preview mode of the platform by clicking the "screen" button on the left and just below the "assets" button that is now active.
Click on the "image" component and set the following attributes:
margin: 20px 0 20px 0
We need also to change the hight of the "question_box" container to leave some room for the possible answers. Click on the container to select it and change its height to 450px to get the following result:
The next step is to add the answers.